在Github上搭建了Hexo博客系统，主题采用yilia，这里给博客添加valine评论系统。
1.首先注册https://leancloud.cn ，创建应用，然后在“设置”中的“应用Key”获取App ID以及App Key.
2.在Hexo主题中的_config.yml中添加1
2
3
4
5
6
7
8
9
10#6、Valine https://valine.js.org
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: '' #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
avatar_cdn: 'https://sdn.geekzu.org/avatar/' #头像CDN
placeholder: '瞎白话' #评论框占位符
pageSize: 15 #评论分页
3.打开 yilia/layout/_partial/article.ejs文件，在最后面添加1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<% if ( !(index && theme.show_all_link) ){ %>
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<section id="comments" class="comments">
<style>
.comments{margin:30px;padding:10px;background:#fff}
@media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
</style>
<%- partial('post/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
</section>
<% } %>
<% } %>
注意这里的1
if ( !(index && theme.show_all_link) )
指的是打开全文才会有评论系统。
4.在yilia/layout/_partial/post下创建valine.ejs文件，写入1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div id="vcomment" class="comment"></div>
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
new Valine({
av: AV,
el: '#vcomment',
notify: notify,
verify: verify,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>",
avatar_cdn: "<%= theme.valine.avatar_cdn %>",
pageSize: <%= theme.valine.pageSize %>
});
</script>
这样就完成了。
详情可以参照
