sunwengang blog

Hexo Next主题集成gitalk评论系统

字数统计: 538阅读时长: 2 min
2019/07/13 Share

在我的Github+hexo搭建的网站中,使用github的gitalk评论系统。gitalk官方示例官方文档

register app in github

在Github注册一个application,点击创建

参数说明:
Application name: # 应用名称,随意
Homepage URL: # 网站URL,如https://wizzie.top/
Application description # 描述,随意
Authorization callback URL:# 网站URL,https://wizzie.top/

创建完成后记录好Clien信息

Client ID、
Client Secret

配置_config.yml

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

1
2
3
4
5
6
7
8
gitalk:
enable: true
githubID: github帐号 # 例:asdfv1929
repo: 仓库名称 # 例:asdfv1929.github.io
ClientID: Client ID
ClientSecret: Client Secret
adminUser: github帐号 #指定可初始化评论账户
distractionFreeMode: true

提交

hexo clean
hexo g
hexo deploy


以下在最新的Next代码库都已经添加,无需修改。

修改gitalk.swig文件(最新的Next版本已有)

修改/layout/_third-party/comments/gitalk.swig文件,添加(最新的Next版本已有,无需修改):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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(最新的Next版本已有)

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

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

修改index.swig(最新的Next版本已有)

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

1
{% include 'gitalk.swig' %}

修改gitalk.styl(最新的Next版本已有)

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

1
2
3
4
.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(最新的Next版本已有)

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

1
@import "gitalk";

常见问题

GET https://api.github.com/user 401 (Unauthorized)

未找到相关的 Issues 进行评论
未找到解决办法
https://github.com/gitalk/gitalk/issues/183

CATALOG
  1. 1. register app in github
    1. 1.1. 在Github注册一个application,点击创建
    2. 1.2. 创建完成后记录好Clien信息
  2. 2. 配置_config.yml
  3. 3. 提交
  4. 4. 修改gitalk.swig文件(最新的Next版本已有)
  5. 5. comments.swig(最新的Next版本已有)
  6. 6. 修改index.swig(最新的Next版本已有)
  7. 7. 修改gitalk.styl(最新的Next版本已有)
  8. 8. third-party.styl(最新的Next版本已有)
  9. 9. 常见问题
    1. 9.1. GET https://api.github.com/user 401 (Unauthorized)