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

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

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

似乎看起来还不错，发现有不少的博客站长都在用，如果网站不想存放评论数据，只是简单的想有个入口提供大家讨论交流的话，不放可以研究试试这个Valine

官方的搭建流程：https://valine.js.org/quickstart.html

获取APP ID 和 APP Key

配置HTML 片段


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
</head>
<body>
     <div id="vcomments"></div>
     <script>
        new Valine({
            el: '#vcomments',
            appId: 'Your appId',
            appKey: 'Your appKey'
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
</head>
<body>
     <div id="vcomments"></div>
     <script>
        new Valine({
            el: '#vcomments',
            appId: 'Your appId',
            appKey: 'Your appKey'
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
</head>
<body>
     <div id="vcomments"></div>
     <script>
        new Valine({
            el: '#vcomments',
            appId: 'Your appId',
            appKey: 'Your appKey'
        })
    </script>
</body>
</html>

修改初始化对象中的appId和appKey的值


new Valine({
    el: '#vcomments' ,
    appId: 'Your appId',
    appKey: 'Your appKey'
});
new Valine({
    el: '#vcomments' ,
    appId: 'Your appId',
    appKey: 'Your appKey'
});
new Valine({
    el: '#vcomments' ,
    appId: 'Your appId',
    appKey: 'Your appKey'
});

如图所示

如果想开启其他功能，了解更详细可以看看官方的文档，也有qq获取头像昵称的功能的等等，

上面效果图是添加下方代码简单的美化默认版本


.vsubmit {color: #fff !important; background-color: #4fb1f7 !important;}
#veditor{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;}
#vcomments input{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;  margin-right: 10px;}
.markdown,.vlink{display:none !important;}
.vwrap{ border: 0px solid #f0f0f0 !important;}
.vrow{padding-top: 5px !important;    padding-bottom: 0px !important;}
.vsubmit {color: #fff !important; background-color: #4fb1f7 !important;}
#veditor{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;}
#vcomments input{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;  margin-right: 10px;}
.markdown,.vlink{display:none !important;}
.vwrap{ border: 0px solid #f0f0f0 !important;}
.vrow{padding-top: 5px !important;    padding-bottom: 0px !important;}
.vsubmit {color: #fff !important; background-color: #4fb1f7 !important;}
#veditor{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;}
#vcomments input{border: 1px solid #f4f6fb; border-radius: 6px; background-color: #f4f6fb;  margin-right: 10px;}
.markdown,.vlink{display:none !important;}
.vwrap{ border: 0px solid #f0f0f0 !important;}
.vrow{padding-top: 5px !important;    padding-bottom: 0px !important;}

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END