SomoeComment开源评论插件
2026-09-10 (分类:技术、开源)
SomoeComment
前言
我开始搞博客时,使用的是Valine评论插件,需要依托LeanCloud,由于我的博客网站创建时就只是玩玩,没有正经的经营博客,对于Valine评论插件没有什么研究,但是我使用过LeanCloud,由于评论插件的硬性需求,我再老早之前就创建过LeanCloud的账号,期间还依托LeanCloud使用mui开发过一个名为CQM实时聊天软件,软件模仿了微信的基本功能,实现了单人聊天,群聊,朋友圈,创建群聊,添加好友等功能,之前软件在我手机上一直都可以使用,由于几年前LeanCloud业务变动,导致软件无法正常使用,后面就没有管LeanCloud相关内容了。上次偶然登录LeanCloud,系统通知说会在2027年关停服务,具体内容可以查看RXZ65534博主的文章再见,LeanCloud:一个BaaS时代的落幕与开发者的迁徙之路。令人唏嘘,想必到时候Valine插件也会收到影响吧。
上个月我自己在搞新的博客Somoe Home(开源名称为Somoe Blog),博客搞完后,我就想着给博客添加评论系统,我开始着手调研。
评论系统调研
Weline:开源现代化评论系统;Valine:老牌无后端评论系统;Twikoo:腾讯云开发驱动的评论系统
| 对比项 | Twikoo | Valine | Weline |
|---|---|---|---|
| 后端依赖 | 依赖腾讯云开发(TCB),自建服务也支持 | LeanCloud(必须),无官方自建后端 | 支持自建后端、Docker部署,无需第三方SAAS |
| 部署难度 | 中等,需要开通腾讯云开发,少量配置 | 简单,引入JS+LeanCloud应用即可 | 中等,Docker一键部署,也可编译源码 |
| 数据库 | 腾讯云开发云数据库 | LeanCloud存储 | 内置SQLite / MySQL / PostgreSQL |
| 登录方式 | 匿名、GitHub、Gitee、QQ、微信、邮箱 | 匿名、GitHub、Gitee、QQ | 匿名、GitHub、Gitee、邮箱、Discord |
| 邮件通知 | 支持,内置配置,支持模板 | 需要配置LeanCloud云函数,配置繁琐 | 内置邮件通知,支持模板,Webhook通知 |
| 管理后台 | 内置网页管理后台 | 无原生后台,依赖LeanCloud控制台 | 独立完整Web管理后台 |
| 反垃圾 | 内置腾讯云内容安全,可开关 | 无内置,需要第三方API | 内置词库过滤,支持对接第三方内容审核API |
| 图片上传 | 支持上传到腾讯云COS | 不支持本地上传,依赖外部图床 | 支持本地上传、对象存储 |
| Markdown | 完整支持Markdown,代码高亮 | 基础Markdown,代码高亮需要额外配置 | 完整Markdown,代码高亮,支持表情 |
| 评论分页 | 支持 | 支持 | 支持 |
| 楼层嵌套回复 | 支持多级嵌套 | 支持嵌套,层级较弱 | 多级嵌套回复 |
| IP记录 | 记录IP,可后台拉黑 | 记录IP,LeanCloud查看 | 记录IP,后台拉黑、封禁用户 |
| 数据导出导入 | 支持导出JSON | 需要在LeanCloud导出 | 完整导入导出备份 |
| 开源协议 | MIT | GPL‑2.0 | MIT |
| 特点 | 开箱即用,国内访问友好,云开发托管 | 纯前端,部署最简单,依赖LeanCloud | 完全自主可控,数据掌握在自己服务器 |
| 缺点 | 绑定腾讯云,自建部署文档偏少 | LeanCloud免费版有额度限制,无后台,垃圾评论多 | 需要自己维护服务器,无SAAS版本 |
| 适合场景 | Hexo/VitePress等国内博客,不想维护服务器 | 静态博客快速搭建,追求极简部署 | 追求数据主权,自建服务器用户 |
从功能对比表看起来,Twikoo肯定是目前的最优选择,自从了解了不同的开源协议,对待具有强传染性的GPL项目我也变得更加谨慎了一点。
现在我发现很多博友们都在使用Twikoo评论插件,前几天版本来到了1.7.20,今天一看版本升到了1.7.22,更新挺频繁的,但我觉得2.3K星有点少了,这么实用的东西值更多星。
我之前接触过一个沉浸式音乐软件Mineradio,我给仓库点Star时也才几百个,过滤一天增到4K,后面暴增到8K,目前10.6K,这个项目是GPL-3.0 开源的,有很强的传染性,当时有很多人给它开发,适配不同平台的版本,我也加入了其中,但是由于这个开源协议,就搞个半成品就不想再继续深度的搞下去了。使用新的框架开发了桌面客户端,和部署了web服务,可以在 https://mr.qiumonster.com/ 上体验,上面可以进行原版的切换。具体情况可以访问我的GitHub主页 https://github.com/QiuMonster 。
为什么自研 SomoeComment
好,现在回到评论插件上面,我实际上没有在博客中使用过Twikoo,Twikoo给我的感觉是为了功能而生的评论插件,它容易搭建,可以使用免费的资源,功能强大,国内友好。但是对于我而言我有点追求样式,功能什么的基本够用即可。于是我使用上自己开发的开源数据库工具somoe-db开始搭建自己的SomoeComment开源评论插件。
功能展示
先展示一下页面,并介绍一下样式和功能。
整体样式

