使用gittalk实现hexo博客评论功能

• 关于gitalk
• 使用gitalk实现hexo博客评论功能
• 其他

---

一. 关于gitalk

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

特性

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

二. gitalk实现hexo博客评论功能

Register Application

在GitHub上注册新应用，链接：https://github.com/settings/applications/new

参数说明：

Application name： # 应用名称，随意

Homepage URL： # 网站URL

Application description # 描述，随意

Authorization callback URL：# 网站URL

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

新建gitalk.swig

在主题文件夹下新建/layout/_third-party/comments/gitalk.swig文件，并添加内容：

{% 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 type="text/javascript">
        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: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

修改comments.swig

修改主题文件夹内/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

{% elseif theme.gitalk.enable %}
 <div id="gitalk-container"></div>

修改index.swig

修改layout/_third-party/comments/index.swig，在最后一行添加内容：

{% include 'gitalk.swig' %}

新建gitalk.styl

新建/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改third-party.styl

修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

@import "gitalk";

修改_config.yml

在主题配置文件next/_config.yml中添加如下内容：

gitalk:
  enable: true
  githubID: github帐号
  repo: 仓库名称
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  distractionFreeMode: true

三. 其他

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面进入某一博客内容下，就可看到评论处。

参考文章

https://asdfv1929.github.io/2018/01/20/gitalk/

https://liujunzhou.top/2018/8/10/gitalk-error/