评论区选型
yilia-plus提供changyan、Disqus、Gitment、Giteement四种第三方评论，其设置均在_config.yml里，根据官方说明，changyan需要域名备案，Disqus在国外，这两种我就直接放弃了。不过离谱的是，我折腾了半天Gitment、Giteement，结果发现作者的演示界面中这两个也不能正常使用......
Valine
由于国内外评论组件都不好使，而且又需要登录，那直接弄个不需要登录的评论组件算了。Valine就是这样一款方便好用的评论组件。Valine诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。
部署步骤
LeanCloud注册
Valine基于LeanCloud，所以请先按照官方快速上手获取APP ID和APP Key，现在页面有所更新，所以通过认证，建立应用后，具体的信息查询如下图所示：
修改主题下_config.yml
#6、Valine https://valine.js.org
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
placeholder: Just go go #评论框占位符
pageSize: 10 #每页评论数
requiredFields: nick,mail #设置必填字段，可选nick，mail以及link
修改layout/_partial/article.ejs
这个在官方下面的评论区看到的，改成了响应式布局，宽度应该能够自动和上面的文章部分对齐。
<% 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>
<% } %>
新建layout/_partial/post/valine.ejs
参考网上教程，我做了一些修改，加上必填功能，这样能知道评论者的基本信息，便于管理和回复。
<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
// 检验必填字段是否有效
var INFO = ['nick', 'mail', 'link'];
var requiredFields = '#{ theme.valine.requiredFields }'.split(',').filter(function(item){
return INFO.indexOf(item) > -1
});
requiredFields = requiredFields.length == 0 ? INFO : requiredFields;
window.onload = function() {
new Valine({
el: '#vcomment',
notify: notify,
verify: verify,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar:"<%= theme.valine.avatar %>",
pageSize: "<%= theme.valine.pageSize %>",
requiredFields: requiredFields
});
}
</script>
最终效果
执行命令hexo clean && hexo s后在浏览器中查看效果，应该如下图所示：
