Turinio (TOC) pridėjimas prie savo vaiduoklio temos: žingsnis po žingsnio vadovas

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 dalyje Settings > 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.

Šaltinis