How to use disqus comments on github pages (Markdown) blog?

Question

Is it possible to integrate disqus html comments on a blog using github pages? I like the idea of ​​using github, jekyll and markdown to manage my site and blog for simplicity. However, I would like to enable commenting on disqus. However, since markdown generates html - how do I enable html / js code for disqus?

Answer 1

The easiest and cleanest way to do this is to create a partial HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html ) and then just include it in the message layout file (e.g. _layouts/post.md )

 {% include disqus.html %} 

Here you can see an example: post layout and disqus partial .

Answer 2

There is an “official” way to accomplish this task. You can find the Disqus indication in this link.

In more detail, the procedure is as follows:

Add a variable called comments to the front of YAML (i.e. the header of your mail file) and set it to true . A sample front object may look like this:

 layout: default comments: true # other options 

Create a new template file (i.e. disqus.html ) and put the Universal Embed Code there , between % if page.comments % and % endif %

Include the disqus.html file in the publication template.

Hope this helps :)

Answer 3

Include the disqus comment in your post.html and set the id of the comment link:

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

In your default.html template, specify the number of script comments:

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

Then add a link to the comments using the data-disqus-identifier attribute so that the comment counter data-disqus-identifier after each post on the main page of your blog:

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

Answer 4

Real Jekyll will display the HTML from your Markdown files (locally using Jekyll or remotely by clicking on gh pages). However, this does not really matter, since this type of code must be in a layer, and therefore not in the Markdown source file.

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

By following this tree view, you can display your Markdown files using a message layout that your Disqus script may contain.

Answer 5

Open config.yml and add the following line of code disqus_shortname: username . Replace username with your short Disqus name.

Create a file called disqus_comments.html in the Jekylls _includes folder and add your universal code for the Disqus disk between the {% if page.comments %} and {% endif %} tags

 {% 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 %} 

You simply add comments: false to any front-matter posts to disable comments on the post.

Finally, open the post.html file and add the following include tag located immediately after the </article> .

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

You can follow my detailed blog post on how to add Disqus comments to Jekyll if you're stuck.