Dodaj komentarze na żywo tylko dla członków do stron Ghost

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 zidentyfikować miejsce, w którym należy dodać kod widżetu FastComments.com.

Jeśli używasz domyślnego motywu casper, zobaczysz sekcję taką jak ta w linii 82:

Wyłączona sekcja komentarzy

Jeśli używasz innych motywów, 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 komentarza FastComments.com dla Ghost

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.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 window.fcConfigs = [{

23 target: '#fastcomments-widget',

24 tenantId: "demo",

25 urlId: window.location.pathname,

26 allowAnon: false,

27 simpleSSO: simpleSSO

28 }];

29 })();

30</script>

31

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

Dodaj kod komentarzy FastComments.com

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

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

Otwórz ponownie terminal w edytorze i uruchom npm run zip.

Eksportuj swój motyw

Spowoduje to spakowanie motywu do pliku zip w dist/casper-fastcomments.zip (jeśli tak nazwałeś motyw w Kroku trzecim).

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.