Hugo+gitalk为blog增彩

GiTalk

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

Gitalk is a modern comment component based on GitHub Issue and Preact

特性：

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

#评论是调用github的api来完成的，不依赖第三方
https://api.github.com/repos/yourrepo/issues?

创建 Github Application

如果没有application，就先创建 Github Application，这里是官方中文帮助文档

Client ID，Client secrets在后面config.toml中配置时，需要使用。

方式一,直接引用Hugo的主题

如果您是直接下载使用的主题，只需要四大步骤

1.为主题添加 gitalk.html 模板

路径地址 |airspace-hugo/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 }}

1. 在 single.html 插入 {{ partial "gitalk.html" . }}

路径地址 |airspace-hugo/layouts/_default/single.html

{{ partial "gitalk.html" . }}

3.config.toml

[params]
  enableGitalk = true
[params.gitalk] 
    clientID = "Client ID" # 您刚才创建Github Application 的 Client ID
    clientSecret = "Client Secret" # 您刚才创建Github Application 的 Client Secret
    repo = "xxxx.github.io" # 您的博客的github地址Repository name，例如：xxxx.github.io
    owner = "GitHub ID" # 您的GitHub ID
    admin= "GitHub ID" # 您的GitHub ID
    id= "location.pathname" # 文章页面的链接地址就是ID
    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= true # 设置为true，如果是管理员登录，会自动创建issue，如果是false，需要管理员手动添加第一个评论(issue)
    distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.

4.配置 OK 后，进行编译网站并且 push 到你的 GitHub 上，如果 createIssueManually 设置是 true . 首次登录后 Gitalk 就能正常使用，否则需要登录后，发起一个首论，才能正常使用。

方式二,通过submodule引用Hugo的主题

如果你的themes是使用submodule来管理的，就是另一种方式来修改theme了。

Git Submodule 允许一个git仓库，作为另一个git仓库的子目录，并且保持父项目和子项目相互独立。

#其它操作都是一样，只是需要你先在theme仓库中，把上面的gitalk.html和single.html都做了，提交代码到你自己的theme仓库

#需要在themes下
cd /your地址/xxx.github.io.source/themes
#查看日志
git log
#然后再进入你的themes实例进行更新
git submodule update
#后续就是和本地编辑的theme修改一样的。

补充：bolg评论功能选择

Disqus（国外的，需要 VPN，kexueshangwang）
Hypercomments（不支持 Markdown）
valine
Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。
特性
- 快速
- 安全
- Emoji 😉
- 无后端实现
- MarkDown 全语法支持
- 轻量易用
- 文章阅读量统计 v1.2.0+
Github大礼包：gitment， gitalk（推荐），gitter（推荐）; 三个都支持Markdown；
原则上来说比较靠谱的是gitment（依托于github issue，能够自己管理，而且被墙的概率小），不过兼容性不太好（需要chrome内核才行）。
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
特性
- 使用 GitHub 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
- 支持个人或组织
- 无干扰模式（设置 distractionFreeMode 为 true 开启）
- 快捷键提交评论（cmd|ctrl + enter）

Q&A

404 Error: Not Found

解决办法：未能正确找到仓库 repo，检查一下你的仓库是否配置正确。

#params.gitalk
repo = "rep名字" # 你的github托管仓库，点击settings,就能看到Repository name
#或者参考界面，按F12,查看issues的get请求地址
https://api.github.com/repos/owner名字/repo名称/issues?labels=Gitalk,...

Error: Validation Failed.

是因为 GitHub 对 Issue 的 label （文章页面的链接地址）存在限制，不能超过 50 个字符，否则会导致加载 Gitalk 插件失败。

Toml解决办法一：截取字符串 for toml

// 截取字符串 
var title = location.pathname.substr(0, 50); 
var gitalk = new Gitalk({     
clientID: 'xxxx',     
clientSecret: 'xxxx',     
repo: 'xxxx',     
owner: 'xxxx',     
admin: ['xxxx'],     
id: title,     
distractionFreeMode: false })

Html解决办法：md5

#找一个 js 实现的 md5
https://github.com/blueimp/JavaScript-MD5
#引入 js，对 url 加密
<script src="{{ site.baseurl }}/js/md5.min.js"></script>

var gitalk = new Gitalk({
  clientID: 'xxxxxxxxxxx',
  clientSecret: 'xxxxxxxxxxxxxxxxxxx',
  repo: 'xxxx.github.io',
  owner: 'xxxx',
  admin: ['xxxx'],
  id: md5(location.href)
})

Html解决办法：中文标题被转码长度变长

var gitalk = new Gitalk({
    clientID: '{{ theme.gitalk.ClientID }}',
    clientSecret: '{{ theme.gitalk.ClientSecret }}',
    repo: '{{ theme.gitalk.repo }}',
    owner: '{{ theme.gitalk.githubID }}',
    admin: ['{{ theme.gitalk.adminUser }}'],
    id: decodeURI(location.pathname),
    distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')

id: decodeURI(location.pathname) 使用了JS的解码函数decodeURI()。这样我生成issue的label貌似就是中文的字符。

Html解决办法：md5

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://rawgit.com/qhh0205/78e9e0b1f3114db6737f3ed8cdd51d3a/raw/3894c5be5aa2378336b1f5ee0f296fa0b22d06e9/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: 'xxxx',
          clientSecret: 'xxxx',
          repo: '{{ xxxx }}',
          owner: '{{ xxxx }}',
          admin: ['{{ xxxx}}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
    </script>
{% endif %}