Last week I introduced a commenting system on my hexo blog.

It all went well at first, until I found that at some point, the comment area and the blog post itself didn’t match.

Finally I modified some code writing and finally fixed the problem.

This blog post documents this slightly tortuous process.

background

I’ve always wanted to introduce a commenting system, preferably one that doesn’t rely too much on other 3rd party services.

In the end I chose Gitalk. Gitalk is great, convenient, and fits my needs perfectly.

process

The introduction was very smooth. After referring to the official website and other people’s articles, I successfully introduced it in my blog.

Similar to others, my approach is to introduce the relevant code in the content-view.ejs section of the layout of my hexo theme.(Some themes may have a separate comment.ejs file.)

Just like the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- gitalk -->
<% if (theme.gitalk.enable === 'all' || (theme.gitalk.enable === 'post' && !isPage)) { %>
  <section>
    <div id="gitalk-container"></div>

    <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: '<%= theme.gitalk.clientID %>',
        clientSecret: '<%= theme.gitalk.clientSecret %>',
        repo: '<%= theme.gitalk.repo %>',
        owner: '<%= theme.gitalk.owner %>',
        admin: <%- JSON.stringify(theme.gitalk.admin) %>,
        perPage: 20,
        // ↓↓↓pay attention to this line
        id: window.location.pathname.slice(0, 50),
        title: '<%= page.title %>',
        body: '<%= page.permalink + " " + page.title %>'
      });
      gitalk.render("gitalk-container");
    </script>
  </section>
<% } %>

To debug, I commented on one of my own blogs. All goes well, debugging, code release.

But when I switch pages at will, I find that the comments I just posted sometimes appear, sometimes they don’t.

After some experimentation, I found that when I jumped to this blog post from another page, the comments did not appear. When I refresh the page, or go directly to it, the comments appear normally. This phenomenon is very stable.

At first I thought it was a network problem, but then I realized there must be something wrong.

I wrote some debugging code where the comment code was introduced, and found the clue. code show as below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!-- gitalk -->
<% if (theme.gitalk.enable === 'all' || (theme.gitalk.enable === 'post' && !isPage)) { %>
  <section>
    <div id="gitalk-container"></div>

    <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: '<%= theme.gitalk.clientID %>',
        clientSecret: '<%= theme.gitalk.clientSecret %>',
        repo: '<%= theme.gitalk.repo %>',
        owner: '<%= theme.gitalk.owner %>',
        admin: <%- JSON.stringify(theme.gitalk.admin) %>,
        perPage: 20,
        // ↓↓↓pay attention to this line
        id: window.location.pathname.slice(0, 50),
        title: '<%= page.title %>',
        body: '<%= page.permalink + " " + page.title %>'
      });
      // ↓↓↓the debug code
      console.warn(gitalk.options.id);
      gitalk.render("gitalk-container");
    </script>
  </section>
<% } %>

I found that the output id is not always as expected, i.e. not always the path of the current page. Sometimes it’s the path to the previous page.

After debugging and inspection, it can be found that the page jump of hexo does not refresh the entire page, but partially refreshes and updates the link displayed by the browser.

When the page jumps, the execution timing of this part of JavaScript makes it impossible to accurately capture the real path of the current blog post. As a result, the id obtained by Gitalk is wrong, causing comments and blog posts to not match.

Based on this, the fix is ​​also very simple, that is, where the id is provided, do not use JavaScript to obtain it, but directly use the template code of ejs to obtain it.The corrected code is as follows.

1
2
3
4
5

// wrong code
id: window.location.pathname.slice(0, 50),

// correct code
id: '<%= url_for(page.path).slice(0, 50) %>',

In this way, the correct page path will be generated directly into the html code without relying on the JavaScript to get it at runtime.

finally

The essence of this problem is due to the partial refresh of the hexo page jump and the way Gitalk comment id is generated.

Now, the comment system of my blog can finally work smoothly. More comments, suggestions and opinions are welcome. grateful.