博客搭建二：hugo添加gitalk评论功能

好的想法需要交流。我们的博客已经搭建好了，可以再上面愉快的发文章，但是我们需要一个连接外界和别人交流的窗口，一如多年前QQ的四四方方的长条聊天框，拉近了我们彼此的联系。

评论系统的选择

每种评论体统都有各自的优缺点，这里选择gitalk评论系统，光从名字就知道它与GitHub有关。首先，打开D:\博客根目录\themes\LoveIt\layouts\posts里的single.html文件，在底部{- /* Comment */ -}}下面添加{ {{- partial “comment.html” . -}}，在D:\博客根目录\themes\LoveIt\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 }}

我们先注册一个GitHub账号，然后创建一个空的仓库用来存放你的评论。仓库建完以后，从设置里选择开发者选项，然后建立一个OAuth Apps见下图。

博客搭建二_1

博客搭建二_2

上面两项要在主题配置文件修改：

1
2
3
4
5
6


[params.page.comment.gitalk]
        enable = true # 启用评论功能
        owner = "c2h5oc2h5" # 用户名
        repo = "changyan" # 评论仓库名
        clientId = "xxx" # 上图第一项
        clientSecret = "xxx" # 上图第二项

最后两项是你GitHub pages 上你的博客域名，如果你和我一样绑定了域名，一定一定要把上面最后两项的地址填写你的域名，不然当你初始化评论时（第一次需要登录你的GitHub账号，在博客下面评论区的位置，登录一次以后就不用再登陆了），会跳转到你的博客首页。搭建完成如下图所示。

博客搭建二_3

按照顺序设置下来基本不会遇到ERROR:NOT FOUND问题，至此评论系统就搭建好了。

博客搭建二_4