---
title: "Hexo NexT テーマにコメントシステム utterances を追加する"
description: "はじめに\nちょうど  の内装をいじっていて、まだコメント欄がないことに気づいた"
author: "kidneyweakx"
published: 2019-10-26T14:30:00.000Z
updated: 2025-12-17T23:03:38.041Z
lang: ja
tags: ["程式筆記", "Javascript", "hexo"]
canonical: https://kidneyweakx.com/blog/19log-1026-hexo-com?lang=ja
alternate_zh_tw: https://kidneyweakx.com/blog/19log-1026-hexo-com.md
alternate_en: https://kidneyweakx.com/blog/19log-1026-hexo-com.md?lang=en
---

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

### はじめに

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

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

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

* ところが調べているうちに、この記事を見つけました：[Gitalk や Gitment など、権限が強すぎる Github OAuth App の使用はやめよう](https://www.v2ex.com/t/535608)。

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

#### Why Utterances

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

***

### 設定

#### 認可

utterances を認可して、コメントを受け取ったら `repo` の `Issues` に投稿できるようにします
まずこの URL を開きます <https://github.com/apps/utterances>
認可を求められるので、私は hexo のブログ repo を選びました
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-01.jpg)

#### 設置

この URL に行きます <https://utteranc.es/> 
`configuration` の repo: 欄に、さきほど認可した `repo` を入力します
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-02.jpg)
次に、この script をコピーします
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-03.jpg)
例：`label` を付けると、`Issues` の中でコメントが見やすくなります

### Next 側の設定

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

```js
  {% 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>
```

追加する場所は

```js
{% if page.comments %}
```

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

```js
# utterances
utterances:
  enable: true
```

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

### まとめ

実は npm module の [Hexo NexT Utteranc](https://github.com/theme-next/hexo-next-utteranc) もあるのですが、わざわざもう 1 つ入れる必要はないと思います。公式の説明がとても丁寧なので。
質問があれば、気軽にコメントしてください。