好用的博客评论系统 Valine 使用及避坑指南

news2025/1/17 9:00:48

评论系统，即网站的一个小功能，展示评论内容和用户输入框。开源免费的评论系统可不多，原来很火的"多说"评论系统都关闭了，而Disqus又是国外的访问受限。无意间发现了Valine，挺不错的，分享给大家。

Valine介绍

官网地址：介绍 | Valine 一款快速、简洁且高效的无后端评论系统。

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

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

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

Valine 目前使用的是Gravatar 作为评论列表头像。但这个有点儿坑，因为这个Gravatar国内访问不到。后面有解决办法。评论的时候，留下所使用的邮箱即可。比如你留下你的qq邮箱，会自动的显示你的qq头像，奇怪的是头像从哪来的？大数据？

Valine使用

由于Valine是基于LeanCloud服务的，数据都在LeanCloud存储。因此需要注册个LeanCloud才能使用。不过注册很简单，且免费开放版提供的1G存储也差不多够用啦。这里推荐下LeanCloud，也可以用来当做一些小项目的存储云服务。

1.注册Leancloud，获取 APP ID 和 APP KEY

在Leancloud用邮箱注册登录，需要实名制认证，邮箱认证。

2.创建Valine应用

命名为 Valine，方案选择开发版，即可以在一定的用量限制下免费运行。

3.进入创建好的应用>设置>选择应用 Key，就能获取到 App ID 和 App Key。

接下来使用就简单啦，只需要在需要的网页下端加入以下js代码即可：

<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments"></div>
<script>
new Valine({
			el: '#vcomments',
			appId: '21MG1aSIkC71uv7v0NcpKsuk-gzGzoHsz',
			appKey: 'ESkTqJu5BOJhiSgaZNoAQrVP',
			placeholder: "你是我一生只会遇见一次的惊喜 ...",
			avatar:'',//小怪物头像,
			visitor: true // 阅读量统
		})
</script>

其中未知名头像都是小怪物（avatar: ‘monsterid’），更多头像选择mp/identicon/monsterid/wavatar/retro/hide

存在的问题，评论的头像不显示，这是因为它使用了Gravatar头像服务。这个有个解决办法，是替换使用国内的同样类型的服务就可以啦。推荐Cravatar。

Cravatar（初认头像）为您的网站公开个人资料提供助力，无论您在互联网上的何处发帖、评论或在线互动均可获取。真人、真实、真像好用方便。

地址：中国公共头像服务CNavatar

把Valine.min.js中默认访问的https://gravatar.loli.net/avatar

替换为以下内容即可：

https://cravatar.cn/avatar/

LeanCloud介绍

LeanCloud 是领先的 Serverless 云服务，为产品开发提供强有力的后端支持，旨在帮助开发者降低研发、运营维护等阶段投入的精力和成本。 LeanCloud 整合了各项服务，让开发者能够聚焦在核心业务上，为客户创造更多价值。

它提供了四项产品，分别是 LeanStorage（数据、文件存储及云引擎）、LeanMessage（短信、推送及实时通讯服务）、LeanAnalytics（统计分析服务）、LeanModules（各种其他通用组件）。

官网地址：LeanCloud

使用LeanCloud服务后，访问一些服务变得很简单，如数据存储是云服务提供的核心功能之一，可用于存放和查询应用数据。可以这么用：

// 以下示例如何创建一个对象并将其存入云端。
// 声明class 
const Todo = AV.Object.extent('Todo');

// 创建对象
const todo = new Todo();

// 为属性赋值
todo.set('title','标题');
todo.set('content','这是内容');

// 将对象保存到云端
todo.save().then((todo) => {
// 成功保存之后，执行其他逻辑
console.log(`保存成功。objectId:${todo.id}`);
},(error) => {
// 异常处理
});

python使用leanCloud:

# 声明 class
Todo = leancloud.Object.extend('Todo')
# 构建对象
todo = Todo()
# 为属性赋值
todo.set('title',   '工程师周会')
todo.set('content', '周二两点，全体成员')
# 将对象保存到云端
todo.save()

详细使用方法参见文档：LeanCloud 开发者文档