Add Members-Only Live Commenting to ghost Sites

Aby poprawnie dodać FastComments do Ghost, musimy edytować pliki motywu.

Zacznijmy więc od pobrania istniejącego lub wybranego motywu.

Przejdź do panelu administracyjnego swojej witryny i kliknij ikonę koła zębatego w lewym dolnym rogu:

Otwórz ustawienia

Następnie wybierz opcję Design:

Wybierz Design

Chociaż technicznie nie zmieniamy motywu, kliknij Change Theme w lewym dolnym rogu:

Zmień motyw

W prawym górnym rogu wybierz Advanced:

Wybierz Zaawansowane

...a następnie pobierz bieżący lub wybrany motyw:

Pobierz motyw

Teraz, gdy pobraliśmy plik zip, rozpakuj go do folderu. Pobrałem domyślny casper.zip i rozpakowałem go do Downloads\casper na systemie Windows.

Następnie upewnij się, że masz zainstalowaną wersję LTS lub nowszą NodeJS. Możesz ją pobrać tutaj: https://nodejs.org/en/download/

Po zainstalowaniu NodeJS zainstaluj edytor kodu.

Polecamy (i używamy) Webstorm, który możesz pobrać tutaj z 30-dniową wersją próbną (nie jest potrzebna karta kredytowa): https://www.jetbrains.com/webstorm/

Kolejną najlepszą darmową opcją prawdopodobnie jest Visual Studio Code: https://code.visualstudio.com/download

Gdy skonfigurujesz edytor i otworzysz folder motywu w edytorze, otwórz terminal w IDE i uruchom:

Zainstaluj motyw

Copy

1

2npm install

3

Pomyślny wynik będzie wyglądać tak (możesz zignorować ostrzeżenia):

Pomyślny wynik npm install

To skonfiguruje zależności motywu dla poleceń, które uruchomimy później. Eksport zależy również od zainstalowania zależności motywu; w przeciwnym razie ponowny import nie będzie działać prawidłowo.

Teraz, gdy mamy motyw otwarty w edytorze, otwórz package.json i zmień pole name na coś innego. W naszym przypadku po prostu dodajemy -fastcomments na końcu:

Zmień nazwę motywu

Jeśli używasz IDE, plik zostanie automatycznie zapisany po wprowadzeniu tej zmiany.

Teraz otworzymy szablon używany w naszych wpisach na blogu. Nazywa się post.hbs:

Otwórz post.hbs

Następnie musimy określić, gdzie dodać kod widżetu FastComments.com.

Jeśli używasz domyślnego motywu casper, zobaczysz sekcję podobną do tej w linii 82:

Wyłączona sekcja komentarzy

Jeśli używasz innego motywu, nie zobaczysz tego i będziesz musiał dodać ten kod po ostatnim </section>:

Przykład sekcji

Copy

1

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

3</section>

4

Powinieneś mieć coś takiego gotowe:

Szablon gotowy na kod komentarzy

Gdy będziesz gotowy, skopiuj kod widżetu FastComments.com:

Fragment kodu komentarzy FastComments.com dla Ghost

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

...i powinno to wyglądać tak:

Dodaj kod komentarzy FastComments.com

Kodowanie zakończone. Teraz trzeba tylko ponownie zaimportować nasz motyw!

Teraz musimy spakować pliki motywu z powrotem do pliku zip. Aby to zrobić, użyj wbudowanych funkcji w Ghost.

Otwórz ponownie terminal swojego edytora i uruchom npm run zip.

Eksportuj motyw

This will package the theme into a zip file in dist/casper-fastcomments.zip (if that is what you've named the theme in Step Three).

W panelu Ghost wgrajmy nasz motyw:

Wgraj swój motyw

W moim przypadku plik ZIP znajduje się w następującej lokalizacji. Zwróć uwagę na folder dist:

Wybierz plik ZIP do wgrania

Pamiętaj, aby aktywować właśnie wgrany motyw (Ghost powinien o to poprosić).

Teraz powinniśmy mieć włączone komentowanie na żywo FastComments dla naszych członków!

Sukces!

Gratulacje z powodu skonfigurowania FastComments z Ghost! Jeśli napotkałeś błąd domeny (Domain Error), lub chcesz dowiedzieć się, jak dostosować obszar komentarzy, czytaj dalej!

FastComments został zaprojektowany tak, aby można go było dostosować do Twojej witryny.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Sprawdź naszą dokumentację dotyczącą dostosowywania, aby dowiedzieć się jak.