加个Valine评论系统


现在我在 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>

这里要注意一下 el 参数,我就是被这个坑爹的参数给坑了半个多小时,el 参数要和上面的id一致。
具体有哪些参数可以自己定义,可以看这里 https://valine.js.org/configuration

测试效果

完成了上面的工作,就可以试试能不能正常使用了

注意,在本地测试的时候是不能正常加载评论的,因为你设置了域名限制

评论样式

原文链接

叉叉白


  转载请注明: My blog 加个Valine评论系统

 上一篇
Hexo+Github搭建博客 Hexo+Github搭建博客
搭建一个属于自己的博客
2018-06-01
本篇 
加个Valine评论系统 加个Valine评论系统
现在我在 Hexo 的 yilia 主题上用上了 valine 评论系统。 前几天无意中看到了关于 valine 的评论,看了一下,感觉很不错 正好我对来必力不太满意。那就研究一下,看看能不能用上。 先附上之前来必力的教程 ☞简单记
2018-06-01
  目录