加个Valine评论系统

Hexo

blog

发布日期: 2018-06-02

文章字数: 790

阅读时长: 3 分

阅读次数:

现在我在 Hexo 的 yilia 主题上用上了 valine 评论系统。

前几天无意中看到了关于 valine 的评论，看了一下，感觉很不错

正好我对来必力不太满意。那就研究一下，看看能不能用上。

先附上之前来必力的教程

☞
简单记录一下的过程

主要参考 @Deserts 、@云淡风轻

☞
部署云引擎

先简单看了一下，这个评论系统的基础是 LeanCloud，先去注册一个账号，点这里过去
然后创建应用，应用名字什么的随意
创建应用之后就可以得到 Key 了，这个等一下会用到的

然后设置安全域名

部署云引擎，这一部分去看 @Deserts 博客里关于云引擎部署的部分吧，反正原理我不懂
云引擎环境变量我可以简单解释一下（新版增加了不少环境变量，怎么部署请看原站）

☞
修改主题模板

这里基本上是照抄 https://github.com/litten/hexo-theme-yilia/pull/646

_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/configuration.html

在这里设置自定义头像 https://cn.gravatar.com/

themes\yilia\layout_partial\article.ejs

重写了一下 style，应该可以做到响应式布局了

<% 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/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine/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 %>
});
if(window.location.hash){
var checkExist = setInterval(function() {
   if ($(window.location.hash).length) {
  $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);
  clearInterval(checkExist);
   }
}, 100);
}
</script>