一、Valine简介
Valine - 一款快速、简洁且高效的无后端评论系统。
Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost
等博客程序在使用Valine。
更新-自定义样式:
二、使用方法
1.获取 APP ID 和 APP KEY
-
在Leancloud用邮箱注册登录
需要实名制认证,邮箱认证。 -
创建Valine应用
命名为Valine
,方案选择开发版
,即可以在一定的用量限制下免费运行。 -
进入创建好的
应用>设置>选择应用 Key
,就能获取到 App ID 和 App Key。 -
为了您的数据安全,请填写
应用>设置>安全设置
中的Web 安全域名
:
2.配置Sakura
-
编辑
sakura/_config.yml
,找到对应的模块,修改配置如下:valine: true v_appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz v_appKey: 3opMyv2Vyx3mHa0IWitRGSoi
-
重新发布Hexo测试
进入helloworld文章,发布评论:
leancode也会相应记录一条数据:
-
深度美化
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评论功能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) { %>
<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 作为评论列表头像。
- 请自行登录或注册Gravatar,然后修改自己的头像。
- 评论的时候,留下在Gravatar注册时所使用的邮箱即可。
(任何gravator的网站,留邮箱即显示头像,全球化,很nice哦!)
附:在sakura主题中,
themes\sakura\source\js\sakura-app.js
第1100行也有类似部分;在head.ejs中,sakura作者注明过这段sakura-app.js作用于php,这里暂未使用,如果有需要用到时同样修改:
3.样式diy
美化样式+今日诗词+修复评论框位置:
- 样式美化参考:https://immmmm.com/valine-diy(必须在Valin.js之后)
可以先注释掉app.css中的样式(第7-14行,或者搜索veditor)
- 今日诗词是引入的一个接口,导入placeholder,参考今日诗词 (需要jQuery哦~)
- 修复评论框的位置:官方版本点击回复时都是跳回到页面上方的评论框进行回复,评论框是固定不动的,比较合理的是:点哪条的回复,评论框就显示在此条评论下方。避免页面跳上跳下。
完整代码:<% 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('😀'); $("#vcomments").on('click', 'span.vat',function(){ $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap")); $('textarea#veditor').focus(); }) }) </script> <!-- 今日诗词:随机返回一句古诗词名句的接口,宅到用来做 Valine 的 placeholder 显示内容 --> <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> <script type="text/javascript"> jinrishici.load(function(result) { var jrsc_plac = result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author document.getElementById("veditor").setAttribute("placeholder",jrsc_plac); }); </script> <% } %>
我的博客:姑的小屋