Add Members-Only Live Commenting to ghost Sites

Per aggiungere correttamente FastComments a Ghost, dobbiamo modificare i file del tema.

Iniziamo scaricando il tema esistente oppure quello desiderato.

Vai alla dashboard del sito e clicca l'icona dell'ingranaggio in basso a sinistra:

Apri Impostazioni

Successivamente seleziona l'opzione Design:

Seleziona Design

Anche se tecnicamente non stiamo cambiando il tema, clicca Change Theme in basso a sinistra:

Cambia Tema

In alto a destra seleziona Advanced:

Seleziona Advanced

...e poi scarica il tema attuale o quello desiderato:

Scarica Tema

Ora che abbiamo scaricato il file zip, estrailo in una cartella. Ho scaricato il predefinito casper.zip ed estratto in Downloads\casper su Windows.

Successivamente, assicurati di avere installata la versione LTS o più recente di NodeJS. Puoi scaricarla qui: https://nodejs.org/en/download/

Una volta installato NodeJS, installa un editor di codice.

Raccomandiamo (e utilizziamo) WebStorm, che puoi ottenere qui con una prova di 30 giorni (non è richiesta la carta di credito): https://www.jetbrains.com/webstorm/

La migliore alternativa gratuita successiva è probabilmente Visual Studio Code: https://code.visualstudio.com/download

Una volta impostato l'editor e aperta la cartella del tema nell'editor, apri il terminale nell'IDE ed esegui:

Installa il tema

Copy

1

2npm install

3

L'output risultante sarà simile a questo (puoi ignorare gli avvisi):

Output riuscito di npm install

Questo imposterà le dipendenze del tema per i comandi che eseguiremo in seguito. Inoltre, l'esportazione dipende dall'installazione delle dipendenze del tema; altrimenti la reimportazione non funzionerà correttamente.

Ora che abbiamo il tema aperto nel nostro editor, apri package.json e modifica il campo name con qualcos'altro. Nel nostro caso aggiungiamo semplicemente -fastcomments alla fine:

Rinomina il tema

Se stai usando un IDE, si salverà automaticamente dopo aver apportato questa modifica.

Ora apriremo il template che viene usato per i nostri articoli del blog. Si chiama post.hbs:

Apri post.hbs

Successivamente dobbiamo identificare dove aggiungere il codice del widget FastComments.com.

Se stai usando il tema predefinito casper, vedrai una sezione come questa alla riga 82:

Sezione commenti disabilitata

Se stai usando altri temi, non vedrai questo, e dovrai aggiungere questo codice dopo l'ultimo </section>:

Esempio di sezione

Copy

1

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

3</section>

4

Dovresti avere qualcosa del genere pronto:

Modello pronto per il codice dei commenti

Una volta pronto, copia il codice del widget FastComments.com:

Snippet di codice FastComments.com per 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

...e dovrebbe apparire così:

Aggiungi il codice dei commenti FastComments.com

Codifica completata. Ora dobbiamo solo reimportare il nostro tema!

Ora dobbiamo impacchettare i file del tema in un file zip. Per farlo, usa le funzionalità integrate in Ghost.

Apri di nuovo il terminale del tuo editor ed esegui npm run zip.

Esporta il tuo tema

Questo impacchetterà il tema in un file zip in dist/casper-fastcomments.zip (se è questo il nome che hai dato al tema in Step Three).

Tornando nella dashboard di Ghost, carichiamo il nostro tema:

Carica il tuo tema

Per me, ho il file zip nella seguente posizione. Nota la cartella dist:

Seleziona il file zip da caricare

Ricorda di attivare il tema appena caricato (Ghost dovrebbe chiedertelo).

Ora FastComments Live Commenting dovrebbe essere abilitato per i nostri membri!

Successo!

Congratulazioni per aver configurato FastComments con Ghost! Se hai riscontrato un errore di dominio, o vuoi imparare come personalizzare l'area dei commenti, continua a leggere!

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se vuoi aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra Documentazione sulle personalizzazioni per scoprire come.