Hexo Next主题集成gitalk评论系统

前言

gitalk： 一个基于 Github Issue 和 Preact 开发的评论插件

集成步骤

1、新建评论仓库

第一步：新建一个空的评论仓库，个人博客中的评论会提交到这个仓库中。

第二步：注意在setting中启用该仓库的Issues。

第三步：进入仓库，点击仓库上方的Issues，初始化仓库的Issues。

2、Register Application

配置GitHub Apps的OAuth Apps，如下：

参数说明：

Application name：应用名称，随意
Homepage URL： 必须是博客的github仓库，如https://github.com/TateTang/TateTang.github.io
Application description：描述，随意
Authorization callback URL： 网站URL，http://tfleof.top/

注意：注册成功之后会有Client ID和 Client Secret ，等下会使用到。

3、配置文件修改

gitalk.swig

第一步：新建或修改/layout/_third-party/comments/gitalk.swig文件，并添加内容：

{%- 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 %}前面加上如下内容：

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

index.swig

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

{% include 'gitalk.swig' %}

gitalk.syl

第四步：新建或者修改/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: .7em;
}

third-party.styl

第五步：修改/source/css/_common/components/third-party/third-party.styl，添加内容：

@import 'gitalk' if (hexo-config('gitalk.enable'));

_config.xml

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

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

4、初始化Issuse

进入博客后会出现这个错误，这个时候直接使用GitHub登录进行初始化创建即可。

以上就是Next中添加gitalk评论的配置，博客上传到GitHub上后，打开页面后进入某篇文章内容下，就可以进行评论了。