Hexo Next主题集成gitalk评论系统

柔光的暖阳◎ 2023-06-15 07:30 33阅读 0赞

## 前言 ##

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

### 集成步骤 ###

#### 1、新建评论仓库 ####

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

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

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

#### 2、Register Application ####

配置GitHub Apps的OAuth Apps，如下：

![注册界面][format_png]

参数说明：

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登录进行初始化创建即可。

![错误提示][format_png 1]

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

[gitalk]: https://gitalk.github.io/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2hlYWQudGZsZW9mLnRvcC9pbWFnZXMvaGV4b2dpdGFsazMucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2hlYWQudGZsZW9mLnRvcC9pbWFnZXMvaGV4b2dpdGFsazIucG5n?x-oss-process=image/format,png