hexo yilia主题添加评论系统详细教程

序言

其实网上关于Hexo的博客添加Valine评论系统的是教程很多的，但是大多针对Next那个主题，确实那个主题各方面的功能都做得很完善了，但是我还是比较喜欢yilia这个主题，然而这两个主题的文件结构就很不一样，教程并不能直接用到yilia这个主题上来。

在我使用yilia主题添加Valine评论系统的过程中着实遇到不少问题，个人没有在网上找到一份完全针对yilia主题添加valine评论系统的详细教程，所以写下这篇教程，也算是写的笔记吧，也许有后来者能用得上。

添加相关代码

yilia主题支持了多说、网易云跟帖、畅言、Disqus以及Gitment，但似乎没有写好的valine代码，所以我们首先要手动添加相关代码。

下面的代码来源于yilia主题下的一个Issue：新增对Valine评论系统的支持，可以参照一下（不想踩坑的话请就看我这篇文章，不用谢我），但是对小白来说可能并不太清楚，代码添加到某一个文件，但是并没有说具体添加到什么位置，所以我根据自己的经历写一下对小白来说更加切实的步骤。

需要修改的有三个地方，都是主题目录下对应的文件，不是博客目录，修改后记得保存。

1. config.yml

yilia主题根目录下的_config.yml，不是博客根目录下的_config.yml，打开后添加到什么位置都可以，但是建议根据已经写好的几个评论系统就对应的添加到#5、Gitment的下方

#6、Valine https://valine.js.org
valine: 
 appid: #Leancloud应用的appId
 appkey: #Leancloud应用的appKey
 verify: false #验证码，verify和notify这两个最好就别动了
 notify: false #评论回复提醒
 avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
 placeholder: Just go go #评论框占位符

2. yilia\layout_partial\article.ejs

这段代码改过一点点，添加了一个判断条件如果在博客首页就不执行下面的代码（具体添加了下面代码的第一行和最后一行），也就是只在阅读全文的时候才在文章底部显示评论框，原Issue下的代码不含这个判断条件，也就是首页每篇博客下方都会有一个评论框，这应该不是我们想要的。 代码直接插入在最后面就可以

<% 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.valine.ejs

这个文件是没有的，按照路径yilia\layout_partial\post\valine.ejs新建一个valine.ejs，再把下面的代码添加添加进去，保存，注意和Issue给出的代码可能不太一样，说过了不想踩坑请直接使用我给出的。

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

安装评论

接下来就要使用到Leancloud了，大概就是作为我们Valine评论系统的服务器，因为Valine首页就介绍了Valine是“一款快速、简洁且高效的无后端评论系统”，自行注册一个账号并登录。

创建一个应用，应用名看个人喜好。

选择刚刚创建的应用>设置>选择应用 Key，然后你就能看到你的App ID和App Key了，参考下图：

分别复制App ID和App Key粘贴到前面设置的主题根目录下的_config.yml里对应位置，注意“:”后面必须要有一个空格，如图：

为了数据安全，再填写一下安全域名，应用>设置>安全设置中的Web 安全域名，如果是Hexo一般填写自己博客主页的地址和http://localhost:4000/就可以了，如下图：

到这里，你的评论系统就已经可以工作了！
当然修改了相关代码需要重新部署博客，三步操作：

$ hexo clean
$ hexo g
$ hexo s #本地实时测试用http://localhost:4000/访问

自己写条评论试试呢，评论的数据会保存到Leancloud你创建的应用里，具体可以登录Leancloud，选择应用>存储>Comment，评论的所有相关信息都可以在这儿看到：

参考博客