Add Members-Only Live Commenting to ghost Sites

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

Commençons par télécharger votre thème actuel ou le thème souhaité.

Allez dans le tableau de bord de votre site et cliquez sur l'icône d'engrenage en bas à gauche :

Ouvrir les paramètres

Next select the Design option:

Sélectionnez l'option Design

While we're not technically changing the theme, click Change Theme in the bottom left:

Modifier le thème

In the top right select Advanced:

Sélectionnez `Advanced`

...and then download your current or ideal theme:

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 par défaut casper.zip et l'ai extrait dans Downloads\casper sous Windows.

Ensuite, assurez-vous d'avoir installé la version LTS ou une version plus récente de NodeJS. Vous pouvez la télécharger ici : https://nodejs.org/en/download/

Une fois NodeJS installé, installez un éditeur de code.

Nous recommandons (et utilisons) Webstorm, que vous pouvez obtenir ici avec un essai de 30 jours (aucune carte de crédit requise) : 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

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 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 enregistrera automatiquement après que vous ayez apporté 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 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 de 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 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 commentaires FastComments.com

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

Nous devons maintenant reconditionner les fichiers du thème dans un fichier 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 empaquetera le thème dans un fichier zip dans dist/casper-fastcomments.zip (si c'est ainsi que vous avez nommé le thème dans Step Three).

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

Téléverser votre thème

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

Sélectionner le zip à téléverser

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

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

Succès !

Félicitations pour avoir configuré FastComments avec Ghost ! Si vous avez rencontré une Domain Error, ou si vous souhaitez apprendre comment personnaliser la zone de commentaires, lisez la suite !

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

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