Turinio (TOC) įtraukimas į savo „Ghost“ tinklaraštį žymiai pagerina skaitytojo patirtį, nes palengvina sklandų naršymą ilgesniuose straipsniuose. Ši pamoka padės jums pridėti TOC prie bet kurios „Ghost“ temos naudojant TOCBOT – „JavaScript“ papildinį, kuris automatiškai generuoja TOC iš jūsų įrašų antraščių.
TOCBOT integravimas į Ghost
TOCBOT efektyviai sukuria TOC iš jūsų įrašų antraščių. Atlikite šiuos paprastus diegimo veiksmus:
- Prisijunkite prie „Ghost“ administratoriaus prietaisų skydelio ir eikite į
Settings > Code injection. - Srityje
Site Headerįterpkite reikiamą TOCBOT scenarijų ir stiliaus lapą:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">
- Tada skyriuje
Site Footerinicijuokite TOCBOT naudodami šį scenarijų:
<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>
Įsitikinkite, kad contentSelectorįrašo turinys atitinka temoje nurodytą klasę. Dažniausiai naudojamos klasės yra .post-content, .gh-contentarba .c-content.
- Galiausiai išsaugokite pakeitimus nustatymuose
Code injection.
TOC rezervuotos vietos įterpimas į pranešimus
Jei norite savo straipsniuose parodyti TOC, norimoje vietoje turėsite įdėti rezervuotąją vietą:
- Redaguokite įrašą, kuriame norite įtraukti TOC.
- Pridėkite HTML kortelę norimoje vietoje įvesdami
/htmlį redaktorių. - Į HTML kortelę įtraukite šį kodą:
<div class="toc"></div>
Ši kodo dalis nustato TOC erdvę. Pasiekus įrašą, TOCBOT užpildys šią erdvę dinamiškai sugeneruotais TOC, gautais iš jūsų turinio antraščių.
TOC išvaizdos pritaikymas
Galite suasmeninti TOC išvaizdą, kad geriau atitiktų jūsų temos dizainą:
Site HeaderŽemiau esančioje dalyjeSettings > Code injectionpridėkite tinkintus CSS stilius, įtrauktus į žymą<style>:
<style>
. toc {
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 5px;
}
. toc a {
text-decoration: none;
color: #333;
}
. toc a:hover {
text-decoration: underline;
}
</style>
Nedvejodami koreguokite šiuos stilius pagal savo pageidavimus.
Modifikavimas įvairioms temoms
Kadangi temose gali būti naudojami skirtingi turinio skilčių klasių pavadinimai, įsitikinkite, kad contentSelectorTOCBOT sąranka atitinka jūsų temos turinio klasę:
- Patikrinkite savo temą pradėdami nuo bet kurio atviro įrašo.
- Dešiniuoju pelės mygtuku spustelėkite įrašo turinį ir pasirinkite
Inspectpasiekti naršyklės kūrėjo įrankius. - Raskite klasės pavadinimą, susietą su elementu, kuriame yra jūsų įrašo turinys, pvz.
.post-content, .
contentSelectorAtsižvelgdami į tai, ką radote, būtinai atnaujinkite TOCBOT scenarijų.
Lipniojo TOC kūrimas
Jei norite, kad TOC būtų matomas, kol skaitytojai slenka, galite nustatyti, kad jis būtų lipnus:
- Pridėkite
Site Headeršį CSS prie<style>žymos:
<style>
. toc {
position: sticky; top: 20px;
}
</style>
Taip TOC bus išdėstyta peržiūros srities atžvilgiu, užtikrinant, kad jis liktų matomas, kai naudotojai slinks įrašu.
Įgyvendindami šias instrukcijas, galite praturtinti savo „Ghost“ tinklaraštį funkciniu turiniu, taip pagerindami naršymą ir skaitytojų sąveiką visuose jūsų įrašuose.
Parašykite komentarą