Install Disqus to Hexo Blog - Andy's Blog

Steps

1. Go to Disqus to register an account.
2. Click Get Started

3. I want to install Disqus on my site

4. Enter your website name (whatever you like, it is like a nickname) and record the short name auto-generated below (or you can customize by yourself).

   Choose your website category then click Create Site.

5. Select a plan.

   Here I will choose Basic Plan, free and suitable for my needs currently. (Of course, you can choose a plan based on your needs) Click on Subscribe Now.

6. Choose platform.

   Because we are installing the Disqus to Hexo which is not listed here. So we can choose to install manually with Universal Code

7. You will be directed to the Install Instructions page and you can find the universal code below.

You need to change 2 things here, you can reference my examples and make changes based on your website.

• Change PAGE_URL and PAGE_IDENTIFIER.
• Change YourShortName to the name you record in Step 4.

<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    
    **/
    var disqus_config = function () {
    // Replace PAGE_URL with your page's canonical URL variable
    // Eg. For my website, I use this.page.url = config.permalink;
    this.page.url = PAGE_URL;  
    // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    // Eg. For my website, I use this.page.url = config.permalink;
    this.page.identifier = PAGE_IDENTIFIER; 
    };
    
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    // Here change YourShortName to the short name you record in Step 4  
    // But generally, you do not need to change this because if you copy the code from the Disqus website install instructions, they will change it for you automatically. 
    s.src = 'https://YourShortName.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">comments powered by Disqus.</a></noscript>

8. After modification, you can place this section of code where you’d like Disqus to display.

   For example, I am using Hexo Theme Cupertino so I have placed this section of code into

   themes/hexo-theme-cupertino/layout/post.ejs. At the bottom of the post.ejs file before the end of the article tag where I want Disqus can be displayed after the paginator.

   Also if you want to modify the size of the Disqus comment area, you can add a CSS file to modify it.

   Disqus is set to fill 100% of the width of its parent HTML element and has no margin or padding set on its <div>. This means Disqus often looks best when its parent container gives it some margin or padding. Additionally, the width of the disqus_thread ID can be adjusted using CSS.

post.ejs

<%- css('css/disqus') %> <!-- Reference the CSS file used for Disqus -->
<article>
<!-- Omit several lines of code -->
  
<% if (!page.no_comments) { %>
        <!-- Disqus comment system, using css/disqus.css to modify comment area size -->
        <br/> <!-- Add an empty line here to wider the space --> 
        <hr> <!-- Add a horizontal line here to divide space -->
        <div class="disqus" id="disqus_thread" ></div>
        <script>
            /**
            *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
            *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    
            * */
            var disqus_config = function () {
                this.page.url = config.permalink;  // Replace PAGE_URL with your page's canonical URL variable
                this.page.identifier = config.permalink; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
            };
    
            (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://YourShortName.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">comments powered by Disqus.</a></noscript>    
    <% } %>
</article>

disqus.css

.disqus {
    width: calc(100% - 32px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
  }

What’s More?

If you want to display the total number of blog comments, you can add the code below to your website before the end of the body tag.

// Change YourShortName to your short name recorded in Step 4
<script id="dsq-count-scr" src="//YourShortName.disqus.com/count.js" async></script>

Reference

• Universal Code install instructions
• Disqus Appearance Customizations
• CSS reference