Valine - 一款快速、简洁且高效的无后端评论系统

一、Valine简介

Valine - 一款快速、简洁且高效的无后端评论系统。
Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

更新-自定义样式：

二、使用方法

1.获取 APP ID 和 APP KEY

1. 在Leancloud用邮箱注册登录
   需要实名制认证，邮箱认证。

2. 创建Valine应用
   命名为 Valine，方案选择开发版，即可以在一定的用量限制下免费运行。

3. 进入创建好的应用>设置>选择应用 Key，就能获取到 App ID 和 App Key。

4. 为了您的数据安全，请填写应用>设置>安全设置中的Web 安全域名：
   

2.配置Sakura

1. 编辑 sakura/_config.yml，找到对应的模块，修改配置如下：

   valine: true
   v_appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz
   v_appKey: 3opMyv2Vyx3mHa0IWitRGSoi
   

2. 重新发布Hexo测试
   进入helloworld文章，发布评论：
   
   leancode也会相应记录一条数据：
   

3. 深度美化
   MyWeb\themes\sakura\layout\_partial目录下，修改comment.ejs:
   原样式：

   <% if (theme.valine && post.comments) { %>
   
   
   <% } %>
   

   可根据需要修改。

   valine的原作者暂时还没有对hexo（sakura）主题进行配置，
   这里是原作者已更新的Hexo支持的主题

三、sakura配置valine

1. 基本使用

以下配置全参考于：valine原作者配置hexo-theme-yilia主题

在前两步的基础上，
修改sakura主题配置：（加了enable标志和其他属性）
（之前一直用mm头像，现在改为小怪物）

# Valine ##极简留言功能
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true ##打开valine评论功能true
  appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz
  appKey: 3opMyv2Vyx3mHa0IWitRGSoi
  notify: false #评论mail回复提醒
  verify: true #验证码
  visitor: false #统计阅读量
  avatar: monsterid # Gravatar style : mp/identicon/monsterid/wavatar/retro/hide
  guest_info: nick #,mail,link # custom comment header
  pageSize: 10
  palaceholder: 你是我一生只会遇见一次的惊喜 # Comment Box placeholder

修改头部的声明：themes\sakura\layout\_partial\head.ejs
（v_appId改为appId）

  mashiro_option.v_appId = "<%= theme.valine.appId %>";//
  mashiro_option.v_appKey = "<%= theme.valine.appKey %>";

修改样式：themes\sakura\layout\_partial\comment.ejs
（注意判断标准为theme.valine.enable，加入了邮箱审核标准，未填写邮箱不能评论。）

<% if (theme.valine.enable && post.comments) { %>



<% } %>

运行效果：

自定义的邮箱审核机制：

verify: true：自带验证机制：

2.修改头像

其中未知名头像都是小怪物（avatar: ‘monsterid’），更多头像选择mp/identicon/monsterid/wavatar/retro/hide

如何使用自定义头像呢？

Valine 目前使用的是Gravatar 作为评论列表头像。

1. 请自行登录或注册Gravatar，然后修改自己的头像。
2. 评论的时候，留下在Gravatar注册时所使用的邮箱即可。
   (任何gravator的网站，留邮箱即显示头像，全球化，很nice哦!)
   

---

附：在sakura主题中，themes\sakura\source\js\sakura-app.js第1100行也有类似部分；在head.ejs中，sakura作者注明过这段sakura-app.js作用于php，这里暂未使用，如果有需要用到时同样修改：

3.样式diy

美化样式+今日诗词+修复评论框位置：

1. 样式美化参考：https://immmmm.com/valine-diy（必须在Valin.js之后）
   可以先注释掉app.css中的样式（第7-14行，或者搜索veditor）
   
2. 今日诗词是引入的一个接口，导入placeholder，参考今日诗词 （需要jQuery哦~）
3. 修复评论框的位置：官方版本点击回复时都是跳回到页面上方的评论框进行回复，评论框是固定不动的，比较合理的是：点哪条的回复，评论框就显示在此条评论下方。避免页面跳上跳下。
   
   完整代码：

   <% if (theme.valine.enable && post.comments) { %>
   
   
   
   
   
   
   
   
   
   
   <% } %>
   

   我的博客：姑的小屋