hexo的yilia主题下加载valine评论

2018-11-26

现在这份工作的公司,无线网不能正常加载来必力评论,但是用手机流量就能加载.但是我也没办法解决这个事情.一直都想要换个别的评论了…从gitment到畅言,再到来必力,总是感觉不太完美,不过现在发现了valine,这个评论真心很赞,极简,又不用登录,今天专门抽个时间来换了下评论,本来还想去官网看看API的,但是一百度就是一大把的教程,想了下还是算了,换评论这种一次性的开发工作,会用就行,操作方法完整的借鉴了我百度到一个博客网站上的教程,所以下面的教程内容也绝大部分都是转载自这个博客—-张海鑫的Blog,编码内容完全一致.

1.获取valine评论所对应的APP ID和APP Key

先去leancloud注册一个帐号,然后进入控制台后点击创建应用,如下图:

选开发版就行了.博客不会太火,请求数量完全够用.
应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了:

2.添加配置与代码

在hexo的themes\yilia_config.yml中加入下列代码配置valine属性:

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

代码是转载的,中间转载的博主对样式进行了修改，改成了响应式布局，宽度应该能够自动和上面的文章部分对齐,这样会更美观,经测有效,不管是在PC端还是移动端.浏览评论都很精美.
在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>

然后就是hexo g hexo d生成静态文件并提交就OK了.
这个评论目前还是很喜欢的,一不用登录.二又不花哨,还不像畅言一样有广告植入,第三方授权其实感觉基本上没人在用,不如直接匿名评论来得好.
分享至此结束,再次感谢博主张海鑫的Blog的分享,以上代码全部照搬自他的博客,但是我的博客换了评论.我也希望能在这里发个博客纪念一下这个重要的日子,新的评论也加载好了.欢迎大家来评论.