Furnizarea unui cuprins ajută la previzualizarea și prioritizarea conținutului atunci când scrieți articole mai lungi. Dar nu orice platformă facilitează adăugarea uneia. Cum putem implementa una când nu avem instrumente de primă clasă?

Doriți să treceți înainte de „ce” și „de ce”? Salt la „cum”!

Ce vom crea

Cum sa adaugati un cuprins la articolul sau articolul dvs
Cuprinsul postării pe blog

În sensul acestui articol, vom folosi managerul de conținut Routech.org în scopuri vizuale și demonstrative. Routech / news folosește platforma de blogging Fantomă în momentul scrierii acestui lucru, dar această metodă se poate aplica cu adevărat oricărui articol pe care îl scrieți.

De ce este util acest lucru?

Furnizarea unui cuprins ajută la îmbunătățirea experienței pe care o vor avea persoanele care vă citesc articolul.

Oferă cititorilor o previzualizare a articolului

Saltul într-un articol, cel puțin unul lung, poate fi un angajament important. Nimeni nu vrea să-și petreacă 20 de minute dimineața doar pentru a-și da seama că o postare în care a intrat nu și-a răspuns de fapt la întrebări. Sau că este vorba despre o reconsiderare a ceva despre care sunt deja experți (deși perspective diferite pot fi totuși utile).

Oferind această previzualizare, puteți ajuta oamenii să-și dea seama la ce să se aștepte atunci când încep să citească. Le permite să-și acorde prioritate timpului cu cealaltă listă de articole pe care trebuie să le citească.

Oferă puncte de ancorare pentru a trece la un conținut specific

Similar cu furnizarea unei previzualizări, poate cineva dorește să citească o anumită porțiune a paginii. Poate din cauză că pot sări peste primele fragmente ale unui tutorial sau vin dintr-un link pe care un coleg de serviciu l-a distribuit Slack.

Ideea este că oamenii pot folosi cuprinsul pentru a sări în jos la părțile care sunt mai importante pentru ei.

Bonus: te ajută ca autor

Furnizarea unui cuprins s-ar putea să nu vă ajute din multe motive practice, dar este un instrument suplimentar pentru a vă acorda prioritate și a înțelege conținutul postării dvs. Acesta servește ca o schiță de nivel înalt la care vă puteți referi atunci când vă asigurați că fluxul poveștii dvs. are sens.

Ce nu face

Din păcate, acesta este un proces manual. Acest cuprins nu se va actualiza magic de fiecare dată când vă modificați conținutul. Deci, asigurați-vă că sunteți vigilenți în timpul procesului de editare și actualizați orice linkuri rupte sau adăugați și eliminați orice modificări înainte de a publica.

Cum putem adăuga un cuprins?

Cheia acestei soluții este să utilizați dispozitivul încorporat id atribute aplicate anteturilor de conținut din HTML atunci când creați o pagină de postare. Utilizarea acestor atribute ne permite să creăm un legătură de ancorare care va sari poziția de derulare a browserului în jos la locația elementului cu care id.

Un exemplu de bază al codului HTML arată astfel:

<ul>
  <li><a href=“#my-id”>Link to My ID</a></li>
</ul>
<article>
  <p>Super long content</p>
  <h2 id=“my-id”>Important Thing</h2>
  <p>Important content</p>
</article>

În cele de mai sus, le putem vedea pe ale noastre article conține un conținut de bază (imaginați-vă că este mult mai lung decât cel de mai sus) cu un h2 care urmează cu conținutul nostru important.

Prin furnizarea noastră h2 cu id atribut, putem crea acum un link prin setarea href la tiparul de #[id] care va trece la acel element din pagină.

Acum, atunci când creăm acest lucru pe platforma noastră de blogging, nu trebuie neapărat să ne facem griji cu privire la scrierea acestui HTML. Dar trebuie să înțelegem cum să găsim id pentru a crea link-urile noastre.

Găsirea codului nostru de antet

Putem folosi instrumentele de dezvoltator ale browserului nostru (Crom, Firefox) pentru a găsi destul de ușor prețioasa noastră id atribute pentru a crea linkurile noastre.

