Detalk.js —— 具有高自定义性、简洁、轻量的开源评论系统
CKY 于 2023/1/10 在「开源」发布。
标签: #评论#开源#Detalk
我一直在寻找开源、可以免费部署的评论系统,最好还是在我的技术栈内,所以博客尝试过 Valine,Waline 和 Twikoo。但这些评论系统都没有让我完全满意,在 2022 年末,我开了一个新坑 —— Detalk.js
为什么开发 Detalk.js?
我一直在寻找开源、可以免费部署的评论系统,在 Valine 发现隐私问题和 XSS 漏洞后,我就放弃了 Valine 和「无后端」解决方案。
Waline 是「有后端的 Valine」,保留了 Valine 的很多特性,但还是没有让我满意。
后来,我转到了 Twikoo,这也是我使用最久的评论系统。它有非常丰富的特性,但我最后还是弃用了它。
Detalk.js 的部署平台从名字就可以看出,基于 Deta Bases 和 Deta Micros. 这些平台对个人开发者免费使用,非常的友好。
服务端开发
Detalk.js 一开始就选择优先开发服务端,而前端则可以随意构建,有完整的服务端文档。
所以,我将主代码放到了 detalkjs/server 中,得益于 Deta 平台,现在可以一键部署,稍等片刻就可以直接使用。
服务端我直接从官方的 Demo 开始写,使用官方推荐的 Express 框架,代码语言选择 JavaScript.
在开发过程中,我发现 Detalk.js 的响应时长至少在 1s+,我推测是与 Deta 平台的运行方案和冷启动有关,但对于评论系统来说,这无伤大雅。
数据库
Deta 平台上,最方便的数据库就是 Deta Bases. 这又是一款 Key-Value 数据库,有着简单易于理解的 SDK 文档。
导入方法也很简单:
const { Deta } = require('deta');
const deta = Deta();
// 为了方便用户部署多个 Detalk,用户可自定义 Base Name.
const db = deta.Base(process.env.BASE_NAME || 'detalk');
使用方法整体类似于 yfun-lab/gh-worker-kv,对于部分代码的上手也是很简单的。
前往 Web 面板截图,可以看到,Detalk 所创建的数据库基本格式如下:
以 CMT_
开头的存放评论,FUNCTION_
开头的存放事件函数,还有一些关于站点的配置。
API
目前,所有后端的 API 都在 API | Detalk.js 可以查看。
部分 API 需要鉴权登录操作,部分为公共 API,只需要后端地址即可调用。
前端开发
我对前端 detalkjs/client 的简介是:
⚡ The fastest way to add Detalk (Based on Deta) to your website. | 将 Detalk (Based on Deta) 加入你的网站。
(这再次说明官方提供的前端只是一种方案,完全可以自己开发
也正因如此,前端的 NPM 包名是 @detalk/static
(逃
打包
前端打包是 Webpack 5 方案,我多加了一个配置文件,可以打包出 JS, CSS 分离的版本。这样或许可以方便部分用户的引入需要。
但是从各方面来看,还是建议引入单 JS 的版本,大小约为 43kb,Gzip 压缩后约 12kb.
前端配置?
设计前端时有两种读取配置文件的方案,一种是类似于 Twikoo,从服务端读取,另一种是直接在 detalk.init
时配置。
明显,前者需要多发送 1 - 2 次 HTTP 请求,加载速度也会变慢,所以我选择了后者。
控制面板
控制面板也可以使用完全 API 自构建,但是,我们提供了「依托答辩」的官方后端:https://detalk-dash.netlify.app/
除可维护角度以外,都挺好的(
一些问题
Markdown 解析
如果你没有额外的配置,那么点击「预览」的时候。你肯定会发现需要等待一段时间。
我之前想把 Marked.js(号称轻量)的 Markdown 解析器加入 Detalk.js,结果发现包体积直接翻了一倍,于是放弃。
如果你需要更换解析器,不用担心,这里给出了方法。
URL 载入配置
前文说到,Detalk 并没有采取后端配置的方法,但是,我们还是支持了从 URL 载入配置。
关于这一特性,可见此处。
多语言的实现
Detalk.js 并没有默认提供多语言功能,这主要是因为不同站点的使用者受众不同,于是我决定这项功能可以由用户实现。
这依赖 window.DETALK_I18N
参数,如果没有此项,则会在 detalk.init
时由程序默认提供简体中文项。
实现代码可以见如下:
if (navigator.language == 'zh-CN') {
window.DETALK_I18N = {
loadMore: '加载更多',
notAllowedInput: '输入内容不符合要求!',
send: '发送',
preview: '预览',
reply: '回复',
replyTo: '回复',
cancel: '取消',
loadingLoginFrame: '登录窗口加载中...',
gotoLoginFrame: '请在登录窗口中继续',
waitingInfo: '登录成功,正在获取用户信息...',
loginSuccess: '登录成功',
failedLoadingInfo: '获取用户信息失败',
deleteConfirm: '即将删除 ID:[#ID] 评论,是否继续?',
total: '共 [#TOTAL] 条评论',
noComment: '暂无评论',
up: '正序',
down: '倒序',
delete: '删除',
top: '置顶',
login: '登录',
required: '必填',
optional: '选填',
nickname: '昵称',
email: '邮箱',
link: '网址',
day: {
justNow: '刚刚',
minute: '[#TIME] 分钟前',
hour: '[#TIME] 小时前',
day: '[#TIME] 天前',
}
} else if (navigator.language == 'zh-TW') {
window.DETALK_I18N = {
loadMore: '加載更多',
notAllowedInput: '輸入內容不符合要求!',
send: '發送',
preview: '預覽',
reply: '回复',
replyTo: '回复',
cancel: '取消',
loadingLoginFrame: '登錄窗口加載中...',
gotoLoginFrame: '請在登錄窗口中繼續',
waitingInfo: '登錄成功,正在獲取用戶信息...',
loginSuccess: '登錄成功',
failedLoadingInfo: '獲取用戶信息失敗',
deleteConfirm: '即將刪除 ID:[#ID] 評論,是否繼續?',
total: '共 [#TOTAL] 條評論',
noComment: '暫無評論',
up: '正序',
down: '倒序',
delete: '刪除',
top: '置頂',
login: '登錄',
required: '必填',
optional: '選填',
nickname: '暱稱',
email: '郵箱',
link: '網址',
day: {
justNow: '剛剛',
minute: '[#TIME] 分鐘前',
hour: '[#TIME] 小時前',
day: '[#TIME] 天前',
}
}
最后
Detalk.js 未来会与 ESHexoN 融合,在 ESHexoN 中提供管理面板。
同时,YFun's Blog 也会在后续更新有关 Detalk.js 的更多文章。
目前,此博客已经更换至 Detalk.js 评论系统,欢迎测试与使用!
由 Google 提供的广告
此广告内容由 Google Ads 提供,与 CKY.IM 无关,请注意识别。为什么会显示广告?