终于有Valine了!!!网上关于给没有集成Valine的主题添加Valine评论系统的文章并不是很详细,在各种踩坑后,终于实现了,下面来分享一下具体的操作。
在仔细阅读了主题的源代码后,找到了post.ejs,其内容如下:
1
2
3
4
5
6
|
<div id="single">
<%- partial("_partial/post/header")%>
<div class="section">
<%- partial("_partial/post/article")%>
</div>
</div>
|
插入一段
1
2
3
|
<div Class="Valine">
<%- partial("_partial/post/valine")%>
</div>
|
便可以新建一个段来放valine。(其实更优雅的做法应该把Valine插入到article里面,但是我在article.ejs的gitalk部分插入了这段话,不知道为什么没有效果。甚至会使hexo在生成网页时报错,很奇怪。)
接下来要建立valine.ejs,放在前面指定的目录_partial/post里,使每次输出页面时插入valine的内容。现在明白写ejs其实就是写html,然后可以用转义符来取得一些内容。(但是还有好多转义符的用途不很清楚,也没有尝试过,目前只是为了解决问题而去做了简单了解。)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<div id="vcomment" class="comment"></div>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
window.onload = function() {
new Valine({
el: '.comment',
notify: notify,
verify: verify,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar:"<%= theme.valine.avatar %>",
serverURLs: "<%= theme.valine.serverURLs %>",
});
}
</script>
|
然后在主题配置文件(_config.yml)中加入
1
2
3
4
5
6
7
8
9
10
11
12
|
##Valine
valine:
enable: true #打开valine评论功能
appid: "4GEX6oT1MjbiYiDDiG5t17L5-MdYXbMMI"
appkey: "n8d7enjnlLcKU6tH4VxmSHAA"
notify: false #邮件提醒
verify: false #评论时是否有验证码
placeholder: 说点什么吧!
avatar: hide #评论者的头像
guest_info: nick # custom comment header
pageSize: 10 # pagination size
serverURLs: https://4gex6ot1.api.lncldglobal.com
|
其中valine.ejs中例如<%= theme.valine.appid %>的部分就是应用了配置文件里的 appid: "4GEX6oT1MjbiYiDDiG5t17L5-MdYXbMMI"这一句。
另外,leancloud的国际版原有的us.api.lncldglobal.com已经停用了(见此),故要比Valine官网教程中的代码里加上有关severURLs那一行来指定新的地址。
现在就可以享用Valine了!