Ajouter les commentaires en direct réservés aux membres aux sites Ghost

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 je l'ai extrait dans Downloads\casper sous Windows.

Ensuite, vous devez vous assurer d'avoir installé la version LTS ou plus récente de NodeJS. Vous pouvez l'obtenir ici : https://nodejs.org/en/download/

Une fois NodeJS installé, vous devrez installer un éditeur de code.

Nous recommandons (et utilisons) Webstorm, que vous pouvez obtenir ici avec un essai de 30 jours (sans carte bancaire) : https://www.jetbrains.com/webstorm/

La meilleure option gratuite suivante serait probablement Visual Studio Code : https://code.visualstudio.com/download

Une fois votre éditeur configuré et le dossier du thème ouvert dans l'éditeur, ouvrez le terminal dans l'IDE et exécutez :

Installer le thème

Copy

1

2npm install

3

Une 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 plus tard. 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, il faut 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 cela, et devrez ajouter ce code après le dernier </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 de 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 async src="https://cdn.fastcomments.com/js/embed-v2-async.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 window.fcConfigs = [{

23 target: '#fastcomments-widget',

24 tenantId: "demo",

25 urlId: window.location.pathname,

26 allowAnon: false,

27 simpleSSO: simpleSSO

28 }];

29 })();

30</script>

31

...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.