Love My Love

Use utterances as Hexo Next theme comments

2019.08.09

{% centerquote 王小波 %} 人的一切痛苦,本质上都是对自己无能的愤怒。 {% endcenterquote %}

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

{% note danger %} Tips:

  • currect format: repo: # owner/repo
  • wrong format: repo: # https://github.com/owner/repo.git {% endnote %}

Reference:

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

EOF

发表评论