Use utterances as Hexo Next theme comments

人的一切痛苦,本质上都是对自己无能的愤怒。

Why Utterances?

  1. The most similar comments to github issue.
  2. Emoji add free as github issue.
  3. Markdown support.
  4. Data storage can be trusted and stable, thanks to github.

But my choice is Valine

Oh my, after study utterances, I have to changed my choice to Valine:

  1. utterances need to modify many theme files, I think I’ll forget where to restore it.
  2. utterances’s replies are not smart enough.
  3. utterances has more differ from github issue after all, it lost some great features like reply.
  4. utterances cannot display count of comments at home page.
  5. Valine not the best one but enough for me, except add emoji free to bottom line.

So, this post is just a study and successful attempt for utterances.

Why not Gitment or Gitalk?

Reference:

How to use Utterances?

Fill out: utterances -> configuration, you can get a script.

Then:

touch <your theme path>/layout/_third-party/comments/utterances.swig
vim <your theme path>/layout/_third-party/comments/utterances.swig

Add code below to utterances.swig:

{% if theme.utterances.enable %}
<script src="https://utteranc.es/client.js"
repo="{{ theme.utterances.repo }}"
issue-term="{{ theme.utterances.issue_term }}"
label="{{ theme.utterances.label }}"
theme="{{ theme.utterances.theme }}"
crossorigin="anonymous"
async>
</script>
{% endif %}
vim <your theme path>/layout/_partials/comments.swig

Refer to the following to modify comments.swig:

{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>
+
+ {% elseif theme.utterances.enable %}
+ <div class="comments" id="comments">
+ {% include '../_third-party/comments/utterances.swig' %}
+ </div>
{% endif %}
vim <your theme path>/_config.yml

Add following to _config.yml:

utterances:
enable: true
repo: # owner/repo
issue_term: # pathname, url, title, og:title [ISSUE NUMBER] or [SPECIFIC TERM]
theme: # github-light or github-dark
label: 💬Comments # The label must exist in your repo, mine is 💬Comments

Tips:

  • currect format: repo: # owner/repo
  • wrong format: repo: # https://github.com/owner/repo.git

Reference:

https://www.njphper.com/posts/a4cd94b2.html
https://wangjiezhe.com/posts/2018-10-29-Hexo-NexT-3/

EOF

0%