Hexo博客下集成Gitalk评论

发表于 2022-02-07 分类于 Hexo博客本文字数： 3.3k 阅读时长 ≈ 3 分钟

Hexo+Next博客下集成 Gitalk 评论功能

Gitalk 是基于 GitHub Issues 的评论系统，面向程序员，不能匿名评论，需博主初始化话题，用户需登录 github 账号评论。并且支持markdown 格式。

Gitalk 功能集成过程：

新建评论仓库

如果 Hexo博客是通过Github的仓库（repositories）部署到远端的话，该仓库即可以作为评论仓库，在setting中启动该仓库的Issues即可。

否则的话，需要新建一个空的仓库来使用，并且启动该仓库的 Issues。

注册OAuth Application

进入GitHub官网https://github.com/ ，点击右上角头像，选择setting.
接着在setting后选择developer setting 。
然后 new OAuth app

接着完成注册信息。

值得注意的是第四个参数信息很重要！是回调URL，这个一定不能填写错，一般填写你博客主页地址。

talk4 注册成功之后会有 Client ID和 Client Secret ，需要记录下来之后会用到。

配置文件修改

第一步：新建或修改/layout/_third-party/comments/gitalk.swig文件，并添加内容（若该文件下载后已存在则无需进行更改，Next8.0 版本后为.njk 后缀结尾文件）。

{%- if page.comments %}
{%- set gitalk_css_uri = theme.vendors.gitalk_css | default('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css') %}
<link rel="stylesheet" href="{{ gitalk_css_uri }}">

{%- set gitalk_js_uri = theme.vendors.gitalk_js | default('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js') %}

<script>
  NexT.utils.getScript('{{ gitalk_js_uri }}', () => {
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.client_id }}',
      clientSecret: '{{ theme.gitalk.client_secret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.github_id }}',
      admin: ['{{ theme.gitalk.admin_user }}'],
      id: '{{ gitalk_md5(page.path) }}',
      {%- if theme.gitalk.language == '' %}
        language: window.navigator.language || window.navigator.userLanguage,
      {% else %}
        language: '{{ theme.gitalk.language }}',
      {%- endif %}
      distractionFreeMode: '{{ theme.gitalk.distraction_free_mode }}'
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
</script>
{%- endif %}

comments.swig

第二步：修改/layout/_partials/comments.swig文件，在最后一个{%- endif %}前面加上如下内容 (十分重要)：

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

index.swig

第三步：新建或者修改layout/_third-party/comments/index.swig文件，在最后添加内容

1	{% include 'gitalk.swig' %}

gitalk.styl

第四步：新建或者修改/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

if (hexo-config('gitalk.enable')) {
  .gt-header a, .gt-comments a, .gt-popup a {
    border-bottom: 0;
  }

  .gt-container .gt-popup .gt-action.is--active::before {
    top: .7em;
  }
}

_config.xml

第五步：在主题配置文件next/_config.xml中找到gitalk处修改或者添加如下内容：

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

这时我们就需要用到之前记录的 Client ID和 Client Secret ，需要注意的是repo必须是你存放评论并启动Issues的仓库（repository）名称。

初始化 Issues

完成上述工作后，即可在博客主目录下输入命令hexo clean && hexo g && hexo d 运行

进入博客后在评论会出现下图情况，这时使用注册 OAuth Application 的GitHub登录进行初始化创建即可。 talk5

首次初始化会有如下结果，点击授权即可完成！（Gitalk Lin 是我OAuth APP注册的项目名称）
talk6

注意事项：

有时授权完成后可能显示 Error Not Found 问题，很可能的情况是没有创建或者已经存在 (在Setting中) 启动了 Issues的 GitHub 仓库，或者在 Next主题的配置文件中 repo名称输入有误（请与创建的评论仓库的名称相一致）。

例如： repo: blog-Comments

(blog-Comments 即为创建时的仓库名)
虽然已完成 Gitalk功能的集成，但是需要每篇博客都允许其他人可以评论的话，那么你要在该博客下登陆评论仓库（repo）使用的 GitHub 账号来完成 Issues的初始化！

参考链接：

gitalk 参考文档说明（https://github.com/gitalk/gitalk/blob/master/readme-cn.md）