ghost-progress-plugin Vorschau

Scrolle und sieh zu, wie sich der Balken oben von 0% auf 100% füllt. Ändere Optionen im linken Panel, der Einbettungscode aktualisiert sich mit.

Einführung

ghost-progress-plugin ist ein winziger, abhängigkeitsfreier Lesefortschrittsbalken 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. Beim Lesen füllt sich ein dünner Balken und zeigt, wie weit du im Artikel bist. Diese Seite ist ein Live-Beispiel: Der Balken oben 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-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></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 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.

Optionen

Alles wird über data-*-Attribute am Script-Tag konfiguriert: der Inhalts-Selektor, die Position, die Dicke und der Z-Index:

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

Anpassung

Farbe und Dicke des Balkens sind anpassbar. Jede Klasse und CSS-Variable ist unter greedylabs-ghost-progress benannt, sodass er nie mit deinem Theme kollidiert.

Farben

Die Füllung folgt standardmäßig der Akzentfarbe deines Ghost-Themes (--ghost-accent-color); setze data-color oder überschreibe die CSS-Variablen, um sie zu ändern. Die ungelesene Spur ist standardmäßig transparent, gib ihr also eine Farbe, damit der Balken auch bei 0% sichtbar ist:

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

Position

Nutze data-position für oben oder unten und data-height für die Dicke in Pixeln. Der Balken erreicht 0%, wenn der obere Rand des Artikels den oberen Rand des Viewports erreicht, und 100%, wenn sein unterer Rand den unteren erreicht.

Häufige Fragen

Misst es die ganze Seite oder nur den Artikel?

Nur den Artikel, auf den data-content zeigt. Header, Beitragsbild und Footer zählen nicht zum Fortschritt.

Warum ist der Balken oben unsichtbar?

Bei 0% hat die Füllung keine Breite und die Spur ist standardmäßig transparent. Gib der Spur eine Farbe (siehe Farben), damit der Balken auch leer sichtbar ist.

Funktioniert es außerhalb von Ghost?

Ja. Überall, wo du ein Skript einbinden kannst, zeige mit data-content auf deinen Artikel-Container. Bei Notion ist das .notion-page-content.

Fazit

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