Yilia 主题接入valine评论系统

前言

---

搭建博客的时候 想要接入一个评论功能,查了很多资料，终于找到一个方案，做个记录方便自己方便他人。
1.多说（现在已经不能用）
2.网易云跟帖（现在已经不能用）
3.畅言（需要提供备案号）
4.来必力（LiveRe）
5.Disqus
6.Hypercomments
7.Valine
最后选用valine这个插件，就因为它简洁

正文

准备工作

1.去valine注册一个账号https://leancloud.cn/dashboard/login.html#/signup，注册成功之后创建一个免费的应用
2.创建好之后进入创建的应用，选择左下角的设置>应用Key，然后就能看到你的appid和appkey
3.在应用里面的安全中心加入自己的域名。

加入代码

1.在hexo加入valine的评论配置

加入代码的文件在hexo的 themes/yilia/_config.yml 加到文件的最后即可

valine: 
  appid: 5Luh2LTjNL7BdW3tUc6gN2Yb-gzGzoHsz #Leancloud应用的appId
  appkey: ySLSX2eHHgjme7X8QzLU6YYL #Leancloud应用的appKey
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! #评论框占位符
  pageSize: 10

2.然后在hexo的 themes/yilia/layout/_partial/article.ejs加入代码

注意这段代码需要放置到<% if (!index && post.comments){ %>中, 这样首页就不会出现评论栏.

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

或者直接把下面这段放到文件的最后

<% if (!index){ %>
	<% 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>
	<% } %>
<% } %>

3.在hexo的 themes/yilia/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/dist/Valine.min.js'></script>
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.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,
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar:"<%= theme.valine.avatar %>",
    });
</script>

4.最后重新部署一下, 就能看到效果了