Aggiungere commenti (Disqus) su Jekyll
Continuando con le piccole (e semplici) ottimizzazioni ho aggiunto la possibilità di inserire commenti ai post.
Ho scelto di affidarmi a un software di terzi come Disqus perché è molto semplice da utilizzare e mi sembra anche molto diffuso. Ho valutato anche altre opzioni, ad esempio di utilizzare i commenti di github o plugin già pronti, ma stavolta ho preferito non complicarmi la vita.
Per inserire Disqus al mio blog Jekyll è stato necessario prima di tutto creare un nuovo account Disqus dal sito. Una volta creato l’account e inserito il nome del sito al quale aggiungere i commenti, si può seguire la guida fornita dalla stessa Disqus sui passi necessari.
Qui userò una procedura leggermente diversa ma alla fine fa la stessa cosa: aggiungere l’Universal Code nel file di layout dei post e abilitarne l’utilizzo.
- aggiungere la definizione dello shortname di Disqus nel file _config.yml:
# Disqus Comments
disqus:
# Leave shortname blank to disable comments site-wide.
# Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
shortname: cicciofritz
- abilitare i commenti nel FrontMatter del file post.html e includere il codice relativo ai commenti subito dopo la chiusura del tag article:
---
layout: default
comments: true
---
<article>
...
</article>
{%- if site.disqus.shortname -%}
{%- include disqus_comments.html -%}
{%- endif -%}
- creare un nuovo file chiamato disqus_comments.html nella cartella _includes e copiare al suo interno l’Universal Code di Disqus:
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = 'https://cicciofritz.it/jekyll/update/2019/06/30/comments.html';
this.page.identifier = 'https://cicciofritz.it/jekyll/update/2019/06/30/comments.html';
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://shortname.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
La porzione di codice sotto DON’T EDIT blabla deve essere copiata dal proprio account Disqus. Da notare che è stata inserita tra dei tag if-endif, questo permette di abilitare i commenti per il post direttamente dal FrontMatter (vedi il secondo passo).
Con questa configurazione, i commenti sono abilitati di default su tutti i post, ma possono essere disabilitati per post specifici. In questo modo è molto semplice adattare i commenti anche alle pagine del blog e non solo ai post.