Table des matières

Pour utiliser des commentaires dans ce blog statique, il faut utiliser un service externe. J’ai choisi Disqus.
Disqus est un service gratuit créé en 2007 et qui permet de centraliser la gestion des commentaires d’articles.

Prise en main

Afin de pouvoir intégrer Disqus à un votre blog, il faut ouvrir un compte disqus.
Pour vous inscrire, rendez-vous sur le site officiel.
Disqus est entièrement personnalisable, après avoir activé votre compte, vous pourrez le paramétrer en allant dans l’interface d’administration.

Intégration dans le blog Hugo

Je souhaitais :

  • mettre les commentaires dans le pied de page de l’article ;
  • annoncer les nombre de commentaires publiés dans l’en-tête ;
  • lister les derniers commentaires dans la « sidebar ».

Comment faire ?

Les fichiers à modifier se trouvent dans le répertoire /layouts/partials/ de votre thème.
Vous devez bien sûr remplacer (identifiant) par votre identifiant Disqus.

Le pied de page

Créer un fichier disqus.html.

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = PAGE_URL;  
this.page.identifier = PAGE_IDENTIFIER;
};
(function() { 
var d = document, s = d.createElement('script');
s.src = '//(identifiant).disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

Placer {{ partial “disqus.html” . }} dans le fichier article_footer.html. Désormais, les commentaires doivent apparaître dans le bas de l’article.

L’en-tête

Pour afficher les nombre de commentaires publiés, éditez le fichier article_header.html et ajoutez-y :

<a href="#disqus_thread"></a>
<script> 
//<![CDATA[ 
var get_disqus_num_replies = function() { 
        var links = document.getElementsByTagName('a'); 
        var query = '?'; 
        for(var i = 0; i < links.length; i++) { 
                if(links[i].href.indexOf('#disqus_thread') >= 0) { 
                        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; 
                } 
        }
        var s = document.createElement('script');
        s.type='text/javascript';
        s.src = '//(identifiant).disqus.com/get_num_replies.js' + query;
        var body = document.getElementsByTagName('body')[0];
        body.appendChild(s);
};
get_disqus_num_replies();
//]]> 
</script>

La « sidebar »

Pour afficher les derniers commentaires dans la barre latérale, éditez le fichier sidebar.html et ajoutez :

<script src="//(identifiant).disqus.com/recent_comments_widget.js?num_items=25&hide_avatars=0&avatar_size=40&excerpt_length=200"></script>

La variable num_items= détermine le nombre de commentaires à afficher.