Hexo NexT テーマにコメントシステム utterances を追加する

# はじめに

ちょうど hexo の内装をいじっていて、まだコメント欄がないことに気づいた

• Next には実はもともとたくさんのコメントシステムが組み込まれています。例：Disqus、gitment など……

• Disqus は普段あまり使っていないし、アカウントをもう 1 つ作るのは面倒くさがりの私には苦痛です。そこで、Github の issue をコメントシステムにしてしまう gitment というツールに目をつけました。

• ところが調べているうちに、この記事を見つけました：Gitalk や Gitment など、権限が強すぎる Github OAuth App の使用はやめよう ↗。

• hmmm……悪意あるエンジニアにやられたくはない QAQ

# Why Utterances

というわけで、utterance ↗ を選びました
これも Github を使ってコメントを保存する仕組みで、とても面白いアプローチです。
しかも要求する権限がずっと少ない。本当に良いツールです。

# 設定

# 認可

utterances を認可して、コメントを受け取ったら repo の Issues に投稿できるようにします
まずこの URL を開きます https://github.com/apps/utterances ↗
認可を求められるので、私は hexo のブログ repo を選びました

# 設置

この URL に行きます https://utteranc.es/ ↗
configuration の repo: 欄に、さきほど認可した repo を入力します

# Next 側の設定

theme\next\layout\_partials フォルダ内の commenets.swig に、以下を追加します

  {% if theme.utterances.enable %}
    <div class="comments" id="comments">
        <script src="https://utteranc.es/client.js"
                repo="[ENTER REPO HERE]"
                issue-term="pathname"
                label="💬"
                theme="github-light"
                crossorigin="anonymous"
                async>
        </script>
    </div>

追加する場所は

{% if page.comments %}

の後ろで OK です
続いて、テーマの設定ファイル _config.yml に以下を追加します

# utterances
utterances:
  enable: true

これで完成です~~（パチパチ）

# まとめ

実は npm module の Hexo NexT Utteranc ↗ もあるのですが、わざわざもう 1 つ入れる必要はないと思います。公式の説明がとても丁寧なので。
質問があれば、気軽にコメントしてください。