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) { %>
    <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 作为评论列表头像。

  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('😀');
            $("#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>
    <% } %>
    

    我的博客:姑的小屋
    在这里插入图片描述

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值