Hinzufügen eines Inhaltsverzeichnisses (TOC) zu Ihrem Ghost-Theme: Eine Schritt-für-Schritt-Anleitung

Das Integrieren eines Inhaltsverzeichnisses (TOC) in Ihr Ghost-Blog verbessert das Leseerlebnis erheblich, da es eine nahtlose Navigation durch längere Artikel ermöglicht. Dieses Tutorial führt Sie durch den Prozess des Hinzufügens eines Inhaltsverzeichnisses zu jedem Ghost-Design mithilfe von TOCBOT, einem JavaScript-Plugin, das automatisch ein Inhaltsverzeichnis aus den Überschriften in Ihren Beiträgen generiert.

Integration von TOCBOT in Ghost

TOCBOT erstellt effizient ein Inhaltsverzeichnis aus Ihren Beitragsüberschriften. Befolgen Sie diese einfachen Schritte zur Installation:

Melden Sie sich bei Ihrem Ghost-Administrator-Dashboard an und gehen Sie zu Settings > Code injection.
Fügen Sie in den Site HeaderBereich das erforderliche TOCBOT-Skript und Stylesheet ein:

<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">

Initialisieren Sie als Nächstes im Site FooterAbschnitt TOCBOT mit dem folgenden Skript:

<script> document.addEventListener('DOMContentLoaded', function() { tocbot.init({ tocSelector: '.toc', contentSelector: '.post-content', headingSelector: 'h1, h2, h3, h4', scrollSmooth: true }); }); </script>

Stellen Sie sicher, dass contentSelectormit der Klasse übereinstimmt, die in Ihrem Design für den Beitragsinhalt festgelegt ist. Häufig verwendete Klassen sind .post-content, .gh-content, oder .c-content.

Speichern Sie abschließend Ihre Änderungen in den Code injectionEinstellungen.

Einfügen des Inhaltsverzeichnis-Platzhalters in Beiträge

Um das Inhaltsverzeichnis in Ihren Artikeln anzuzeigen, müssen Sie an der gewünschten Stelle einen Platzhalter platzieren:

Bearbeiten Sie einen Beitrag, in dem Sie das Inhaltsverzeichnis einfügen möchten.
Fügen Sie an der gewünschten Stelle eine HTML-Karte hinzu, indem Sie sie /htmlin den Editor eingeben.
Fügen Sie den folgenden Code in die HTML-Karte ein:

<div class="toc"></div>

Dieser Codeabschnitt legt einen Platz für das Inhaltsverzeichnis fest. Sobald auf den Beitrag zugegriffen wird, füllt TOCBOT diesen Platz mit dem dynamisch generierten Inhaltsverzeichnis, das aus Ihren Inhaltsüberschriften abgeleitet wird.

Anpassen des Erscheinungsbilds des Inhaltsverzeichnisses

Sie können das Erscheinungsbild des Inhaltsverzeichnisses personalisieren, damit es besser zu Ihrem Themendesign passt:

Fügen Sie darunter benutzerdefinierte CSS-Stile Site Headerhinzu, Settings > Code injectiondie in einem <style>Tag eingeschlossen sind:

<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>

Passen Sie diese Stile gerne Ihren Wünschen an.

Anpassen für verschiedene Themen

Da Designs unterschiedliche Klassennamen für Inhaltsabschnitte verwenden können, stellen Sie sicher, dass die Angaben contentSelectorim TOCBOT-Setup mit der Inhaltsklasse Ihres Designs übereinstimmen:

Überprüfen Sie Ihr Thema, indem Sie mit einem beliebigen offenen Beitrag beginnen.
Klicken Sie mit der rechten Maustaste auf den Beitragsinhalt und wählen Sie Inspectden Zugriff auf die Entwicklertools Ihres Browsers.
Suchen Sie den Klassennamen, der dem Element zugeordnet ist, das Ihren Beitragsinhalt enthält, z. B. .post-content.

contentSelectorStellen Sie sicher, dass Sie das TOCBOT-Skript basierend auf Ihren Erkenntnissen aktualisieren .

Erstellen eines Sticky-Inhaltsverzeichnisses

Damit das Inhaltsverzeichnis beim Scrollen Ihrer Leser sichtbar bleibt, können Sie es als „Sticky“ festlegen:

Fügen Sie in diesem Site Headerdieses CSS innerhalb eines <style>Tags hinzu:

<style> . toc { position: sticky; top: 20px; } </style>

Dadurch wird das Inhaltsverzeichnis im Verhältnis zum Ansichtsfenster positioniert und sichergestellt, dass es sichtbar bleibt, wenn Benutzer durch den Beitrag scrollen.

Durch die Umsetzung dieser Anweisungen können Sie Ihr Ghost-Blog mit einem funktionalen Inhaltsverzeichnis bereichern und so die Navigation und Leserinteraktion in Ihren Beiträgen verbessern.

Quelle