盒子
盒子
文章目录󰁋
  1. 一、申请GitHub Application
  2. 二、fexo配置主题
  3. 三、next主题配置

Hexo博客接入gitalk评论系统

官方文档 https://github.com/gitalk/gitalk/blob/master/readme-cn.md

一、申请GitHub Application

https://github.com/settings/applications/new

image.png

点击注册后,页面跳转如下,其中Client IDClient Secret在后面的配置中需要用到,到时复制粘贴即可

二、fexo配置主题

这里以我个人博客的主题来配置

themes/fexo/layout/_partial/component/新建一个gitalk.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (page.comments && theme.gitalk.enable){ %>
<div id="gitalk-container"></div>
<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>
<% } %>

themes/fexo/layout/_partial/component/comments.ejs中加入

1
2
3
4
5
<div class="fexo-comments <%= className %>">
<%- partial('disqus') %>
<%- partial('duoshuo') %>
<%- partial('gitalk') %> <!-- 加入上面新建的 -->
</div>

themes/fexo/layout/_partial/article.ejs中的article文章后面加入

1
2
<!-- 使用gitalk作为评论系统 -->
<%- partial('gitalk') %>

/theme/fexo/source/css/style.css中加入

1
2
3
4
5
6
7
/**gitalk css**/
.gt-header a, .gt-comments a, .gt-popup a{
border-bottom: none;
}
.gt-container .gt-popup .gt-action.is--active:before{
top: 0.7em;
}

在主题配置文件_config.yml加入

1
2
3
4
5
6
7
8
9
10
# 评论配置
gitalk:
enable: true
githubID: poetries
repo: poetries.github.io # 例:poetries.github.io
owner: poetries
ClientID: ''
ClientSecret: ''
adminUser: poetries #指定可初始化评论账户
distractionFreeMode: true

然后回到文章页面,刷新页面后授权初始化就看到了

三、next主题配置

新建/layout/_third-party/comments/gitalk.swig文件,并添加内容

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 %}

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

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

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

1
{% include 'gitalk.swig' %}

新建/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;

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

1
@import "gitalk";

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

1
2
3
4
5
6
7
8
9
10
# 评论配置
gitalk:
enable: true
githubID: poetries
repo: poetries.github.io # 例:poetries.github.io
owner: poetries
ClientID: ''
ClientSecret: ''
adminUser: poetries #指定可初始化评论账户
distractionFreeMode: true
支持一下
扫一扫,支持poetries