为 Hugo 添加谈笑风生区 (Gitalk)

Gitalk 可能存在安全问题, 建议使用 utteranc 作为代替。

Hugo 是一个强大的静态网页生成器，使用 go 开发。速度贼快，还有 “时时预览” 等特性。不过 Hugo 还比较年轻，没有像 NexT 那样功能强大，成熟稳定的主题。所以很多东西需要自己动手撸。

就例如评论系统。

关于 Gitalk

Gitalk

官方网址： https://github.com/gitalk/gitalk/
在线示例： https://gitalk.github.io/

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。它支持多种语言 (包括 en、zh-CN、zh-TW、es-ES、fr)，并自动判断当前语言。最重要的是 Gitalk 使用的是 GitHub Issue 的 api，不依赖任何第三方平台。也就是说，只要 GitHub 不倒闭，你的评论系统就不会被关闭。

添加谈笑风生区

本站目前使用的主题是 zzo

~~本博客使用的主题是：Leavelt~~

不同主题可能有所区别，但原理都是类似的

原理

众所周知，Hugo 会将 Markdown 文档 按照 主题 (包括 HTML 模板、CSS、JavaScript 等) 编译成静态网页

那么我们只需要将 Gitalk 作为一个 <div> 插入到 HTML 模板中，然后在 config.toml 中添加相关配置，就可以实现“谈笑风生区”了

创建 GitHub Application

首先要去 GitHub 上创建一个 GitHub Application

GitHub Application

点击创建

记下 Client ID 和 Client Secret，以后要用

Client ID & Client Secret

添加 gitalk.html 模板

接下来为主题添加 gitalk.html 模板。

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{ 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 的位置

然后使用 Chrome 自带的 DevTools 分析一下网页结构，找到放 Gitalk 的位置

get id or class

我们可以看见已经 Leavelt 为我们预留了 “谈笑风生区” 的位置，不过里面什么东西都没有。记下该 div 的class 或者 id (如果你使用的主题没有预留 “谈笑风生区”，可以记下你准备放 Gitalk 的位置附近 div 的class 或者 id，并以此定位)

打开 VSCode，搜索包含刚刚找到的 class 或者 id 的 HTML 模板 (一般是 single.html)

插入 Gitalk 模板

在模板中插入{{ partial "gitalk.html" . }}

配置 config.toml

在 config.toml 中添加以下配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
[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.

将 [Client ID] 替换为 GitHub Application 的 Client ID

将 [Client Secret] 替换为 GitHub Application 的 Client Secret

将 repo 设置为你的博客的地址

将 owner 和 admin 设置为你的 GitHub ID

更多配置请参考：https://github.com/gitalk/gitalk

设置好后，将编译好的网站推送到 GitHub 上，不出意外的话应该就可以看见评论框了 (Gitalk 在 hugo server 中是不会启用的)

Gitalk

添加谈笑风生区后还不能立即使用，需要用你的 GitHub 账号登陆并初始化。每篇博客都要