Add Members-Only Live Commenting to ghost Sites

Pour ajouter FastComments à Ghost correctement, nous devons modifier les fichiers du thème.

Commençons donc par télécharger votre thème existant ou souhaité.

Accédez au tableau de bord de votre site et cliquez sur l'icône en forme de roue dentée en bas à gauche :

Ouvrir les paramètres

Ensuite, sélectionnez l'option Design :

Sélectionnez Design

Même si nous ne modifions pas techniquement le thème, cliquez sur Change Theme en bas à gauche :

Changer le thème

En haut à droite, sélectionnez Advanced :

Sélectionnez Advanced

...puis téléchargez votre thème actuel ou souhaité :

Télécharger le thème

Maintenant que nous avons téléchargé le fichier zip, extrayez-le dans un dossier. J'ai téléchargé le fichier casper.zip par défaut et l'ai extrait dans Downloads\casper sous Windows.

Next, you'll want to make sure you have the LTS or newer version of NodeJS installed. You can get that here: https://nodejs.org/en/download/

Once NodeJS is installed, you'll want to install a code editor.

We recommend (and use) Webstorm, which you can get here with a 30-day trial (no credit card needed): https://www.jetbrains.com/webstorm/

The next best free option would probably be Visual Studio Code: https://code.visualstudio.com/download

Once you have your editor setup, and the theme folder open in the editor, open the terminal in the IDE and run:

Installer le thème

Copy

1

2npm install

3

La sortie réussie ressemblera à ceci (vous pouvez ignorer les avertissements) :

Sortie réussie de npm install

Cela configurera les dépendances du thème pour les commandes que nous exécuterons ultérieurement. De plus, l'exportation dépend de l'installation des dépendances du thème ; sinon, la réimportation ne fonctionnera pas correctement.

Maintenant que nous avons le thème ouvert dans notre éditeur, ouvrez package.json et changez le champ name pour autre chose. Dans notre cas, nous ajoutons simplement -fastcomments à la fin :

Renommer le thème

Si vous utilisez un IDE, il s'enregistrera automatiquement après avoir effectué ce changement.

Nous allons maintenant ouvrir le modèle utilisé pour nos articles de blog. Il s'appelle post.hbs :

Ouvrir post.hbs

Ensuite, nous devons identifier l'endroit où ajouter le code du widget FastComments.com.

Si vous utilisez le thème par défaut casper, vous verrez une section comme celle-ci à la ligne 82 :

Section de commentaires désactivée

Si vous utilisez d'autres thèmes, vous ne verrez pas ceci, et devrez ajouter ce code après la dernière balise </section> :

Exemple de section

Copy

1

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

3</section>

4

Vous devriez avoir quelque chose comme ceci prêt :

Modèle prêt pour le code des commentaires

Une fois prêt, copiez le code du widget FastComments.com :

Extrait de code de commentaire FastComments.com pour 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

...et cela devrait ressembler à ceci :

Ajouter le code de commentaire FastComments.com

Le codage est terminé. Il ne nous reste plus qu'à réimporter notre thème !

Nous devons maintenant regrouper les fichiers du thème dans une archive zip. Pour ce faire, utilisez les fonctionnalités intégrées de Ghost.

Ouvrez à nouveau le terminal de votre éditeur et exécutez npm run zip.

Exporter votre thème

Cela va empaqueter le thème dans un fichier zip dans dist/casper-fastcomments.zip (si c'est ainsi que vous avez nommé le thème dans Étape Trois).

De retour dans le tableau de bord de Ghost, téléchargeons notre thème :

Télécharger votre thème

Pour ma part, j'ai le fichier zip à l'emplacement suivant. Remarquez le dossier dist :

Sélectionnez le fichier zip à importer

N'oubliez pas d'activer votre thème nouvellement importé (Ghost devrait vous le demander).

Nous devrions maintenant avoir FastComments Live Commenting activé pour nos membres !

Succès !

Félicitations pour la configuration de FastComments avec Ghost ! Si vous avez rencontré une Domain Error, ou si vous souhaitez apprendre à personnaliser la zone des commentaires, poursuivez votre lecture !

FastComments est conçu pour être personnalisé afin de s'adapter à votre site.

Si vous souhaitez ajouter un style personnalisé ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.