Hexo:(专题一)Hexo Next主题中集成评论系统

集成gitalk评论系统

gitalk基本介绍

gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。
gitalk中文文档gitalk在线示例

Hexo Next主题中集成gitalk
1. Register Application

在GitHub上注册新应用,链接:https://github.com/settings/applications/new

image

参数说明:

  • Application name: # 应用名称,随意
  • Homepage URL: # 网站URL,如https://chentging.github.io
  • Application description # 描述,随意
  • Authorization callback URL:# 网站URL,如https://chentging.github.io
    注意: 如果你的Github Pages已经绑定了域名,这两个参数Homepage URLAuthorization callback URL需要写你自己的域名。
2. 注册成功后会得到Client IDClient Secret两个参数,会在主题配置文件中用到
3. 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 %}
4. comments.swig
1
2
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
1
2
3
4
5
6
{% elseif theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
{% endif %}
5. index.swig
1
{% include 'gitalk.swig' %}
6. 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;
7. third-party.styl
1
@import "gitalk";
8. 修改主题配置文件
1
2
3
4
5
6
7
8
9
10
11
gitalk:
enable: true
githubID: 你的Github账号 # 例:xjt927
repo: 你的Github Pages项目名称 # 例:xjt927.github.io
ClientID: 你的ClientID
ClientSecret: 你的ClientSecret
adminUser: 你的Github账号 #指定可初始化评论账户
perPage: 15 #每页多少个评论
pagerDirection: last #排序方式是从旧到新(first)还是从新到旧(last)
createIssueManually: true #如果当前页面没有相应的 isssue ,且登录的用户属于 admin,则会自动创建 issue。如果设置为 true,则显示一个初始化页面,创建 issue 需要点击 init 按钮。
distractionFreeMode: true #是否启用快捷键(cmd|ctrl + enter) 提交评论.
-------------本文结束  感谢您的阅读-------------
你的支持是我创作的最大的动力
0%