NEXT主题8.1版本安装Valine

前言

博客已经建立十多天了,一开始我是不准备开启评论的,但在几个博客圈的几个朋友的一番说辞下,还是决定把评论开启起来。

我其实是挺喜欢Valine的,主要是因为喜欢它的简洁。但在NEXT最新版本的主题上,已经把这个主题移除。相关的说明如下:

官方说明链接:https://github.com/next-theme/hexo-theme-next/issues/4

对于我来说,隐私什么的都是浮云,哪个方便就怎样来吧。所以我决定还是采用Valine这个评论,毕竟国内好用的第三方评论系统就那么几个,而且我只对Valine有点了解。

安装Valine

1
npm install next-theme/hexo-next-valine

把插件装好后,我们只需到主题设置里添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: false
appId: # your leancloud application appid
appKey: # your leancloud application appkey
serverURLs: # When the custom domain name is enabled, fill it in here
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
meta: [nick, mail, link] # Custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP

理论只须更改appIdappKey这两项,要注意空格问题。

遇到的问题

顺利安装完成后,却发现出现401这个错误,再次确认不是设置的问题。在网上寻找得知,是因为插件里引用的CDN出了问题,没办法,只好自己着手修改一下。

在hexo站点目录找到valine.njk这个文件,路径如下。

1
node_modules/hexo-next-valine/valine.njk

添加一行

1
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>

将jsderlivr这个CDN换成unpkg的

1
https://unpkg.com/valine@1.4.14/dist/Valine.min.js

最终效果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
{%- set serverURLs = config.valine.serverURLs or 'https://' + config.valine.appId.slice(0, 8) | lower + '.api.lncldglobal.com' %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script>
NexT.utils.loadComments('#valine-comments', () => {
NexT.utils.getScript('https://unpkg.com/valine@1.4.14/dist/Valine.min.js', () => {
new Valine(Object.assign({{ config.valine | safedump }}, {
el: '#valine-comments',
path: {{ url_for(page.path) | replace(r/index\.html$/, '') | safedump }},
serverURLs: {{ serverURLs | safedump }}
}));
}, window.Valine);
});
</script>