Hexo NexT主题集成Gitalk评论

  Gitalk是一个基于 Github Issue 和 Preact 开发的评论插件。这里记录下在NexT主题中集成的相关步骤。

一个基于 Github Issue 和 Preact 开发的评论插件

注册应用 (Register Application)

可直接打开:https://github.com/settings/applications/new 进行注册(此操作需要登录)

  1. 登录github,点击个人头像 –> Settings

eTVI8x.png

  1. 选择 Developer settings –> OAuth Apps –> 点击 new OAuth App按钮。打开如下页面:

eTuw9A.png

  1. 注册成功后,页面跳转,填写如下参数:
1
2
3
4
5
6
7
8
9
# 参数说明:

Application name: # 应用名称,随意填写

Homepage URL: # 网站URL,如https://leafjame.github.io

Application description # 描述,随意填写

Authorization callback URL:# 网站URL,https://leafjame.github.io

wo3P.png

其中Client IDClient Secret在后面的配置中用到

开始搭建

以下操作适合next的hexo主题的gitalk评论系统搭建。步骤大概如下:

  1. 创建gitalk.swig文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   {% 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 src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.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: md5(window.location.pathname),
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

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

这里的ClientIDClientSecret就是刚才创建的APP的对应东西

最后你的一个博客或者一个网址需要建立一个repo和一个对应的app,来装载comments。上面的代码你不需要修改,我们在后面的config里面再来具体配置,第一步完成。

  1. 引入gitalk.swig

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

1
{% include 'gitalk.swig' %}
  1. 修改comments.swig,添加gitalk

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

1
2
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
  1. 新建gitalk.styl样式

定位到/themes/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;
  1. 引入gitalk.styl样式

然后在同级别的third-party.styl中导入:

1
@import "gitalk";
  1. 修改主题配置文件

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

1
2
3
4
5
6
7
8
gitalk:
enable: true
githubID: leafjame
repo: leafjame.github.io
ClientID: 0dea18fbxxxx350441
ClientSecret: 866c25axxxx7dd51abdc8f2b18bcab4
adminUser: leafjame
distractionFreeMode: true

说明:

1
2
3
4
5
6
7
githubID : 你的github ID,用来说明你是个人还是某个组织的;

repo : 你要新建一个repo来保存这些comments,这里repo就随便新建一个就行;

ClientID 和 ClientSecret : 就是文章开头新建APP的那些,请注意,这个一定要和你部署的网站的对应起来,一个网站对应一个这个client;

adminUser: 你的admin 用户名,通常就是你自己

以上就是NexT中添加gitalk评论的配置,博客上传到GitHub上后,打开页面进入某一博客内容下,就可看到评论处。

点击查看

本文标题:Hexo NexT主题集成Gitalk评论

文章作者:北宸

发布时间:2019年08月09日 - 15:23:45

最后更新:2019年09月14日 - 16:40:09

原始链接:http://leafjame.github.io/posts/4104854797.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
0%