个人博客_添加评论区

评论区选型

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后在浏览器中查看效果，应该如下图所示：