Une plateforme de commentaires pour Ghost

Une plateforme de commentaires pour Ghost
Photo by Drew Beamer / Unsplash

Ghost n'intègre pas la possibilité de commenter vos articles en natif.
Cependant, il est possible d'ajouter simplement cette possibilité en intégrant une plateforme de commentaires telle que Disqus (ou autre). Cela passe par la modification du code.

Le code à modifier est différent selon les thèmes. Nous modifions ici le code pour le thème par défaut Casper, en suivant le guide officiel sur le site Ghost, et plus précisemment la page dédiée à Disqus.

Et pour la plateforme de commentaires, nous allons utiliser Disqus. La chance, c'est gratuit.

Ajout de votre site sur Disqus

Commencez par vous créer un compte sur disqus.com, puis ajoutez un site (Your sites / + New).

Pour le nom du site, utilisez quelque chose de pertinent, qui vous permettra de reconnaître ce site parmi les centaines que vous allez créer au cours de votre fructueuse carrière.

Notez le shortname (nom de votre site.disqus.com) qu'on utilisera plus bas

shortname

Vous devez ensuite choisir un plan. Ne vous laissez pas avoir, scrollez un peu pour choisir le Basic Plan gratuit, puis choisissez la plateforme Ghost, pour laquelle Disqus vous délivrera un code adapté à intégrer.

Disqus vous fournit alors des instructions pour ajouter ce code à votre site, mais nous ne les utiliserons pas !

Connexion de votre Ghost à Disqus

Côté Ghost, pour le thème par défaut Casper, le code à modifier pour les articles (ou posts) se trouve dans :

/var/lib/ghost/content/themes/casper/post.hbs

Entrez dans ce répertoire et faites une copie de secours du fichier que vous vous apprêtez à modifier :

# cd /var/lib/ghost/content/themes/casper
# cp post.hbs post.hbs.bak

Encore mieux, en une seule ligne :

cp /var/lib/ghost/content/themes/casper/post.hbs{,.bak}

NB : rendez cette modification persistante en montant le répertoire Casper dans un volume persistant

Editez ensuite le fichier post.hbs, et trouvez la zone où vous allez ajouter votre code provenant de Disqus. Les gars de chez Ghost sont sympa, ils l'ont repérée pour vous. Cherchez ce morceau de code vers le bas du fichier :

    {{!--
    <section class="article-comments gh-canvas">
        If you want to embed comments, this is a good place to paste your code!
    </section>
    --}}

Supprimez ces lignes :

  • les mises en remarques du bout de code {{!--et --}}
  • la phrase repère If you want to embed comments, this is a good place to paste your code!
  • vous ne gardez que les balises <section> et </section> entre lesquelles vous collez le code qu'on trouve dans le tutoriel dédié sur le site de Ghost :
    <section class="article-comments gh-canvas">
    
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = "{{url absolute="true"}}";
        this.page.identifier = "ghost-{{comment_id}}"
    };
    (function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://EXAMPLE.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>

    </section>

Dans ce code, remplacez EXAMPLE.disqus.com par le shortname obtenu plus haut :

    <section class="article-comments gh-canvas">
    
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = "{{url absolute="true"}}";
        this.page.identifier = "ghost-{{comment_id}}"
    };
    (function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://acme-com.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>

    </section>

Pour finir, relancer Ghost pour prendre en compte les modifications :

ghost restart

Pour ma part, Ghost est dans un conteneur exécuté en root (c'est mal), et Ghost refuse du coup d'exécuter cette commande. J'ai simplement redémarré le conteneur :

docker restart acme_ghost_prod

Comme vous pouvez le constater, les commentaires apparaissent.