At inkorporere en indholdsfortegnelse (TOC) i din Ghost-blog forbedrer læserens oplevelse markant ved at lette problemfri navigation gennem længere artikler. Denne tutorial vil guide dig gennem processen med at tilføje en TOC til ethvert Ghost-tema ved hjælp af TOCBOT, et JavaScript-plugin, der automatisk genererer en TOC fra overskrifterne i dine indlæg.
Integrering af TOCBOT i Ghost
TOCBOT konstruerer effektivt en indholdsfortegnelse ud fra dine indlægsoverskrifter. Følg disse enkle trin for installation:
- Log ind på dit Ghost-admin-dashboard og gå til
Settings > Code injection. - Indsæt det påkrævede TOCBOT-script og stylesheet i
Site Headerområdet:
<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">
- Derefter, i
Site Footerafsnittet, initialiser TOCBOT ved hjælp af følgende script:
<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 den klasse, der er angivet i dit tema for indlægsindhold. Almindeligt brugte klasser omfatter .post-content, .gh-content, eller .c-content.
- Gem til sidst dine ændringer i
Code injectionindstillingerne.
Indsættelse af TOC-pladsholderen i indlæg
For at vise indholdsfortegnelsen i dine artikler skal du placere en pladsholder på den ønskede placering:
- Rediger et indlæg, hvor du ønsker at inkludere indholdsfortegnelsen.
- Tilføj et HTML-kort på det sted, du foretrækker, ved at skrive
/htmli editoren. - Inkluder følgende kode i HTML-kortet:
<div class="toc"></div>
Dette stykke kode etablerer et rum til indholdsfortegnelsen. Når indlægget er tilgået, vil TOCBOT udfylde dette rum med den dynamisk genererede TOC, der er afledt af dine indholdsoverskrifter.
Tilpasning af indholdsfortegnelsens udseende
Du kan tilpasse udseendet af indholdsfortegnelsen for bedre at tilpasse dit temadesign:
- Tilføj tilpassede CSS-typografier omsluttet af et tag i
Site Headerunder :Settings > Code injection<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>
Du er velkommen til at tilpasse disse stilarter, så de passer til dine præferencer.
Ændring for forskellige temaer
Da temaer kan bruge forskellige klassenavne til indholdssektioner, skal du sikre dig, at contentSelectorTOCBOT-opsætningen matcher dit temas indholdsklasse:
- Undersøg dit tema ved at starte med et åbent indlæg.
- Højreklik på indlæggets indhold og vælg
Inspectat få adgang til din browsers udviklerværktøjer. - Find det klassenavn, der er knyttet til det element, der indeholder dit indlægsindhold, såsom
.post-content.
- Sørg for at opdatere
contentSelectori TOCBOT-scriptet baseret på, hvad du finder.
Oprettelse af en Sticky TOC
For at holde indholdsfortegnelsen synlig, mens dine læsere ruller, kan du indstille den til at være klæbrig:
Site HeaderTilføj denne CSS i et tag i<style>.
<style>
. toc {
position: sticky; top: 20px;
}
</style>
Dette vil placere indholdsfortegnelsen i forhold til visningsporten, hvilket sikrer, at den forbliver i syne, når brugerne ruller gennem indlægget.
Ved at implementere disse instruktioner kan du berige din Ghost-blog med en funktionel indholdsfortegnelse og dermed forbedre navigation og læserinteraktion gennem dine indlæg.
Skriv et svar