hexo next主题搭建gitalk评论

发表于 | 阅读次数

gitalk 是一款基于 Github Issue 和 Preact 开发的评论插件，评论时需使用 Github 账号进行登录。

创建 OAuth App

1.登录github，点击个人头像 –> Settings
2.选择 Developer settings –> OAuth Apps –> 点击 new OAuth App按钮。
3.注册成功后，页面跳转，填写如下参数：

1
Application name： # 应用名称，随意填写
2
3
Homepage URL： # 网站URL，如https://wang7211401.github.io
4
5
Application description # 描述，随意填写
6
7
Authorization callback URL：# 网站URL，https://wang7211401.github.io

搭建 gitalk

1.创建 gitalk.swig 文件

定位到路径 /themes/next/layout/_third-party/comments/，创建gitalk.swig文件，内容：

1
{% if page.comments && theme.gitalk.enable %}
2
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
3
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
4
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
5
    <script type="text/javascript">
6
        const gitalk = new Gitalk({
7
          clientID: '{{ theme.gitalk.ClientID }}',
8
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
9
          repo: '{{ theme.gitalk.repo }}',
10
          owner: '{{ theme.gitalk.githubID }}',
11
          admin: ['{{ theme.gitalk.adminUser }}'],
12
          id: md5(window.location.pathname),
13
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
14
        })
15
        gitalk.render('gitalk-container')
16
    </script>
17
{% endif %}

这里，解决了label长度不能超过50的问题, 用了一个md5，同时采用了 windows.location.pathname来区分不同的文章。

2.引入gitalk.swig

在同级目录下的index.swig里面加入

1
{% include 'gitalk.swig' %}

3.修改comments.swig，添加gitalk

修改 /themes/next/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

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

4.新建gitalk.styl样式

找到/themes/next/source/css/_common/components/third-party/然后创建gitalk.styl文件，内容如下：

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

5.引入gitalk.styl样式

在同级别的third-party.styl中导入：

1
@import "gitalk";

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

1
gitalk:
2
  enable: true
3
  githubID: wang7211401 #你的github ID
4
  repo: wang7211401.github.io
5
  ClientID: 0dea18fbxxxx350441 # 创建 OAuth App ClientID
6
  ClientSecret: 866c25xxx # 创建 OAuth App ClientSecret
7
  adminUser: wang7211401 # 用户名
8
  distractionFreeMode: true

gitalk 评论搭建完成了，快去试试吧