环境描述

  • Blog 框架：Hugo；
  • Blog 主题：PaperMod；
  • 本文发布时间：2021-03-26

 

问题描述

由于 Github 限制 label 长度不能超过 $$50$$ ，所以当 Blog 名称长度超过 $$50$$ 后，Gitalk 就不能成功初始化 issue ，开启评论时提示错误信息为：Error:Validation Failed 。

 

解决方法

1. 找到一个 JS 实现的 md5 脚本

比如这个： JavaScript- MD5，我使用的是该仓库下的 js/md5.min.js 这个文件，把它下载下来，然后放到自己的网站的 js 脚本目录下，比如我的是 https://hambaobao.github.io/assets/js/ ，此处为生成静态网站文件后上传到 Github 的目录位置，至于在本地的时候放在哪里，由于不同框架和主题不同请读者自行判断，我是放到了本地的 /public/assets/js/ 下。

 

2. 修改 Gitalk 配置文件

简单的引入md5 脚本，并修改 Gitalk 配置中的 id 即可。

原文件：

{{ if .Site.Params.enableGitalk }}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/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 }}

新文件内容：

{{ if .Site.Params.enableGitalk }}
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="{{ .Site.Params.Gitalk.baseurl }}/assets/js/md5.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: md5(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 }}

新文件仅仅只比原文件多添加了一行：<script src="{{ .Site.Params.Gitalk.baseurl }}/assets/js/md5.min.js"></script> ，然后将 id: location.pathname 改为了 id: md5(location.pathname) 。

注意

<script src="{{ .Site.Params.Gitalk.baseurl }}/assets/js/md5.min.js"></script> 中的 .Site.Params.Gitalk.baseurl 这个变量可能需要在网站的配置文件中指定：

config.toml：

[Params.Gitalk]
clientID = "XXXXXXXXX" # Your client ID
clientSecret = "XXXXXXXXXXXXXXXX" # Your client secret
repo = "hambaobao.github.io" # The repo to store comments
owner = "Hambaobao" # Your GitHub ID
admin = "Hambaobao" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
id = "loaction.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.
baseurl = "https://hambaobao.github.io"

即指定最后一行的 baseurl = "https://hambaobao.github.io" 。

 

3. 修改完成后重新发布一次网站

重新发布后应该就可以顺利开启评论功能了。

 

其它事项

 

参考资料