#Disqus #Hexo #Blog

This shows you how to display the number of Disqus comments for you static blog posts on the home page or any other article extracts/list page.

Get the count.js script

Insert the following script at the bottom of your page:

<script id="dsq-count-scr" src="//SHORTNAME.disqus.com/count.js" async></script>

Where SHORTNAME is your disqus Shortname/ID. It is different from the usual embed.js file.

Simply add #disqus_thread at the end of each URL in each <a> tag that needs to display the list of comments. It is important that the URL before the anchor corresponds to a URL with comments ON.

Example:

<a href="http://codeblocq.com/post1.html#disqus_thread"># COMMENTS</a>

In the markup above, the # COMMENTS text will be replaced by the number of comments (0 comments, 1 comment, n comments..)

You can specify the strings to be used in your admin page.

Hexo example

Here is how I do it with Hexo (ejs template) but it can easily be adapted to anything else.

<!-- Disqus Comments -->
<% if (config.disqus_shortname){ %>
<script type="text/javascript">
    var disqus_shortname = '<%= config.disqus_shortname %>';

    (function(){
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
</script>
<% } %>

This will generate the correct script tag at the end of the <body>:

  • embed.js if it’s a ‘details’ page
  • count.js if it’s the home page

Then use the following code to declare the link

<a href="<%- item.permalink %>#disqus_thread"></a>

You can check out Hexo’s default theme (at the time of writing) for more information.

#Disqus #Hexo #Blog