Hexo Next主题集成gitalk评论系统

在我的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

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2019-2020 sunwengang
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯咖啡吧~

支付宝
微信