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评论插件

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

插件主体

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

评论数量显示

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

功能按钮区

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

输入区功能

编写与预览

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

MD编辑辅助功能按钮

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

个人信息输入区

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

提交评论按钮

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

底部功能按钮

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

字数显示

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

输入框自动扩展

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

输入预览

输入预览:将输入的MD内容转为渲染的样式。

评论展示功能

评论信息展示

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

内容超出固定高度后折叠展示

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

点击展开显示全部评论数据

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

回复评论面板样式

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

二级回复消息折叠

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

评论信息项功能按钮

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

交互与加载

评论加载遮罩

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

评论频繁提醒

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

超过固定评论数加载更多按钮

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

显示加载动画

显示加载动画:加载更多评论按钮的加载动画。

暗色模式与图片展示

暗色模式评论面板

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

图片数据展示

图片数据展示:评论信息中图片格式数据展示。

博客实际展示

个人博客中实际展示1

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

个人博客中实际展示2

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

后续计划

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

相关链接

体验:https://comment.somoe.xyz

官网:https://comment.somoe.net

仓库地址(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

← 返回博客列表