【归档文章】Hugo 静态博客使用 utterances 来开启评论功能

关于 Hugo 博客开放评论的教程。

注：这篇文章是从旧的博客系统中迁移过来的、我觉得还存在价值的文章。但是由于时间关系，可能已经不再是最佳实践，请仅作参考。

在建设这个博客的初期本来是想开放评论功能的，但是由于第一次接触 Hugo 这样静态博客，页面上的内容都是通过模板生成，实在是生疏，稍微配置了一下发现不行就放弃了。
一直到现在，想想还是再试一试吧，于是就有了这篇博文。

我这里使用的是 utterances 来实现评论功能，评论会被保存到你指定 GitHub 仓库（必须是公开的）的 Issues 内，由于任何人只要通过 GitHub OAuth 登录过后就可以进行评论，且官方没有敏感词等的过滤，因此担心污染仓库的话请慎用。
而其他的评论配置和本文中的操作大同小异，基本都是在博文页面的模板中添加评论服务提供商给的评论页面元素模板，之后在配置文件中设置变量以开启评论功能。

1、安装 utterances

utterances 的安装较为简单，直接在 GitHub App 上安装即可。

关于 GitHub App 的介绍可以看这篇文章：详解 GitHub App 的玩法

GitHub App 链接：utterances
点击 Install：

选择一个仓库并安装（我推荐用你 Hugo 博客所在的仓库，这样管理起来更方便）：
选择仓库
之后跳转到这个页面就说明安装成功了：

2、获取 utterances 评论的代码片段并加入到博文模板中

我这里就通过勾选官方页面给的选项来生成自己的代码片段吧（就在刚刚成功的页面上）：
官方选项

刚刚你配置 utterances 可读取写入的仓库名。
Issue 标题的样式，我选的是以博文的路径作为标题，后面也有用博文 Url 和博文标题可选。
评论 Issue 的标签。

当然下面还有主题可选，完成后就能获得自己的代码片段了：

<script src="https://utteranc.es/client.js"
        repo="senjianlu/senjianlu.github.io"
        issue-term="pathname"
        label="评论"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

3、写入博文模板

各主题博文模板的路径可能不同，我 pure 主题的路径为：\pure\layouts\partials\article.html
article
有一个专门的评论模板，那么直接去那里面添加即可，添加前：

添加后：

内容：

    ...
    ...
    {{- else if eq $comment.type "utterances" }}
    <script src="{{- $comment.utterances.src }}" repo="{{- $comment.utterances.repo }}" issue-term="{{- $comment.utterances.issue_term }}" label="{{- $comment.utterances.label }}" theme="{{- $comment.utterances.theme }}" crossorigin="{{- $comment.utterances.crossorigin }}" async></script>
    ...
    ...

我这里将变量都值交给了配置文件去设置，你直接写死当然也是可以的，就是后面修改起来没有那么方便了。

4、在配置文件中设置变量

比较简单，在 config.toml（你博客的配置文件而非主题的配置文件）里照着之前 comment 变量依葫芦画瓢即可：

[params]
  ...
  ...
  [params.comment]
  disqus = "your_disqus_name"
  type = "utterances"
    ...
    ...
    [params.comment.utterances]
    src = "https://utteranc.es/client.js"
    repo = "senjianlu/senjianlu.github.io"
    issue_term = "pathname"
    label = "评论"
    theme = "github-light"
    crossorigin = "anonymous"

注意 $comment.type 变量不要忘掉！

5、本地渲染测试

本地启动看下（pure 为我的主题名，请自行替换）：

hugo server -t pure

选择登录：

之后评论便能正常输入了：
输入评论
成功评论：

同时 Issues + 1：
本地测试通过之后，正式发布理论上也不会有任何问题的，我这里就不演示了。

需要停止评论功能的话，先停用 utterances App：
之后修改 config.toml 将 $comment.type 的值改为空即可。

结束。