Add Members-Only Live Commenting to ghost Sites

Da bismo pravilno dodali FastComments u Ghost, moramo izmeniti fajlove teme.

Dakle, počnimo tako što ćemo preuzeti vašu postojeću ili željenu temu.

Idite na kontrolnu tablu vašeg sajta i kliknite na ikonicu zupčanika u donjem levom uglu:

Otvori podešavanja

Zatim izaberite opciju Design:

Izaberite `Design`

Iako tehnički ne menjamo temu, kliknite na Change Theme u donjem levom uglu:

Promeni temu

U gornjem desnom uglu izaberite Advanced:

Izaberite `Advanced`

...a zatim preuzmite vašu trenutnu ili željenu temu:

Preuzmite temu

Sada kada smo preuzeli zip fajl, otpakujte ga u folder. Ja sam preuzeo podrazumevani casper.zip i otpakovao u Downloads\casper na Windows.

Zatim, treba da se uverite da imate instaliranu LTS ili noviju verziju NodeJS-a. Možete je preuzeti ovde: https://nodejs.org/en/download/

Kada je NodeJS instaliran, treba da instalirate uređivač koda.

Preporučujemo (i mi koristimo) Webstorm, koji možete nabaviti ovde uz probni period od 30 dana (nije potrebna kreditna kartica): https://www.jetbrains.com/webstorm/

Sledeća najbolja besplatna opcija verovatno bi bila Visual Studio Code: https://code.visualstudio.com/download

Kada imate podešen editor i otvoren folder teme u editoru, otvorite terminal u IDE-u i pokrenite:

Instalirajte temu

Copy

1

2npm install

3

Uspešan izlaz će izgledati ovako (možete ignorisati upozorenja):

Uspešan ispis komande npm install

Ovo će podesiti zavisnosti teme za naredne komande koje ćemo pokretati. Takođe, izvoz zavisi od toga da su zavisnosti teme instalirane, u suprotnom ponovni uvoz neće raditi ispravno.

Sada kada imamo temu otvorenu u našem editoru, otvorite package.json i promenite polje name u nešto drugo. U našem slučaju samo dodajemo -fastcomments na kraj:

Preimenujte temu

Ako koristite IDE, on će automatski sačuvati nakon što napravite ovu promenu.

Sada ćemo otvoriti šablon koji se koristi za naše blog članke. Naziva se post.hbs:

Otvori post.hbs

Sledeće treba da identifikujemo gde da dodamo FastComments.com widget kod.

Ako koristite podrazumevanu temu casper, videćete sekciju poput ove na liniji 82:

Onemogućena sekcija komentara

Ako koristite druge teme, ovo nećete videti, i moraćete da dodate ovaj kod nakon poslednjeg </section>:

Primer sekcije

Copy

1

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

3</section>

4

Treba da imate nešto ovako spremno:

Šablon spreman za kod komentara

Kada ste spremni, kopirajte FastComments.com kod widgeta:

Ghost FastComments.com isječak koda za komentare

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 da izgleda ovako:

Dodajte FastComments.com kod za komentare

Kodiranje gotovo. Sada samo treba ponovo da uvezemo našu temu!

Sada treba da spakujemo fajlove teme nazad u zip arhivu. Za to, koristite ugrađene funkcije u Ghost-u.

Ponovo otvorite terminal vašeg editora i pokrenite npm run zip.

Izvezite vašu temu

Ovo će upakovati temu u zip fajl u dist/casper-fastcomments.zip (ako ste tako imenovali temu u Step Three).

Vratimo se u Ghost kontrolnu tablu, hajde da otpremimo našu temu:

Otpremite svoju temu

Kod mene se zip fajl nalazi na sledećoj lokaciji. Obratite pažnju na dist folder:

Izaberite ZIP za otpremanje

Ne zaboravite da aktivirate upravo otpremljenu temu (Ghost bi vas trebao pitati).

Sada bi FastComments Live Commenting trebalo da bude omogućen za naše članove!

Uspešno!

Čestitamo na podešavanju FastComments sa Ghostom! Ako ste naišli na Domain Error, ili želite da saznate kako da prilagodite oblast za komentare, nastavite sa čitanjem!

FastComments je dizajniran da se prilagodi vašem sajtu.

Ako želite dodati prilagođeni stil, ili podesiti konfiguraciju, Pogledajte našu dokumentaciju za prilagođavanje da saznate kako.