diff options
| -rw-r--r-- | content/Informatique/2015-08-09-disqus.rst | 171 | ||||
| -rw-r--r-- | content/images/disqus/disqus_api.png | bin | 0 -> 56812 bytes | |||
| -rw-r--r-- | content/images/disqus/privacy.jpg | bin | 0 -> 12844 bytes | |||
| -rw-r--r-- | content/images/disqus/privacy_240.jpg | bin | 0 -> 23385 bytes |
4 files changed, 171 insertions, 0 deletions
diff --git a/content/Informatique/2015-08-09-disqus.rst b/content/Informatique/2015-08-09-disqus.rst new file mode 100644 index 0000000..ab898dd --- /dev/null +++ b/content/Informatique/2015-08-09-disqus.rst @@ -0,0 +1,171 @@ +.. -*- mode: rst -*- +.. -*- coding: utf-8 -*- + +============================== +Pelican, disqus, et vie privée +============================== + +:date: 2015-08-09 +:tags: Libre, blog, ViePrivée +:slug: pelican-disqus-vie-privee +:logo: /images/disqus/privacy.jpg +:summary: Comment configurer pelican pour utiliser les commentaires disqus, + sans que le service ne vienne systématiquement pister les + visiteurs… + +.. figure:: {filename}/images/disqus/privacy_240.jpg + :figwidth: 240 + :figclass: floatright + :alt: Privacy ! + + Image : `Frankielon`_ (creativecommons_) + +.. _Frankielon: https://www.flickr.com/photos/armydre2008/3865993401/ +.. _creativecommons: https://creativecommons.org/licenses/by/2.0/ + +Le moteur de blog statique propose nativement un plugin pour gérer les +commentaires avec disqus. Il permet de donner un peu de dynamisme au blog, qui +est entièrement statique… Sauf qu'il s'agit d'un service non libre, qui +enregistre les données des utilisateurs… + +Le plugin disqus_static_ permet d'intégrer à la page html les commentaires +trouvés sur le service disqus. Cela permet de les inclure nativement dans +l'article, et évite au lecteur du blog d'informer disqus de sa navigation sur +le site. Voici la manière dont je l'utilise sur le blog. + +.. _disqus_static: https://github.com/getpelican/pelican-plugins/tree/master/disqus_static + +.. admonition:: Attention ! + + Cette configuration est *moins pire* que celle proposée par défaut par le + blog, mais elle continue d'enregistrer l'ensemble des commentaires auprès + d'une entreprise privée. Mieux vaut, si vous en avez la possibilité, + basculer sur une solution hébergée comme isso_. + +.. _isso: http://posativ.org/isso/ + +Création du compte +================== + +En suivant la documentation du plugin, on enregistre notre application sur le +site de l'`api de disqus`_ : + +.. _api de disqus: https://disqus.com/api/applications/ + +.. image:: {filename}/images/disqus/disqus_api.png + :alt: Configuration du compte + +Le compte n'a besoin d'accéder aux commentaires qu'en mode lecture, penser +aussi à renseigner le nom de domaine utilisé par le blog dans les paramètres du +compte. + +Configuration du plugin +======================= + +Le compte et la clef seront renseignés dans un fichier à part, que nous allons +nommer `disqus.py`. Normalement, il devrait juste contenir ces lignes : + +.. code-block:: python + + #!/usr/bin/env python + # -*- coding: utf-8 -*- + + # Configuration des commentaires + DISQUS_SITENAME='Votre compte disqus' + DISQUS_SECRET_KEY = u'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + DISQUS_PUBLIC_KEY = u'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + + +Pour éviter de diffuser ce fichier sur un serveur git public, ne pas oublier de +l'ajouter au fichier .gitignore ! Ainsi, nous serons sûr que notre clef privée +ne sera jamais transmise sur internet… + +Dans le fichier `publish.conf`, nous allons ajouter le chargement du plugin : + +.. code-block:: python + + import sys + import os.path + try: + sys.path.append(os.path.dirname(os.path.abspath(__file__))) + from disqus import * + PLUGINS.append("disqus_static") + except: + pass + +Cela permet de génerer le blog, même si la configuration pour les commentaires +n'est pas présente. + +Utiliser le fichier `publish.conf` permet de générer le blog sans faire appel à +l'API pour éditer le blog, par contre, ceux-ci seront intégrés dès que l'on +lancera la commande `make publish` pour publier le blog. + +Changement du template +====================== + +Maintenant que tout est prêt, il ne reste plus qu'à modifier son template pour +éviter de charger disqus automatiquement. C'est dommage d'intégrer les +commentaires dans la page, si ceux chargés par disqus sont affichés +automatiquement… + +Sur mon blog, il faut cliquer sur le bouton pour recharger les commentaires (ou +pour en ajouter de nouveaux). C'est juste un peu de javascript, et vous pouvez +vous inspirer de ce bout de code : + +.. code-block:: html + + {% if DISQUS_SITENAME %} + + <div class="comments"> + <h2>Commentaires :</h2> + <div id="disqus_thread"> + {% if article.disqus_comments %} + <ul class="post-list"> + {% for comment in article.disqus_comments recursive %} + <li class="post"> + <div class="post-content"> + <div class="avatar hovercard"> + <img alt="Avatar" src="{{ comment.author.avatar.small.cache }}"> + </div> + <div class="post-body"> + <header> + <span class="publisher-anchor-color">{{ comment.author.name }}</span> + <span class="time-ago" title="{{ comment.createdAt }}">{{ comment.createdAt }}</span> + </header> + <div class="post-message-container"> + <div class="post-message publisher-anchor-color "> + {{ comment.message }} + </div> + </div> + </div> + </div> + {% if comment.children %} + <ul class="children"> + {{ loop(comment.children) }} + </ul> + {% endif %} + </li> + {% endfor %} + </ul> + {% else %} + Aucun commentaire pour l'instant. + {% endif %} + </div> + </div> + <div id="disqus_comments"> + <button onclick="load_disqus()">recharger</button> + </div> + <script type="text/javascript"> + var disqus_identifier = "{{ article.url }}"; + function load_disqus() { + var dsq = document.createElement('script'); + dsq.type = 'text/javascript'; + dsq.async = true; + dsq.src = '//{{ DISQUS_SITENAME }}.disqus.com/embed.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + var load_button = document.getElementById('disqus_comments'); + load_button.parentNode.removeChild(load_button); + }; + </script> + {% endif %} + diff --git a/content/images/disqus/disqus_api.png b/content/images/disqus/disqus_api.png Binary files differnew file mode 100644 index 0000000..4939679 --- /dev/null +++ b/content/images/disqus/disqus_api.png diff --git a/content/images/disqus/privacy.jpg b/content/images/disqus/privacy.jpg Binary files differnew file mode 100644 index 0000000..dcc1702 --- /dev/null +++ b/content/images/disqus/privacy.jpg diff --git a/content/images/disqus/privacy_240.jpg b/content/images/disqus/privacy_240.jpg Binary files differnew file mode 100644 index 0000000..0764df0 --- /dev/null +++ b/content/images/disqus/privacy_240.jpg |
