搭建个人博客之后总想着把博客内容弄的丰富一些,首先考虑的就是添加评论功能。

经过再三抉择,最终选择了 Gitalk 。

Gitalk 介绍

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。它支持多种语言包括 en 、 zh-CN 、 zh-TW 、 es-ES 、 fr ,并自动判断当前语言。最重要的是,它同时支持 Github 个人和组织登陆帐号。由于官网安装说明实在过于简单,这里记录一些安装中的重要事项。

Gitalk 安装

首先,你需要申请一个 Github APP ,填写要求如下:

- Application name :
       blog gitalk # 随意填写
- Homepage URL :
       https://zhaozhiyuan.org # 博客主页域名
- Application description :
       # 选填
- Authorization callback URL :
      https://zhaozhiyuan.org # 博客主页域名
- 点击 Registered application 得到
      Client ID:192cc5c033afc1e788a9   # 用于 gitalk 代码片断
      Client Secret:6663a17a2802a6c87c9b4eb8096900fceb73deea  # 用于 gitalk 代码片断

将 gitalk 代码片断添加到添加到博客主题中即可。

<!-- gitalk 代码片断 begin -->
<div id="gitalk-container"></div>
</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 type="text/javascript">
      var gitalk = new Gitalk({
        id: '{{ .Date }}',
        title: '{{ .Title }}',
        clientID: '192cc5c033afc1e788a9',
        clientSecret: '6663a17a2802a6c87c9b4eb8096900fceb73deea',
        repo: 'blog-comment',
        owner: 'zhaozhiyuan1989',
        admin: ['zhaozhiyuan1989'],
        body: decodeURI(location.href),
      });
      gitalk.render('gitalk-container');
 </script>
<!-- gitalk 代码片断 end -->

其中:

  • clientIDclientSecret 在上文已经得到,

  • repo 设置储存评论的仓库名,

  • ownerrepo 仓库的拥有者(个人或者组织),

  • admin 只能是对 repo 有管理权限的用户名(个人仓库使用本人 Github 名)。

使用须知

  • 添加 Gitalk 后需要管理员(本人)在所有博文中授权后别人才可评论。

  • 读者需登陆 Github 帐号才可进行评论。

  • 评论支持 MarkDown 语法,可以回复别人的评论,你的评论被别人回复后 Github 邮箱会收到邮件提醒。

  • 所有的评论可在你设置的 repo 的 issue 中看到。

示例