Add Members-Only Live Commenting to ghost Sites

Da pravilno dodate FastComments v Ghost, moramo urediti datoteke teme.

Torej začnimo s prenosom vaše obstoječe ali želene teme.

Pojdite na nadzorno ploščo vaše strani in kliknite ikono zobnika v spodnjem levem kotu:

Odprite nastavitve

Nato izberite možnost Design:

Izberite Design

Čeprav tehnično ne spreminjamo teme, kliknite Change Theme v spodnjem levem kotu:

Spremenite temo

V zgornjem desnem kotu izberite Advanced:

Izberite Advanced

...in nato prenesite svojo trenutno ali želeno temo:

Prenesite temo

Zdaj ko smo prenesli zip datoteko, jo razširite v mapo. Jaz sem prenesel privzeto casper.zip in jo razpakiral v Downloads\casper na Windows.

Nato se prepričajte, da imate nameščeno LTS ali novejšo različico NodeJS. Prenesete jo tukaj: https://nodejs.org/en/download/

Ko je NodeJS nameščen, boste želeli namestiti urejevalnik kode.

Priporočamo (in uporabljamo) Webstorm, ki ga lahko dobite tukaj z 30-dnevno preizkusno različico (ni potrebna kreditna kartica): https://www.jetbrains.com/webstorm/

Naslednja najboljša brezplačna možnost je verjetno Visual Studio Code: https://code.visualstudio.com/download

Ko imate urejevalnik nastavljen in odprto mapo teme v urejevalniku, odprite terminal v IDE in zaženite:

Namestite temo

Copy

1

2npm install

3

Uspešen izhod bo izgledal tako (opozorila lahko prezrete):

Uspešen izpis npm install

To bo nastavilo odvisnosti teme za kasnejše ukaze, ki jih bomo izvedli. Prav tako izvoz temelji na tem, da so odvisnosti teme nameščene, sicer ponovni uvoz ne bo pravilno deloval.

Ko imamo temo odprto v našem urejevalniku, odprite package.json in spremenite polje name v nekaj drugega. V našem primeru smo na konec preprosto dodali -fastcomments:

Preimenujte temo

Če uporabljate IDE, bo po tej spremembi datoteka samodejno shranjena.

Zdaj bomo odprli predlogo, ki se uporablja za naše objave na blogu. Imenuje se post.hbs:

Odpri post.hbs

Naslednje moramo ugotoviti, kam dodati kodo pripomočka FastComments.com.

Če uporabljate privzeto temo casper, boste na vrstici 82 videli razdelek, kot je ta:

Onemogočen razdelek komentarjev

Če uporabljate druge teme, tega ne boste videli in boste morali to kodo dodati za zadnjim </section>:

Primer razdelka

Copy

1

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

3</section>

4

Mali pripomoček bi moral biti pripravljen tako:

Predloga pripravljena za kodo komentarjev

Ko je pripravljeno, kopirajte kodo pripomočka FastComments.com:

Vstavek kode komentarja FastComments.com za 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

...in izgledalo bi takole:

Dodaj kodo komentarjev FastComments.com

Koda je pripravljena. Zdaj moramo le ponovno uvoziti temo!

Zdaj moramo datoteke teme znova zapakirati v zip datoteko. Za to uporabite vgrajene funkcije v Ghostu.

Odprite terminal urejevalnika znova in zaženite npm run zip.

Izvozi temo

To bo temo zapakiralo v zip datoteko v dist/casper-fastcomments.zip (če ste temo tako poimenovali v Step Three).

Vrnimo se na Ghost nadzorno ploščo in naložimo našo temo:

Naložite svojo temo

Pri meni je zip datoteka na naslednji lokaciji. Upoštevajte mapo dist:

Izberite zip za nalaganje

Ne pozabite aktivirati pravkar naložene teme (Ghost vas bo o tem vprašal).

Zdaj bi morali imeti za naše člane omogočen FastComments Live Commenting!

Uspešno!

Čestitamo za nastavitev FastComments z Ghost! Če ste naleteli na Domain Error, ali želite izvedeti, kako prilagoditi območje komentarjev, preberite naprej!

FastComments je zasnovan tako, da ga lahko prilagodite svojemu spletnemu mestu.

Če želite dodati prilagojeno oblikovanje ali prilagoditi konfiguracijo, si oglejte našo dokumentacijo o prilagajanju in konfiguraciji, da izveste, kako.