前言

昨天看了朋友通过GitHub搭建的博客，再加上自己很久以前就有了这个想法，今天便上网翻阅各种相关知识，最后博主感觉用Hexo + GitHub Pages搭建的博客看起来不错，便开始了搭建。搭建过程中在选择主题的时候感觉yilia主题不错，于是便搭起了一套yilia主题的博客。大家可以参考，我的博客，后来搭建完成之后再添加评论系统的时候遇到了一些困难，网上翻阅了各种评论系统，博主也总结了一下：

1. 多说（现在已经不能用）
   
2. 网易云跟帖（现在已经不能用）
   
3. 畅言（需要提供备案号）
   
4. 来必力（LiveRe）
   
5. Disqus
   
6. Hypercomments
   
7. Valine
   
   最终博主选择Valine，但是发现网上yilia主题使用Valine的帖子很少，反正博主没有找到，最终博主在GitHub中发现了方案。

正文

首先我们在hexo\themes\yilia_config.yml中加入Valine的相关配置：

#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 #评论框占位符

然后在hexo\themes\yilia\layout_partial\article.ejs中加入Valine:

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

这里对样式进行了修改，改成了响应式布局，宽度应该能够自动和上面的文章部分对齐。




最后我们需要加入Valine的方法，在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>
   var notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }
</script>

最终重新生成、部署，然后刷新一下，就可以看到效果了~

赏

谢谢你请我吃糖果

支付宝

微信