How to add comments to Hexo blog using Hyvor Talk

Nowadays, bloggers are considering static generators more. Hexo is one of the best static generators. However, it is a hard task to add a default comments system to a static blog because of the hardship faced when saving dynamic data. Therefore, you will need to use a 3rd party commenting plugin

There are multiple choices that you can use. I'll be using Hyvor Talk in this article.

Why Hyvor Talk?

• Blazing fast
• Beautiful
• Fully-customizable (Colors, fonts, and texts)
• Easy to install
• No ads or affiliate links placed
• Generous free plan
• And more...

Installing Comments on Your Hexo Blog

This guide assumes that you have already set up your hexo blog.

1. Sign Up

Visit Hyvor Talk and sign up.

2. Register Your Website

Next, visit the console. Make sure you are in the "Account -> Add Website" Section.

Then, fill the Website Name and Website Domain and click "ADD". If you have multiple domains, you can add them later. Now, you have registered your website at Hyvor Talk.

3. Installing

Now, open the template file where you need to add Hyvor Talk. It is better to add it after the article. So, in the default theme, it's /themes/landscape/layout/_partial/article.ejs.

Then, paste the following code at the bottom of your page.

<% if (!index && post.comments){ %>
<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url: '<%= page.permalink %>' || false,
        id: '<%= page.path %>' || false
    }
</script>
<script type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>
<% } %>

Then, replace YOUR_WEBSITE_ID with your actual website ID. It can be found at "Moderate -> General" section of the Hyvor Talk console. Ex:

var HYVOR_TALK_WEBSITE = 10523;

Now, you are all set! You will see the comments plugin at the bottom of your pages.

The <% if (!index && post.comments){ %> part of the code will disable comments on the index page and pages which turned off comments.

How to turn off comments for a page?

Add comments:false to the meta data at the top of the article.

---
title: "My Comments Off Article"
comments: false
---

How to lazy load Hyvor Talk?

You can easily lazy load comments by adding loadMode:"scroll" to HYVOR_TALK_CONFIG.

var HYVOR_TALK_CONFIG = {
    url: '<%= page.permalink %>' || false,
    id: '<%= page.path %>' || false,
    loadMode: "scroll"
}

Learn more about load modes for comments.

Conclusion

You have successfully installed comments on your Hexo blog. Sometimes, it can be hard to find the exact position to place the code depending on your Hexo theme. You can use the browser debugger as help in that case. Next, you can customize the appearance and community settings from the console.

Thank you.