Folosind browserul preferat, găsiți titlul pe care doriți să îl utilizați, faceți clic dreapta pe text, apoi selectați „Inspectați” (sau „Inspectați elementul”) din partea de jos a meniului contextual.

1611543849 306 Cum sa adaugati un cuprins la articolul sau articolul dvs
Folosind Chrome pentru a inspecta HTML-ul unei pagini

De acolo, veți observa că un panou apare fie din partea de jos a paginii, fie în lateral. Amplasarea acestui panou nu contează prea mult – este doar un setarea utilizatorului. Dar acum putem vedea codul HTML al paginii pe care o privim cu elementul de antet evidențiat.

1611543849 652 Cum sa adaugati un cuprins la articolul sau articolul dvs
Previzualizarea codului HTML al unei pagini utilizând instrumentele pentru dezvoltatori Chrome

După ce am găsit antetul nostru în HTML, găsiți fișierul id atribut. Faceți dublu clic pe conținutul acestuia și copiați puțin valoarea pe care o vom folosi.

1611543849 14 Cum sa adaugati un cuprins la articolul sau articolul dvs
Selectarea atributului id folosind instrumentele pentru dezvoltatori Chrome

Deoarece vom crea un cuprins, să deschidem pagina de editor a postării noastre și să derulăm în partea de sus a paginii.

Primul lucru pe care vrem să-l facem este să începem o listă, pe care o putem face tastând un asterisc * urmat de un spațiu când începeți o nouă secțiune de conținut.

Cum sa adaugati un cuprins la articolul sau articolul dvs
Adăugarea unei liste noi folosind Markdown în Ghost

Apoi, scrieți ce doriți să spună linkul dvs. Cel mai frecvent în cuprins, linkul este exact același text cu antetul în sine.

După ce scrie ce vrei, evidențiază întreaga linie și un mic meniu contextual va apărea deasupra selecției tale.

1611543850 431 Cum sa adaugati un cuprins la articolul sau articolul dvs
Deschiderea meniului de formatare a textului îmbogățit

Selectați pictograma link mic și meniul contextual se va transforma într-un câmp de text. Tastați în câmpul de text un hashtag # urmat de conținutul fișierului id atributul pe care l-ați găsit în antetul dvs. de mai sus.

1611543850 685 Cum sa adaugati un cuprins la articolul sau articolul dvs
Adăugarea sau editarea unui link

Apăsați tasta Enter și reușiți! Avem un link.

1611543850 957 Cum sa adaugati un cuprins la articolul sau articolul dvs
Listă cu link

Repetați pașii de mai sus și creați un link pentru fiecare antet de nivel superior la care doriți să conectați.

Totuși, nu simți că trebuie să treci peste bord. În mod obișnuit, veți vedea că postările de blog includ doar anteturile de nivel superior ale paginii, așa că nu simțiți că trebuie să includeți fiecare sub antet. În cele din urmă – faceți ceea ce vă convine.

Testarea și previzualizarea cuprinsului

După ce am terminat de adăugat toate linkurile noastre, putem previzualiza sau vizualiza postarea noastră și putem testa dacă linkurile noastre funcționează.

1611543850 760 Cum sa adaugati un cuprins la articolul sau articolul dvs
Previzualizarea sau vizualizarea postării în Ghost pe freecodecamp.org/news

După deschiderea previzualizării sau a paginii, derulați la cuprins sau link și faceți clic pe acesta pentru a testa.

1611543850 294 Cum sa adaugati un cuprins la articolul sau articolul dvs
Folosirea unui cuprins

Succes!

Mai multe instrumente pentru autor

Un cuprins este doar o modalitate de a ajuta cititorii să se bucure de munca grea. Ce alte instrumente utilizați care sunt importante pentru fluxul dvs. de lucru? Există altele pe care le-ați văzut, dar poate nu sunteți sigur cum să le implementați singur?

Distribuiți cu noi pe Twitter la @colbyfayock și @freecodecamp!