ghost-giscus-plugin Vorschau

Standardmäßig hat dieses Plugin die Kommentare auf dieser Seite direkt nach dem Artikeltext platziert. Ändere Platzierung, Abstand und ob es einen Kommentarbereich für Abonnenten gibt im linken Panel, und die echten Kommentare bewegen sich entsprechend mit.

Einführung

giscus hängt Kommentare in jedes Element der Seite ein, das die giscus-Klasse trägt. Dieses Plugin erstellt dieses Element nur an der gewünschten Stelle. Die Kommentare selbst werden weiterhin von giscus bereitgestellt und in GitHub Discussions gespeichert, es wird also nichts neu implementiert.

Installation

Füge in Ghost die beiden Skripte unten unter Einstellungen, Code-Injection, Site-Footer ein. Das erste ist dieses Plugin, das zweite ist das offizielle giscus-Tag.

<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
        data-target=".gh-content"
        data-place="after"
        data-class="gh-comments gh-canvas"
        data-padding-bottom="48"></script>

<script src="https://giscus.app/client.js"
        data-repo="[YOUR REPO]"
        data-repo-id="[REPO ID]"
        data-category="[CATEGORY]"
        data-category-id="[CATEGORY ID]"
        data-mapping="pathname"
        data-theme="preferred_color_scheme"
        crossorigin="anonymous"
        async></script>

Die Reihenfolge zählt

Dieses Plugin muss vor dem giscus-Skript stehen. giscus entscheidet im Moment der Ausführung, wo es einhängt, indem es nach einem giscus-Element sucht, also muss unser Skript diese Stelle zuerst erstellen. Kehrt man die Reihenfolge um, landen die Kommentare beim Skript-Tag.

Optionen

Alles wird über Optionen am Script-Tag gesetzt: an welchem Element verankert wird (data-target), wo um es herum angehängt wird (data-place, eines von replace, append, prepend, before, after), die Klasse oder Klassen, die dem Mount-Wrapper hinzugefügt werden (data-class, durch Leerzeichen getrennt, sodass du mehrere angeben und das Styling deines Themes erben kannst), und die vier Seiten des Abstands (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left, in px). Wird das Zielelement nicht gefunden, entfernt eine Seiten-Schutzfunktion das giscus-Skript, damit die Kommentare nicht an der falschen Stelle landen; abschalten lässt sie sich mit data-guard="false".

data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"

Eine Stelle wählen

Zwei Formen decken die meisten Fälle ab: die Kommentare direkt nach dem Artikel platzieren oder einen vorhandenen Kommentarblock ersetzen. Beide werden unten nacheinander durchgegangen.

Nach dem Artikel platzieren

Die empfohlene Vorgabe ist data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48". Sie erstellt den Mount-Punkt direkt nach dem Artikeltext (.gh-content) und erbt die Theme-Klassen gh-comments gh-canvas, sodass Abstand und Breite nativ wirken. Das ist die sicherste Wahl, weil der Artikeltext auf jeder Seite immer vorhanden ist. Anders als ein nur Mitgliedern vorbehaltener Kommentarbereich, der ausgeblendet sein kann, verschwindet das Ziel nie, also verhält es sich überall gleich.

<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
        data-target=".gh-content"
        data-place="after"
        data-class="gh-comments gh-canvas"
        data-padding-bottom="48"></script>

Einen vorhandenen Kommentarblock ersetzen

Hat dein Theme bereits einen Kommentarblock, nutze dessen Stelle mit data-target=".gh-comments" data-place="replace" wieder. Das reproduziert <div class="gh-comments gh-canvas giscus"></div> allein per code injection, ohne das Theme zu bearbeiten, sodass du Position und Styling erbst, die das Theme bereits festgelegt hat. Greif dazu, wenn ein passender Block existiert. Der Vorbehalt: Ghosts native Kommentare sind nur für Mitglieder, auf Seiten, die sie deaktivieren, kann das Element .gh-comments also gar nicht existieren. Nutze in dem Fall die obige Vorgabe, die nach dem Artikel platziert.

<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
        data-target=".gh-comments"
        data-place="replace"></script>

giscus-Einrichtung

Der Repository-Link, die Kategorie und die repo-id stammen von der offiziellen giscus-Seite. Gib dort dein Repository ein, und es erstellt das giscus-Tag zum Einfügen.

Auf giscus.app konfigurieren →

Häufige Fragen

Die Kommentare erscheinen beim Skript-Tag, nicht dort, wo ich sie haben will.

Dein Plugin-Skript steht nach dem giscus-Skript. Vertausche sie, damit dieses Plugin zuerst kommt.

Ich möchte Kommentare nur auf bestimmten Seiten.

Richte den Anker auf ein Element, das nur auf diesen Seiten existiert. Wenn der Selektor auf nichts passt, tut das Plugin nichts, also hält ein nur bei Beiträgen vorhandenes data-target-Element die Kommentare auf den Beiträgen.

Ich möchte den Kommentarabstand meines Themes.

Steht die Regel im Stylesheet deines Themes, füge ihre Klasse mit data-class hinzu, um sie zu erben; andernfalls setze den Wert direkt mit data-padding-bottom.

Fazit

Es ist ein schlankes Werkzeug, das das offizielle giscus unangetastet lässt und es nur für dich platziert. Eine Zeile und die richtige Reihenfolge, und es verhält sich auf jeder Seite gleich.