Add Members-Only Live Commenting to ghost Sites

Um FastComments korrekt in Ghost hinzuzufügen, müssen wir die Theme-Dateien bearbeiten.

Beginnen wir damit, Ihr vorhandenes oder gewünschtes Theme herunterzuladen.

Navigieren Sie zum Dashboard Ihrer Website und klicken Sie auf das Zahnrad unten links:

Einstellungen öffnen

Wählen Sie nun die Option Design:

Design auswählen

Obwohl wir das Theme technisch nicht ändern, klicken Sie unten links auf Change Theme:

Theme ändern

Wählen Sie oben rechts Advanced:

Erweitert auswählen

...und laden Sie dann Ihr aktuelles oder gewünschtes Theme herunter:

Theme herunterladen

Nachdem wir die ZIP-Datei heruntergeladen haben, entpacken Sie sie in einen Ordner. Ich habe die Standarddatei casper.zip heruntergeladen und unter Downloads\casper unter Windows entpackt.

Als Nächstes sollten Sie sicherstellen, dass Sie die LTS- oder eine neuere Version von NodeJS installiert haben. Diese erhalten Sie hier: https://nodejs.org/en/download/

Sobald NodeJS installiert ist, sollten Sie einen Code-Editor installieren.

Wir empfehlen (und verwenden) Webstorm, das Sie hier mit einer 30-tägigen Testversion (keine Kreditkarte erforderlich) erhalten: https://www.jetbrains.com/webstorm/

Die nächstbeste kostenlose Alternative wäre wahrscheinlich Visual Studio Code: https://code.visualstudio.com/download

Sobald Ihr Editor eingerichtet ist und der Theme-Ordner im Editor geöffnet ist, öffnen Sie das Terminal in der IDE und führen Sie aus:

Theme installieren

Copy

1

2npm install

3

Erfolgreiche Ausgabe sieht folgendermaßen aus (Warnungen können ignoriert werden):

Erfolgreiche npm install-Ausgabe

Dies richtet die Abhängigkeiten des Themes für spätere Befehle ein, die wir ausführen werden. Außerdem hängt der Export davon ab, dass die Abhängigkeiten des Themes installiert sind; andernfalls funktioniert der Re-Import nicht korrekt.

Jetzt, da wir das Theme in unserem Editor geöffnet haben, öffnen Sie package.json und ändern Sie das Feld name in etwas anderes. In unserem Fall hängen wir einfach -fastcomments an das Ende:

Theme umbenennen

Wenn Sie eine IDE verwenden, speichert sie die Änderung automatisch, nachdem Sie diese vorgenommen haben.

Jetzt öffnen wir die Vorlage, die für unsere Blogartikel verwendet wird. Sie heißt post.hbs:

Öffne post.hbs

Als Nächstes müssen wir ermitteln, wo der FastComments.com-Widget-Code hinzugefügt werden soll.

Wenn Sie das Standard-Theme casper verwenden, sehen Sie an Zeile 82 einen Abschnitt wie diesen:

Deaktivierter Kommentarbereich

Wenn Sie andere Themes verwenden, werden Sie dies nicht sehen und müssen diesen Code nach dem letzten </section> hinzufügen:

Beispiel für Abschnitt

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

Sie sollten etwas Ähnliches bereit haben:

Vorlage bereit für Kommentar-Code

Sobald alles bereit ist, kopieren Sie den FastComments.com-Widget-Code:

Ghost FastComments.com Kommentar-Code-Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let simpleSSO = null;

7

8 {{#if access}}

9 {{#if @member}}

10 simpleSSO = {

11 id: '{{ @member.uuid }}',

12 email: '{{@member.email}}',

13 username: '{{@member.name}}',

14 avatar: '{{ @member.avatar_image }}',

15 optedInNotifications: true,

16 optedInSubscriptionNotifications: true,

17 displayLabel: '{{@member.labels}}'

18 }

19 {{/if}}

20 {{/if}}

21

22 FastCommentsUI(document.getElementById('fastcomments-widget'), {

23 tenantId: "demo",

24 urlId: window.location.pathname,

25 allowAnon: false,

26 simpleSSO: simpleSSO

27 });

28 })();

29</script>

30

...und es sollte so aussehen:

FastComments.com-Kommentar-Code hinzufügen

Die Codierung ist abgeschlossen. Jetzt müssen wir nur noch unser Theme neu importieren!

Jetzt müssen wir die Theme-Dateien wieder in eine ZIP-Datei verpacken. Verwenden Sie dafür die in Ghost integrierten Funktionen.

Öffnen Sie erneut das Terminal Ihres Editors und führen Sie npm run zip aus.

Exportieren Sie Ihr Theme

Dies verpackt das Theme in eine ZIP-Datei unter dist/casper-fastcomments.zip (falls Sie das Theme in Step Three so benannt haben).

Zurück im Ghost-Dashboard laden wir jetzt unser Theme hoch:

Lade dein Theme hoch

Bei mir liegt die ZIP-Datei an folgendem Ort. Beachte den Ordner dist:

ZIP zum Hochladen auswählen

Denke daran, dein neu hochgeladenes Theme zu aktivieren (Ghost sollte dich dazu auffordern).

Jetzt sollten wir FastComments Live Commenting für unsere Mitglieder aktiviert haben!

Erfolg!

Herzlichen Glückwunsch zur Einrichtung von FastComments mit Ghost! Wenn Sie auf einen Domain Error gestoßen sind, oder erfahren möchten, wie Sie den Kommentarbereich anpassen können, lesen Sie weiter!

FastComments wurde so entwickelt, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Stile hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Dokumentation zu Anpassungen und Konfiguration an, um zu erfahren, wie.