快速添加评论
因为next最新版本已经集成utterances评论，所以可以快速添加。
安装utterances github app 到你的库中
utterances app
点击安装，选择一个仓库。
修改next主题的配置文件
进入_config.yml找到以下字段
1
2
3
4
5
6
7
| utterances:
enable: true
repo: admin/adim.github.io # Github repository owner and name
# Available values: pathname | url | title | og:title
issue_term: pathname
# Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
theme: github-light #这个是评论主题的颜色
|
将enable属性改成true
找到comments
修改active 属性为 utterances
1
2
| comments
active:utterances
|
finish
utteranc.es
在主页上可以找到不同主题颜色的预览。
手搓版本
注意一下，集成版本用的是utterances，我的手搓版本去掉了s，其实没什么区别，只是名字不一样。问就是懒得改了……
创建一个index文件
…\themes\next\layout\_third-party\comments\index.swig
有的人可能已经有index文件了，没有的话直接新建一个。
1
| {% include 'utterance.swig' %}
|
创建一个utterance文件
D:…\themes\next\layout\_third-party\comments\utterance.swig
新建。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| {% if theme.utterance.enable %}
<script type="text/javascript">
(function() {
// 匿名函数，防止污染全局变量
var e = document.createElement('script');
e.type = 'text/javascript';
e.async = true;
e.setAttribute('issue-term','{{ theme.utterance.issue_term }}')
e.setAttribute('theme','{{ theme.utterance.theme }}')
e.setAttribute('repo','{{ theme.utterance.repo }}')
e.crossorigin = 'anonymous';
e.src = 'https://utteranc.es/client.js';
// content 是要插入评论的地方
document.getElementById('utterance-container').appendChild(e);
})();
</script>
{% endif %}
|
添加一段代码
D:…\themes\next\layout\_partials\comments.swig
加入以下代码：
1
2
3
4
5
6
7
8
9
10
| {%- if page.comments %} # 这是已经有的代码，将代码插入这里
{% elseif theme.utterance.enable %}
<div class="comments" id="comments">
<div id="utterance-container">
{% include '../_third-party/comments/utterance.swig' %}
</div>
</div>
{%- endif %} # 这是已经有的代码，将代码插入这里
|
新建js文件
D:…\themes\next\scripts\filters\comment\utterance.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| /* global hexo */
'use strict';
const path = require('path');
// Add comment
hexo.extend.filter.register('theme_inject', injects => {
let theme = hexo.theme.config;
if (!theme.utterance.enable) return;
injects.comment.raw('utterance', '<div class="comments" id="utterance-container"></div>', {}, {cache: true});
injects.bodyEnd.file('utterance', path.join(hexo.theme_dir, 'layout/_third-party/comments/utterance.swig'));
});
|
安装utterancesgithub app 和 修改主题的config文件
这一步跟已集成utterances包的hexo操作一样。
下载安装utterances的githubapp，然后修改主题的配置文件。
因为我手搓版本用了utterance，所以在配置文件中也要记得去掉s。
ps.因为试了很多教程，我已经不知道哪段代码具体是哪里挖出来的了……总之感谢各位的教程。
fin.