Å inkludere en innholdsfortegnelse (TOC) i Ghost-bloggen din forbedrer leserens opplevelse betraktelig ved å forenkle sømløs navigering gjennom lengre artikler. Denne opplæringen vil guide deg gjennom prosessen med å legge til en innholdsfortegnelse til et hvilket som helst Ghost-tema ved å bruke TOCBOT, en JavaScript-plugin som automatisk genererer en innholdsfortegnelse fra overskriftene i innleggene dine.
Integrering av TOCBOT i Ghost
TOCBOT konstruerer effektivt en innholdsfortegnelse fra innleggsoverskriftene dine. Følg disse enkle trinnene for installasjon:
- Logg på Ghost-admin-dashbordet og gå til
Settings > Code injection. - I
Site Headerområdet setter du inn det nødvendige TOCBOT-skriptet og stilarket:
<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">
- Deretter, i
Site Footerdelen, initialiser TOCBOT ved å bruke følgende skript:
<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>
Sørg for at det contentSelectorstemmer overens med klassen som er angitt i temaet ditt for innleggsinnhold. Vanlig brukte klasser inkluderer .post-content, .gh-content, eller .c-content.
- Til slutt lagrer du endringene i
Code injectioninnstillingene.
Sette inn TOC-plassholderen i innlegg
For å vise frem innholdsfortegnelsen i artiklene dine, må du plassere en plassholder på ønsket sted:
- Rediger et innlegg der du ønsker å inkludere innholdsfortegnelsen.
- Legg til et HTML-kort på stedet du foretrekker ved å skrive
/htmli redigeringsprogrammet. - Ta med følgende kode i HTML-kortet:
<div class="toc"></div>
Denne kodebiten etablerer en plass for innholdsfortegnelsen. Når innlegget er åpnet, vil TOCBOT fylle denne plassen med den dynamisk genererte innholdsfortegnelsen hentet fra innholdsoverskriftene dine.
Tilpasse TOC-utseendet
Du kan tilpasse utseendet til innholdsfortegnelsen for bedre å tilpasses temadesignet ditt:
- I
Site HeaderunderSettings > Code injectionlegger du til egendefinerte CSS-stiler omsluttet av en<style>tag:
<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>
Juster gjerne disse stilene for å passe dine preferanser.
Modifisering for ulike temaer
Siden temaer kan bruke forskjellige klassenavn for innholdsseksjoner, sørg for at contentSelectori TOCBOT-oppsettet samsvarer med temaets innholdsklasse:
- Inspiser temaet ditt ved å starte med et åpent innlegg.
- Høyreklikk på innleggets innhold og velg
Inspectå få tilgang til nettleserens utviklerverktøy. - Finn klassenavnet knyttet til elementet som inneholder innleggsinnholdet ditt, for eksempel
.post-content.
- Sørg for å oppdatere
contentSelectori TOCBOT-skriptet basert på det du finner.
Opprette en Sticky TOC
For å holde innholdsfortegnelsen synlig mens leserne ruller, kan du sette den til å være klissete:
- I
Site Header, legg til denne CSS i en<style>tag:
<style>
. toc {
position: sticky; top: 20px;
}
</style>
Dette vil plassere innholdsfortegnelsen i forhold til visningsporten, og sikre at den forblir i sikte mens brukere ruller gjennom innlegget.
Ved å implementere disse instruksjonene kan du berike Ghost-bloggen din med en funksjonell innholdsfortegnelse, og dermed forbedre navigasjonen og leserinteraksjonen gjennom innleggene dine.
Relaterte artikler:
Administrer Bluesky-, Mastodon- og Threads-kontoer sømløst med Openvibe
7:51
Retting av «Ugyldig håndtak»-feilen på Bluesky: En trinn-for-trinn-veiledning
11:48
Topp 5 metoder for å starte filutforsker som administrator i Windows 11
14:55
Legg att eit svar