Add Members-Only Live Commenting to ghost Sites

Da bismo pravilno dodali FastComments u Ghost, moramo urediti datoteke teme.

Zato počnimo preuzimanjem vaše postojeće ili željene teme.

Idite na nadzornu ploču vaše stranice i kliknite zupčanik u donjem lijevom kutu:

Otvorite Postavke

Zatim odaberite opciju Design:

Odaberite Dizajn

Iako tehnički ne mijenjamo temu, kliknite Change Theme u donjem lijevom kutu:

Promijenite Temu

U gornjem desnom kutu odaberite Advanced:

Odaberite Napredno

...i zatim preuzmite svoju trenutnu ili željenu temu:

Preuzmite Temu

Sada kad smo preuzeli zip datoteku, raspakirajte je u mapu. Preuzeo sam zadani casper.zip i raspakirao ga u Downloads\casper na Windowsu.

Sljedeće, trebate provjeriti imate li instaliranu LTS ili noviju verziju NodeJS-a. Možete je preuzeti ovdje: https://nodejs.org/en/download/

Kad je NodeJS instaliran, trebate instalirati uređivač koda.

Preporučujemo (i koristimo) Webstorm, kojeg možete nabaviti ovdje s 30‑dnevnom probom (nije potrebna kreditna kartica): https://www.jetbrains.com/webstorm/

Sljedeća najbolja besplatna opcija vjerojatno je Visual Studio Code: https://code.visualstudio.com/download

Kad imate postavljen uređivač i otvoreni folder teme u uređivaču, otvorite terminal u IDE‑u i pokrenite:

Instalirajte temu

Copy

1

2npm install

3

Uspješan ispis izgledat će ovako (možete ignorirati upozorenja):

Uspješan izlaz naredbe npm install

Ovo će postaviti ovisnosti teme za kasnije naredbe koje ćemo pokrenuti. Također, izvoz ovisi o tome da su ovisnosti teme instalirane; u protivnom ponovni uvoz neće pravilno funkcionirati.

Sad kad imamo temu otvorenu u našem uređivaču, otvorite package.json i promijenite polje name u nešto drugo. U našem slučaju samo dodamo -fastcomments na kraj:

Preimenuj temu

Ako koristite IDE, on će automatski spremiti nakon što napravite ovu promjenu.

Sada ćemo otvoriti predložak koji se koristi za naše blog članke. Zove se post.hbs:

Otvori post.hbs

Sljedeće trebamo identificirati gdje dodati kôd widgeta FastComments.com.

Ako koristite zadanu temu casper, vidjet ćete odjeljak poput ovog na liniji 82:

Onemogućen odjeljak komentara

Ako koristite druge teme, ovo nećete vidjeti i trebat ćete dodati ovaj kôd nakon posljednjeg </section>:

Primjer odjeljka

Copy

1

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

3</section>

4

Trebali biste imati nešto ovako spremno:

Predložak spreman za kôd komentara

Kada ste spremni, kopirajte kôd widgeta FastComments.com:

Ghost isječak koda komentara FastComments.com

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 trebalo bi izgledati ovako:

Dodajte kôd komentara FastComments.com

Kodiranje završeno. Sada samo trebamo ponovno uvesti našu temu!

Sada trebamo spakirati datoteke teme natrag u ZIP datoteku. Za to upotrijebite ugrađene značajke u Ghostu.

Open your editor's terminal again and run npm run zip.

Izvezite svoju temu

Ovo će spakirati temu u ZIP datoteku u dist/casper-fastcomments.zip (ako ste temu tako nazvali u Step Three).

Natrag na Ghost nadzornoj ploči, učitajmo našu temu:

Učitajte svoju temu

Za mene, zip datoteka se nalazi na sljedećoj lokaciji. Obratite pozornost na dist mapu:

Odaberite ZIP za učitavanje

Ne zaboravite aktivirati upravo učitanu temu (Ghost bi vas trebao pitati).

Sada bismo trebali imati FastComments Live Commenting omogućen za naše članove!

Uspjeh!

Čestitamo na postavljanju FastComments s Ghostom! Ako ste naišli na Domain Error, ili želite saznati kako prilagoditi područje komentara, nastavite čitati!

FastComments je dizajniran da se prilagodi vašoj stranici.

Ako želite dodati prilagođeni stil ili podesiti konfiguraciju, Pogledajte našu dokumentaciju o prilagodbi da biste saznali kako.