这是在Twikoo官网 https://twikoo.js.org/ 截的图片,我测试了MD表格格式,在预览中表格的样式没有展现出来。

这是SomoeComment评论插件的主面板基本样式。整体采用与Somoe Home保持一致的设计风格,采用圆形彩色按钮,胶囊按钮,透明背景设计思路。

评论数量显示:显示博客对应的评论数量。

顶部功能按钮区域:采用圆形彩色按钮样式,增加鼠标上浮图标动画效果,目前版本展示2个按钮,一个是亮色和暗色的切换,另一个是跳转对应的插件仓库,后续将考虑更多功能。
输入区功能

编写与预览:在输入框中输入MD格式,切换预览可以实现MD数据的查看,点击编写,实现继续编辑内容。

MD编辑辅助功能按钮:辅助实现MD格式内容编辑,例如添加粗体,链接等。

个人信息输入区:输入个人的昵称,邮箱,网址进行评论,后台可以给用户配置头像数据,会在评论区显示已配置的用户头像。

提交评论按钮:输入完评论内容后,点击提交评论按钮,实现发送评论。

底部功能按钮:实现功能扩展,职能低于顶部的功能按钮,是辅助功能,目前有跳转git仓库,和光标上浮显示提示信息。

字数显示:实时显示输入字数。

输入框自动扩展:输入框初始化时可以自定义高度,当输入内容较多时,会进行自动扩展高度。

输入预览:将输入的MD内容转为渲染的样式。
评论展示功能

评论信息展示:展示用户的头像,昵称,使用浏览器类型,系统类型,时间。

内容超出固定高度后折叠展示:初始化评论插件可设置是否折叠评论内容,不折叠时直接全部展示,折叠时,可以设置最大需折叠的高度,实现折叠展示。

点击展开显示全部评论数据:底部有展开全文的按钮,点击后,可以查看全部的评论数据。

回复评论面板样式:回复他人评论时,面板上会显示对应的回复信息。

二级回复消息折叠:二级回复消息折叠,与一级消息展示行为一致。

评论信息项功能按钮:目前功能有回复,复制,点赞,举报,其中举报功能正在考虑,其他三个按钮功能全部正常。
交互与加载

评论加载遮罩:在初次加载页面时,会展示评论加载遮罩。

评论频繁提醒:可以给插件设置消息发布的频率,并在面板上显示对应的提醒信息。

超过固定评论数加载更多按钮:评论内容超出固定数量时展示,点击可以加载更多评论数据。

显示加载动画:加载更多评论按钮的加载动画。
暗色模式与图片展示

暗色模式评论面板:点击顶部的暗色切换按钮,可以将面板切换为暗色模式。

图片数据展示:评论信息中图片格式数据展示。
博客实际展示

个人博客中实际展示1:在Somoe Home中个人博客中实际展示1。

个人博客中实际展示2:在Somoe Home中个人博客中实际展示2。
后续计划
目前1.0.0版本的评论插件整体功能就是上面描述的这样,我已经在自己的博客中采用vue插件的形式使用了。关于评论插件的使用方式,将在官方网站 https://comment.somoe.net 上展示,由于对插件的开发不太清楚,需要做一些适配等内容,据我了解的知识,可以支持npm导包在vue项目中使用,另一种是可以直接使用script标签进行使用,我会编译好对应的js版本,关于插件的适配,在不同的博客中如何快速集成,我需要探索一下,一些技术说明文档会全部放到Somoe Comment的官网,目前官网还在构建中,资料还在编写,插件也在做上架到npm最后的准备中,后续的开源项目也将会发布到npm的somoe-net组织上。SomoeComment评论插件还有很多不足,还有很长的路要走,继续加油。
相关链接
仓库地址(Gitee):https://gitee.com/somoe-net
仓库地址(GitHub):https://github.com/somoe-net
somoe-db:https://www.npmjs.com/package/@somoe-net/somoe-db
somoe-comment-panel-vue:https://www.npmjs.com/package/@somoe-net/somoe-comment-panel-vue
somoe-comment-server:https://www.npmjs.com/package/@somoe-net/somoe-comment-server
SomoeNet:https://somoe.net
个人博客网站:https://somoe.xyz
项目开源协议:MIT