ghost-toc-plugin Vorschau

Ändern Sie Optionen im linken Panel. Das Inhaltsverzeichnis wird live neu gezeichnet und der Einbettungscode aktualisiert sich mit. Scrollen Sie, um den aktuellen Abschnitt hervorgehoben zu sehen.

Einführung

ghost-toc-plugin ist ein winziges (~3 KB), abhängigkeitsfreies schwebendes Inhaltsverzeichnis für Ghost. Es begann als Widget für Ghost, funktioniert aber auch in Notion-basierten Blogs und überall, wo du ein Skript einbinden kannst. Es liest die Überschriften deines Beitrags, erstellt die Liste automatisch, folgt dir beim Scrollen und hebt den gerade gelesenen Abschnitt hervor. Diese Seite ist ein Live-Beispiel: Die Liste an der Seite ist das echte Widget.

Installation

Einmal mit diesem Snippet einbinden, ohne Build-Schritt und ohne Theme-Dateien zu bearbeiten:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.min.js"
        data-content=".gh-content"
        data-headings="h2,h3"
        data-title="Inhalt"></script>

Code-Injection

Füge es in Ghost unter Settings → Code injection → Site Footer ein. Auf Notion-basiertem Hosting fügst du es im Feld für eigenen Code ein: oopy hat in den Site-Einstellungen ein head/footer-Codefeld, super.so hat einen Custom-Code-Bereich, und dort setzt du data-content auf .notion-page-content. Auf jeder anderen Seite platzierst du es direkt vor dem schließenden </body>-Tag. Lass es ohne async oder defer, damit es seine eigenen data-*-Optionen lesen kann.

Optionen

Alles wird über data-*-Attribute am Script-Tag konfiguriert: der Inhalts-Selektor, welche Überschriften einbezogen werden, der Titel, die Position und mehr:

data-content=".gh-content"
data-headings="h2,h3"
data-position="right"
data-min-width="1200"
data-top="100"

Anpassung

Farben und Platzierung sind voll anpassbar. Jede Klasse und CSS-Variable ist unter greedylabs-ghost-toc benannt, sodass das Widget nie mit deinem Theme kollidiert.

Farben

Das aktive Element folgt standardmäßig der Akzentfarbe deines Ghost-Themes (--ghost-accent-color); setze data-accent oder überschreibe die CSS-Variablen, um sie zu ändern. Das Widget bringt helle und dunkle Standardwerte mit und passt sich automatisch dem Systemthema an. Für bessere Lesbarkeit im Dunkelmodus überschreibe die Farben nur für Dunkel, ein einzelner fester Wert würde im Hellmodus unpassend wirken:

@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-toc {
    --greedylabs-ghost-toc-muted: #c9d1d9;
    --greedylabs-ghost-toc-border: rgba(255,255,255,.22);
  }
}

Position

Nutze data-position für links oder rechts, data-top für den oberen Abstand, data-gap für den Abstand zum Inhalt und data-width für die Panelbreite. Unterhalb von data-min-width (oder wenn neben dem Inhalt kein Platz ist) blendet sich das Inhaltsverzeichnis selbst aus.

Häufige Fragen

Verlangsamt das Widget meine Seite?

Kaum. Es ist rund 3KB groß, ohne Abhängigkeiten und ohne externe Anfragen. Scrollen wird über einen passiven Listener verarbeitet und per requestAnimationFrame auf eine Berechnung pro Frame gebündelt; neu berechnet wird nur bei Änderungen der Dokumenthöhe (lazy geladene Bilder, giscus und ähnliche Widgets) über einen ResizeObserver.

Warum wird das Inhaltsverzeichnis nicht angezeigt?

Prüfe drei Dinge: ob dein data-content-Selektor zum tatsächlichen Artikel-Container passt, ob es mindestens zwei Überschriften gibt (darunter wird nichts erzeugt), und ob das Fenster breiter als data-min-width (standardmäßig 1200px) ist und neben dem Inhalt Platz für das Panel bleibt. Auf schmalen Bildschirmen und mobil blendet es sich bewusst aus.

Kann ich tiefere Überschriften wie h4 ins Inhaltsverzeichnis aufnehmen?

Ja. Liste die gewünschten Tags in data-headings kommagetrennt auf (z. B. h2,h3,h4). Du bestimmst genau, welche Überschriftenebenen in der Liste erscheinen.

Fazit

ghost-toc-plugin ist Open Source unter der MIT-Lizenz; Code und Issues findest du auf GitHub. Probiere die Optionen im linken Panel aus, beobachte die Live-Vorschau und kopiere das Snippet, wenn es passt. Wenn es dir geholfen hat, freue ich mich über einen Kaffee ☕.