评论系统对于博客的重要性不言而喻，动态网站通常都有配置好的评论区，而静态网页，大多需要依赖第三方评论系统。hugo 作为轻量级博客生成器，评论系统的加入会让功能更加完善。

本文参考，这里仅仅做个记录，以便日后参考。

关于 Gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

特性

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
  • 支持个人或组织
  • 无干扰模式（设置 distractionFreeMode 为 true 开启）
  • 快捷键提交评论 （cmd|ctrl + enter）

注册OAuth application

首先你需要有一个 github 账号，点击个人头像-setting-Developer settings-OAuth Apps 后你会看到如下画面。

点击红框选中的 New 按钮，创建一个新的 OAuth App。可以看到我这里已经创建好了一个

然后在创建页面填入相关信息，起一个适合的名字，然后红线选中的两个 URL 都填写你博客的网页地址，例如我的应该是 https://charmerkai.github.io

点击绿色的注册按钮，可以看到建立好的 OAuth App，如下图，记录好自己的 Client ID 与 Client secrets，后面需要用到。

在主题的 HTML 中加入 gitalk

首先，在主题的 layouts/partials 文件夹中创建 gitalk.html 文件，写下如下代码

{{ if .Site.Params.enableGitalk }}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  const gitalk = new Gitalk({
    clientID: '{{ .Site.Params.Gitalk.clientID }}',
    clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
    repo: '{{ .Site.Params.Gitalk.repo }}',
    owner: '{{ .Site.Params.Gitalk.owner }}',
    admin: ['{{ .Site.Params.Gitalk.owner }}'],
    id: location.pathname, // Ensure uniqueness and length less than 50
    distractionFreeMode: false // Facebook-like distraction free mode
  });
  (function() {
    if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
      document.getElementById('gitalk-container').innerHTML = 'Gitalk comments not available by default when the website is previewed locally.';
      return;
    }
    gitalk.render('gitalk-container');
  })();
</script>
{{ end }}

下面需要找到 gitalk 加入博客页面的位置，用我使用的 hello-friend-ng 主题为例，打开主题目录下的 layouts/posts/single.html 文件，翻到最下面，可以看到原作者预留了评论区的位置，从 135 到 141 行

外层的 if 判断的是另一个第三方评论工具 Disqus，我们可以直接删去。136 行的 if 判断参数列表中的Commit 是否为真，我们将参数名称修改为自己的参数，同时在 与 包裹的块中加入自带的 gitalk 模板， {{ partial "gitalk.html" . }}，修改后如下：

随后在 config.toml 中加入如下代码

[params]
  enableGitalk = true

[params.gitalk] 
    clientID = "[Client ID]" # Your client ID
    clientSecret = "[Client Secret]" # Your client secret
    repo = "mogeko.github.io" # The repo to store comments
    owner = "Mogeko" # Your GitHub ID
    admin= "Mogeko" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
    id= "location.pathname" # The unique id of the page.
    labels= "gitalk" # Github issue labels. If you used to use Gitment, you can change it
    perPage= 15 # Pagination size, with maximum 100.
    pagerDirection= "last" # Comment sorting direction, available values are 'last' and 'first'.
    createIssueManually= false # If it is 'false', it is auto to make a Github issue when the administrators login.
    distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.

注意这里的参数 enableGitalk 对应着 html 中 EnableGitalk 使用这个参数就可以控制评论区是否存在了。

注意点

  • gitalk 在 hugo server 模式下无法显示，需要部署到网页端后自行开启
  • gitalk 作为第三方授权软件，有一定的安全风险性，例如可能授权时利用你的 github 账号 star 别的工程，具体可以参考 这里 的说明，是否继续使用取决于个人喜好