使用gittalk实现hexo博客评论功能

  • 关于gitalk
  • 使用gitalk实现hexo博客评论功能
  • 其他

一. 关于gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

特性

  • 使用GitHub登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeMode 为 true 开启)
  • 快捷键提交评论 (cmd|ctrl + enter)


二. gitalk实现hexo博客评论功能

Register Application

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

1

参数说明:

Application name: # 应用名称,随意

Homepage URL: # 网站URL

Application description # 描述,随意

Authorization callback URL:# 网站URL

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

2

新建gitalk.swig

在主题文件夹下新建/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 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

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

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

修改index.swig

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

1
{% include 'gitalk.swig' %}

新建gitalk.styl

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

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

1
@import "gitalk";

修改_config.yml

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

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


三. 其他

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

参考文章

https://asdfv1929.github.io/2018/01/20/gitalk/

https://liujunzhou.top/2018/8/10/gitalk-error/



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

本文标题:使用gittalk实现hexo博客评论功能

文章作者:Jacky Cheng

发布时间:2019年03月18日 - 21:03

最后更新:2019年07月17日 - 10:07

原始链接:https://cjjkkk.github.io/gitalk/

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


想喝快乐水