hexo主题yilia自定义添加valine评论系统

2018-09-05

寻寻觅觅-hexo好用的评论系统

Hexo的评论系统有很多，常见的有以下几个

多说，网易云跟帖，畅言，来必力（LiveRe），Disqus，Hypercomments，valine

多说和网易云已经倒下了，其次畅言需要备案，Disqus，Hypercomments和LiveRe都是国外的，加载速度贼慢，甚至有被墙的可能，寻觅了很久之后，终于找到口碑比较好的valine - 一款快速、简洁且高效的无后端评论系统。

valine特性

快速
安全
Emoji 😉
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
文章阅读量统计 v1.2.0+

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo 等博客程序在使用Valine。
但是我喜欢的yilia主题不支持，所以想着如何自定义valine评论系统。

yilia主题如何支持valine评论系统

google搜啊搜，果然还是搜到相关轮子。

新增对Valine评论系统的支持
 加个Valine评论系统

下面整理下实践步骤：

修改主题模板

新增配置项 /themes/yilia/_config.yml

新增下面代码

#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 #评论分页

其中verify和notify一定要是false，不要打开，不要手贱
avatar参数详见https://valine.js.org/avatar
在这里设置头像https://cn.gravatar.com/

新增模板和局部样式 /themes/yilia/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>
    <% } %>

新增 /themes/yilia/layout/_partial/post/valine.ejs

<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>