文章目录

  • 一、Valine简介
  • 二、使用方法
    • 1.获取 APP ID 和 APP KEY
    • 2.配置Sakura
  • 三、sakura配置valine
    • 1. 基本使用
    • 2.修改头像
    • 3.样式diy

一、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) { %>
<div id="vcomments"></div>
<script>window.onload = function(){var valine = new Valine();valine.init({el: '#vcomments',appId: "<%= theme.v_appId %>",appKey: "<%= theme.v_appKey %>",path: window.location.pathname,placeholder: "你是我一生只会遇见一次的惊喜 ..."})}
</script>
<% } %>

    可根据需要修改。

    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评论功能trueappId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHszappKey: 3opMyv2Vyx3mHa0IWitRGSoinotify: false #评论mail回复提醒verify: true #验证码visitor: false #统计阅读量avatar: monsterid # Gravatar style : mp/identicon/monsterid/wavatar/retro/hideguest_info: nick #,mail,link # custom comment headerpageSize: 10palaceholder: 你是我一生只会遇见一次的惊喜 # 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) { %>
<div id="vcomments"></div>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>new Valine({el: '#vcomments',appId: "<%= theme.valine.appId %>",appKey: "<%= theme.valine.appKey %>",path: window.location.pathname,notify: false,verify: true,avatar: 'monsterid',//小怪物头像placeholder: "你是我一生只会遇见一次的惊喜 ..."  });document.body.addEventListener('click', function(e) {if (e.target.classList.contains('vsubmit')) {const email = document.querySelector('input[type=email]');const nick = document.querySelector('input[name=nick]');const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if (!email.value || !nick.value || !reg.test(email.value)) {const str = `<div class="valert txt-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;const vmark = document.querySelector('.vmark');vmark.innerHTML = str;vmark.style.display = 'block';setTimeout(function() {vmark.style.display = 'none';vmark.innerHTML = '';}, 2500);}}});
</script>
<% } %>

运行效果：

自定义的邮箱审核机制：

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) { %>
<div id="vcomments"></div>
<!-- 先引入样式,从footer提前 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<!-- 评论框美化 -->
<style>.v .vwrap{padding: 0 0 44px;}.v .veditor{min-height: 10rem;background-image: url(https://cdn.jsdelivr.net/gh/cungudafa/img/images/girls2.png);background-size: contain;background-repeat: no-repeat;background-position: right;background-color: rgba(255,255,255,0);resize: none;}.v .vwrap .vedit{padding-top:20px;}.v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #fff7f7f7;}.v .vinput{padding:10px 15px; text-align: center;}.v .vwrap .vheader .vinput{border-bottom:0px}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}.v .vwrap .vcontrol{position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}.v .vwrap .vcontrol .col.col-20,.v .vwrap .vedit .vctrl span.vpreview-btn{display: none}.v .vwrap .vcontrol .col.col-80{width: 100%;}.v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#ff9999;}.v .vlist .vcard .vhead .vsys{background: #fff7f7f7;}@media screen and (max-width: 520px){.v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}}
</style>
<script>new Valine({el: '#vcomments',appId: "<%= theme.valine.appId %>",appKey: "<%= theme.valine.appKey %>",path: window.location.pathname,notify: false,verify: true,avatar: 'monsterid',//小怪物头像placeholder: "你是我一生只会遇见一次的惊喜 ..."  });//   自定义邮箱审核规则document.body.addEventListener('click', function(e) {if (e.target.classList.contains('vsubmit')) {const email = document.querySelector('input[type=email]');const nick = document.querySelector('input[name=nick]');const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if (!email.value || !nick.value || !reg.test(email.value)) {const str = `<div class="valert text-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;const vmark = document.querySelector('.vmark');vmark.innerHTML = str;vmark.style.display = 'block';setTimeout(function() {vmark.style.display = 'none';vmark.innerHTML = '';}, 2500);}}});// 点击回复直接评论,官方版本点击回复时都是跳回到页面上方的评论框进行回复，评论框是固定不动的// 参考https://immmmm.com/valine-diy,用到jQuery$(document).ready(function(){//$('.vemoji-btn').text('												
    

											

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

      
						
    1. Valine 一款快速、简洁且高效的无后端评论系统
		
      Valine 一款快速.简洁且高效的无后端评论系统 简介 Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速.简洁且高效的无后端评论系统. 理论上支持但不限于静态博客,目前已有 ...
      
		
      2. 
								
    2. Hexo折腾之改用Valine评论系统 - 更新域名绑定，评论后台管理
		
      前几天给博客添加了来必力评论系统,但是加载速度实在是慢的可以,原因是来必力是在页面滑到底部的时候才开始加载,但是通过控制台看,来必力确实时间很久,很影响我自己的使用体验(嗯,没有别人,哭),所以在网上 ...
      
		
      3. 
						
    3. Hexo NexT 评论系统 Valine 的使用
		
      文章目录 评论系统 Valine 的使用 1 Valine 的介绍 2 Valine 的使用 3 Valine 的配置 4 Valine 的优化 4.1 去除 Valine的 Powered By 4 ...
      
		
      4. 
						
    4. 配合 Valine 评论系统使用的 Valine-Admin 及显示个性头像
		
      Valine 一款快速.简洁且高效的无后端评论系统. Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速.简洁且高效的无后端评论系统. 理论上支持但不限于静态博客,目前已有He ...
      
		
      5. 
						
    5. idea 如何快速、简洁、高效的配置注释模板(详细)
		
      文章目录 前言 idea 如何快速.简洁.高效的配置注释模板 1.idea 如何快速.简洁.高效的配置注释模板 2.测试 前言   如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易 ...
      
		
      6. 
						
    6. 9个JavaScript小技巧：写出更简洁，高效代码
		
      JavaScript一直在变化进步着,这儿列举了一些小技巧帮你在2019年写出更简洁,高效的可拓展的代码.下面共列举了9个讲究使用的小技巧来帮助你成为更好的开发者. 1. async / await  ...
      
		
      7. 
						
    7. 个人博客系统的设计与实现_一个 Go 开发的快速、简洁、美观、前后端分离的个人博客系统...
		
      大家好,我是你们的章鱼猫. 我们从来不含糊说推荐就推荐,所以今天给大家推荐一个 go.echo.vue 开发的快速.简洁.美观.前后端分离的个人博客系统 (blog),同时基于这个系统也可以方便二次开 ...
      
		
      8. 
						
    8. 如何把一个网页生成一个快捷方式在桌面?_如何打造一个简洁、高效的桌面？
		
      都2020年了,你的桌面仍是这样的? 或是这样的? 但当然你也见过这样的: 你当然会好奇,没有各种快捷方式.任何文件或文件夹的工作桌面,使用起来岂不效率低下? 然则非也. 我认为高效的工作得从舒服的桌 ...
      
		
      9. 
						
    9. idfa码如何查看_小E告诉你：如何快速登录和高效使用华为电子邮件
		
      互联网信息时代 每个人都拥有多个邮箱账号进行邮件通讯 但是那么多个邮箱地址 如何实现高效管理? 当然是使用华为电子邮件啦! 华为电子邮件, 帮助你在手机上简洁高效地管理各类邮箱 还能快捷地管理用户邮箱 ...
      
		
      10. 
		
    

					

    最新文章
    	

      
						
    1. 在CentOS 6.9 x86_64的nginx 1.12.2上开启echo-nginx-module模块实录
		
      2. 
						
    2. SQL server 200 安装问题!
		
      3. 
						
    3. 基于FPGA的costas环同步系统仿真与分析
		
      4. 
						
    4. java技术专家学习路线图_向Java最佳专家的全球专家学习Java
		
      5. 
						
    5. java定时任务设置为每天执行一次，首次还是好的，到第二天就不执行了的原因
		
      6. 
						
    6. Jenkins 官网文档翻译汇总
		
      7. 
						
    7. ssh-copy-id非22端口的使用方法
		
      8. 
						
    8. Java 实现插入排序算法
		
      9. 
						
    9. python计算器代码,Python实现两款计算器功能示例
		
      10. 
						
    10. 计算机考研数学一大纲2016,2016考研大纲：计算机专业
		
      11. 
						
    11. LTspice基础教程-004.系统自带仿真库介绍
		
      12. 
						
    12. leapftp，leapftp怎么上传文件
		
      13. 
						
    13. 阿里云设置DDNS（动态域名解析）
		
      14. 
						
    14. 微信小程序（一）：微信小程序与服务器的简单链接
		
      15. 
						
    15. 无线路由器的AP、Client、WDS、WISP使用功能图解(清晰明了)
		
      16. 
						
    16. Blender 基础 骨架-02 骨架的各种呈现方式
		
      17. 
						
    17. Dubbo实战入门，良心详解之作
		
      18. 
						
    18. Loj #3124. 「CTS2019 | CTSC2019」氪金手游
		
      19. 
						
    19. 【统计学】从样本到总体
		
      20. 
						
    20. 软件测试：docker知识
		
      21. 
		
    
	


    热门文章
    	

      
									
    1. 计算机网络-TCP的运输连接管理（三次握手，四次挥手）补充一下为什么不能将四次挥手改为三次挥手
			
      2. 
						
    2. python中execute是啥_类Python中的Execute方法
			
      3. 
						
    3. 一定要擦亮眼睛！！！软件测试坑，千万注意！！！
			
      4. 
						
    4. 男版维密用高科技撩妹：要美体多喝水
			
      5. 
						
    5. 数据分析框架：实现99%准确率
			
      6. 
						
    6. VBS将QQ信息聊天式转换为文本
			
      7. 
						
    7. POI 临时文件夹“poifiles”问题处理
			
      8. 
						
    8. favicon.ico设置及修改问题
			
      9. 
						
    9. vue svg阴阳图水波图
			
      10. 
						
    10. 计算机组策略无法编辑,组策略编辑器无法使用了，怎么办？
			
      11.