「Hexo」gitalk 评论

各种评论服务都挂了后,感觉还是 github 最靠谱,Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。
这里记录 Hexo 使用 gitalk 作为评论插件的修改方法(支持 markdown + mathjax)。

使用方法

Github Application

Gitalk 需要 Github Application,如果没有请点击 Register a new OAuth application 注册,注意 Authorization callback URL 要填写使用插件的域名,比如我的博客就填写的 https://blog.xehoth.cc

安装 gitalk

1
npm i --save gitalk

然后我们可以在 node_modules 找到 gitalk,我们只需要其中 dist 目录下的 gitalk.cssgitalk.css.mapgitalk.jsgitalk.js.map,将其复制到主题对应目录下。

注意:我尝试过使用 gitalk.min.js,但出现了一些玄学错误,所以这里用的 gitalk.js,然后用个插件压缩一下就好。

引入 & 调用

在主题 layout/_partial 里找到 head.ejs 在其中加入 gitalk.jsgitalk.css 的引入。

1
2
<link rel="stylesheet" href="<%- theme.root_url %>/css/gitalk.css">
<script src="<%- theme.root_url %>/js/gitalk.js"></script>

当然你也可以直接引入 cdn……

然后在 article.ejs 中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% if (!index && post.comments){ %>
<div id="gitalk-container" style="display: inline-block; width: 90%; margin-left: 4%;"></div>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: 'Github Application Client ID',
clientSecret: 'Github Application Client Secret',
repo: 'Github repo',
owner: 'Github repo owner',
admin: ['Github repo collaborators'],
});

gitalk.render('gitalk-container')
</script>
<% } %>

其中 clientIDclientSecret 都可以在 Github Application 找到,repo 只用来存放评论的项目,你可以新建一个,然后填项目名,另外两个填自己的 id 就好。

添加 mathjax 支持

footer.ejsafter-footer.ejs 中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/x-mathjax-config">
var mathId = document.getElementById("gitalk-container");
MathJax.Hub.Config({
showProcessingMessages: false,
messageStyle: "none",
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ["$", "$"] ],
displayMath: [ ["$$","$$"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'],
ignoreClass:"comment-content"
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"]
}
});
if (mathId != null) {
window.onload = function() {
$(".gt-container").bind("DOMNodeInserted", function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub], document.getElementById("gitalk-container"));
})
MathJax.Hub.Queue(["Typeset", MathJax.Hub], mathId);
}
}
</script>
<script src="<%- theme.CDN.mathjax %>?config=TeX-AMS-MML_HTMLorMML" async="async">
</script>

由于 gitalk 的输入框会引起已经渲染的公式失效,所以我们用 JQuery 监听 gt-container 就行了。

# Hexo

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×