背景

评论是博客中一个必要的功能，除非你想写个博客，然后不允许别人逼逼那种。

前两天刚搭好自己的Github主页，所以迫不及待就想弄个评论功能。网上推荐蛮多评论插件了，我最终选择的是Gitalk，在线示例请见链接

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。让我最终选择他的是因为Gitalk 使用的是Github Issue 的API，不依赖任何第三方平台，只要Github不倒闭，评论系统就不会出问题。当然如果Github倒闭，Github主页就不复存在了。

搭建

创建Github OAuth Application

这里面要特别说明一下，我第一次接触的时候，一直以为是GitHub App，页面如下图：

前面的信息都挺顺利的，哒哒哒敲完了，点击Create GitHub App的时候，提示途中标红的Webhook URL，这就一脸懵逼了。然后网上各种搜，最后发现创建应该是Github OAuth Application。如下图：

其中Client ID和Client Secret后续会用到。

添加gitalk.html模板

从网上拷贝了一份见下方, 注意这份模板是有问题的！！！本身添加评论功能是很简单的，但是这份代码增加集成了难度，下文会详细讲解。

  1. {{ if .Site.Params.enableGitalk }}
  2. <div id="gitalk-container/" style="border:0" ></div>
  3. <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css/" style="border:0" >
  4. <script src="https://unpkg.com/gitalk/dist/gitalk.min.js/" style="border:0" ></script>
  5. <script>
  6.   const gitalk = new Gitalk({
  7.     clientID: '{{ .Site.Params.Gitalk.clientID }}',
  8.     clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
  9.     repo: '{{ .Site.Params.Gitalk.repo }}',
  10.     owner: '{{ .Site.Params.Gitalk.owner }}',
  11.     admin: ['{{ .Site.Params.Gitalk.owner }}'],
  12.     id: location.pathname, // Ensure uniqueness and length less than 50
  13.     distractionFreeMode: false // Facebook-like distraction free mode
  14.   });
  15.   (function() {
  16.     if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
  17.       document.getElementById('gitalk-container').innerHTML = 'Gitalk comments not available by default when the website is previewed locally.';
  18.       return;
  19.     }
  20.     gitalk.render('gitalk-container');
  21.   })();
  22. </script>
  23. {{ end }}

插入gitalk.html

然后在themes中对应的主题下的layout/_default/single.html 中插入{{ partial "gitalk.html" . }}

配置 config.toml

在 config.toml 中添加以下配置

  1. ##下面的参数主要是在gitalk.html会用到。通过.Site.Params.xxx获取
  2. [params]
  3.   enableGitalk = true
  4. [params.gitalk]  
  5.     clientID = "[Client ID]" # [Client ID] 替换成你的Client ID
  6.     clientSecret = "[Client Secret]" # [Client Secret] 替换成你的Client Secret
  7.     repo = "{git-username}.github.io" # 你的Github个人主页
  8.     owner = "{git-username}" # 你的 GitHub ID
  9.     admin= "{git-username}" # Required. GitHub ID. Github repository owner and collaborators. (Users who having write access to this repository)
  10.     
  11.     id= "location.pathname" # The unique id of the page.
  12.     labels= "gitalk" # Github issue labels. If you used to use Gitment, you can change it
  13.     perPage= 15 # Pagination size, with maximum 100.
  14.     pagerDirection= "last" # Comment sorting direction, available values are 'last' and 'first'.
  15.     createIssueManually= false # If it is 'false', it is auto to make a Github issue when the administrators login.
  16.     distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.

理论上截此为止，把改动推到Github上，应该就可以看到了评论功能，但是，正所谓不怕万一，就怕但是。如果按照以上流程，满怀兴奋地刷新Github主页以后，下面依然空白。

继续一脸懵逼中…

继续网上搜索，不过徒劳无功，最终打开网页调试面板，原来加载js报错了

Error: Container not found, window.document.getElementById: gitalk-container

最终定位问题在gitalk.html,下面几行改成下方那样就可以了。

  1. <div id="gitalk-container"></div>
  2. <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  3. <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

忐忑不安地推到GitHub，怀着试一下的心态，居然可以了，痛哭流涕啊。

第一次会提示GitHub登录，登录以后就可以用了。

心得

达到目的的成就感跟达到目的的难度成正相关。

过程越是艰苦，达到目的后成就感越高。

参考

https://mogeko.me/2018/025/