在网页中引入无后端的valine评论系统,使用leancloud作为免费存储和评论管理

首先引用官网的介绍:Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

相信这对于很多不想自己搭建评论系统后台的人而言,是很有诱惑力的。然而类似的社会化评论系统也不少,国内以前有一些评论系统比如友言之类的,都因为变现困难等原因倒闭了。目前用户使用比较多的一般是畅言和来必力这俩,一开始我也想用这两家的评论系统,然而经过一番调研,他们俩都不太符合我的需求。因为我需要的是一个网友能够直接评论,不需要使用第三方账号授权登录的评论系统。恰巧国内大部分的评论系统都是在评论之前要使用第三方社交账号授权登录才行。这样一来反而打消了很多人在网页上发表评论的热情,把简单的事情弄复杂了。valine正好就符合了我的需求,首先它很简单就可以引入到网页中,然后评论不需要第三方授权登录,并且不需要搭建自己的后台接口来处理评论。

配置leancloud

因为valine的评论数据是存储在leancloud中的。所以首先去leancloud注册账号,然后需要实名制验证,并且验证邮箱。搞定之后创建一个应用,选择开发版就行,这样就是免费使用了。


下面是不同版本的价格,一般的小站使用免费的开发版就行了。肯定是够用的。

然后在控制台的当前应用中,点击储存->存储化数据,在里面点击“创建class”,分别创建“Comment”和“Counter”这两个class。这两个class是作为存储评论数据使用,后期就是在这里可以看到所有的评论数据,并且可以进行评论数据的管理。

最后要在安全中心里面设置“Web 安全域名”为自己的网站域名,这样一来就只接受来自自己网站的评论数据请求,保障了评论数据的安全。

在前端代码中使用valine

直接上代码:

<head>

    ..

    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>

    ...

</head>

<body>

    ...

    <div id="vcomments"></div>

    <script>

        new Valine({

            el: '#vcomments',

            appId: 'Your appId',    //这里填入leancloud的设置->应用keys中生成的对应值

            appKey: 'Your appKey'  //这里填入leancloud的设置->应用keys中生成的对应值

        })

    </script>

</body>

可以使用npm,配合vue等框架使用:

npm install valine --save

// Use import

import Valine from 'valine';

// or Use require

const Valine = require('valine');

new Valine({

    el:'#vcomments',

    // other config

})

关于valine的具体配置参数有哪些,可以到官方文档中查阅。一般使用默认配置就可以了。这样valine评论系统就可以直接使用了。感觉评论的实时性相当高,体验很不错。而且valine的评论组件可以根据自身需要来调整外部css样式,比如大小背景颜色等。

可以访问性取向测试页这个网页来体验一下valine评论系统的效果。

欢迎访问我的个人网站butterpig

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容