web-dev-qa-db-fra.com

Comment utiliser les commentaires disqus dans le blog des pages github (Markdown)?

Est-il possible d'intégrer des commentaires html disqus dans un blog en utilisant des pages github? J'aime l'idée d'utiliser github, jekyll et markdown pour gérer mon site et mon blog pour plus de simplicité. Cependant, je voudrais inclure la capacité de commentaires Disqus. Cependant, puisque le démarquage génère le html - comment puis-je inclure le code html/js pour les disqus?

jekyllgithub-pagesdisqus
57
Jon

La façon la plus simple et la plus propre de le faire est de créer un partiel avec le code HTML fourni par votre _includes/ dossier (par exemple _includes/disqus.html), puis en l'incluant simplement dans le fichier de mise en page de vos articles (par exemple, _layouts/post.md):

{% include disqus.html %}

Vous pouvez voir un exemple ici: mise en page du post et disqus partial .

78
andersonvom

Il existe un moyen "officiel" d'accomplir cette tâche. Vous pouvez trouver l'indication Disqus sur le lien this .

En détails, la procédure est la suivante:

Ajoutez une variable appelée comments à la YAML Front Matter (c'est-à-dire l'en-tête de votre fichier de publication) et définissez sa valeur sur true. Un exemple de sujet pourrait ressembler à ceci:

layout: default
comments: true
# other options

Créez un nouveau fichier de modèle (c'est-à-dire disqus.html) et y mettre le niversal Embed Code , entre un % if page.comments % et un % endif %

Inclure le disqus.html fichier dans votre modèle de publication.

J'espère que cela aide :)

11
riccardo.cardin

Incluez le commentaire Disqus dans votre post.html, et définissez un identifiant pour le lien du nombre de commentaires:

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<your-disqus-name>'; 
    var disqus_identifier = '{{ page.id }}'; 
...
</script>

Dans ton default.html le modèle inclut le script de décompte des commentaires:

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<your-disqus-name>';
...
</script>

Ajoutez ensuite le lien vers les commentaires à l'aide du data-disqus-identifier attribut, afin que le nombre de commentaires apparaisse après chaque publication dans la page principale de votre blog:

<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>
4
helderdarocha

Pour résumer:

  1. Utilisez le troisième service de commentaires Disqus, créez-en un sur son compte
  2. Associez votre site, c'est-à-dire votre site github, à des disqus
  3. Obtenir le nom abrégé de Disqus dans admin/settings/general/
  4. Modifiez votre _config.yml de github, assurez-vous qu'il contient le contenu suivant:
disqus:
    shortname: <your disqus short name>

  1. Assurez-vous qu'il y a disqus.html en dessous de _includes et ça ressemble à:

    {% if page.comments %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus.shortname }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();    
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div> 
{% endif %}

    1. Comprendre disqus.html dans _layouts/post.html

    2. Pour activer le commentaire, ajoutez comments:true sur le sujet de votre post yaml. Désactivez-le en définissant comments: false ou en n'incluant pas du tout l'option de commentaires.

2
frank

Ouvrez config.yml et ajoutez la ligne de code suivante disqus_shortname: username. Remplacez username par votre nom abrégé Disqus.

Créez un fichier appelé disqus_comments.html dans Jekyll's _includes et ajoutez votre code d'intégration universel Disqus entre un {% if page.comments %} et un {% endif %} étiquette liquide

{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
  var disqus_shortname  = '{{ site.disqus_shortname }}';
  var disqus_identifier = '{{ page.url }}';

  (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}{% endraw %}

Vous ajoutez simplement comments: false dans tous les articles avant-propos pour désactiver les commentaires de cet article.

Enfin, ouvrez votre fichier post.html et ajoutez la balise include liquide suivante juste après la fin </article> tag.

{% if site.disqus_shortname %}
  {% include disqus_comments.html %}
{% endif %}

Vous pouvez suivre mon article de blog détaillé sur la façon de ajouter des commentaires Disqus à Jekyll si vous êtes coincé.

1
Colin

C'est vrai que Jekyll restituera le HTML à partir de vos fichiers Markdown (en utilisant localement Jekyll ou à distance en poussant vers gh-pages). Cependant, cela n'a pas vraiment d'importance car ce type de code doit être dans une couche, donc pas dans le fichier source Markdown.

_layouts
    `- default.html
    `- post.html <- `layout: default` in the YAML header
_posts
    `- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header

En suivant cette arborescence, vous pourrez rendre vos fichiers Markdown en utilisant votre disposition post, qui peut contenir votre script Disqus.

0
aymericbeaumet