HV-Com——一个全程使用 Vditor 的评论系统

HV-Com

🚧 WIP - 功能和结构可能迅速变化,且兼容性不被保证 🚧

GitHub 地址

💡 简介

HV-Com 是一个使用 TypeScript 编写的评论系统。它使用 Vditor 作为 markdown 编辑器,lute 作为 markdown 引擎。

✨ 特性

HV-Com 的 HV 有很多个意思:

以上述缺陷为代价,HV-Com 有如下优势:

它还拥有这些特性:

🛠️ 如何开发

sudo npm install -g yarn
git clone https://github.com/lixiang810/HV-Com
cd HV-Com
yarn
yarn dev

🗺️ 背景

Vditor 作为所见即所得的 markdown 编辑器而闻名,又有 Vditor.preview() 方法可对 markdown 进行前端渲染,这让据此实现一个评论系统成为可能。与此同时,现有的评论系统却无一使用 vditor 作为其编辑器,绝大多数评论系统的富文本编辑器都不支持所见即所得,为普通用户的使用带来了门槛。

我的博客曾希望使用 valine,但它是闭源的。与此同时,它还有不小的安全风险,更何况它还要求使用国内需要绑定身份证的 LeanCloud。

我转而使用 gitalk。这个过程见于我的博文。但随后 GitHub 在中国大陆的访问受限,而且“注册 GitHub 账号”对评论者也是一个门槛,这会降低评论积极性。

此后我选择了 Isso 和 HashOver,其中 HashOver 的各类功能令我印象深刻,如果能对它的前端进行二次开发以加入 vditor,我将会继续使用 HashOver。然而,HashOver 的前端代码事实上已过于陈旧,需要使用现代前端技术进行重写。

waline 对我而言有不小吸引力,但它:

  1. 不完全是 TypeScript。
  2. markdown 只能分屏渲染,无法进行所见即所得的编辑,支持的格式也不够多。
  3. 评论区只能按时间倒序查看,且不能分页。
  4. 用了 vue,而我的技术栈在 React。
  5. 使用 GPLv2 作为协议。开源有余,自由不足。

正好 React 也缺评论系统,而我此前编写 n2rv 时又正好积累了相关经验和代码,于是决定完全重写一个。

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    209 引用 • 1234 回帖
  • TypeScript
    19 引用 • 13 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    184 引用 • 282 回帖 • 517 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    135 引用 • 267 回帖 • 434 关注
1 操作
lixiang810 在 2022-01-21 10:32:05 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • zyk
    捐赠者 支持者 订阅者

    博主,能提供下效果截图吗?

    1 回复
  • lixiang810
    支持者 订阅者 作者

    之后会更新,现在我主要在做后端和测试,前端没怎么做。

    1 回复
  • zyk
    捐赠者 支持者 订阅者

    好的

    1 回复
  • lixiang810 1 赞同 1 评论
    支持者 订阅者 作者

    Screenshot20220121at111345ViteApp.png

    现在大概长这样。能匿名评论,注册登录还没做出来。

    可以的
    zyk
  • HerbertHe
    支持者

    我自己基于 Vditor 手撸过几乎整套工具链,也贡献过代码。谈谈我碰到过的坑,Vditor 有些地方还是需要注意的。

    • Vditor 是异步加载的,可能会导致 DOM 伸缩的问题,建议楼主隐藏长评论完整渲染
    • Vditor 依赖的 lute.min.js 包很大,很可能会出现性能问题
    • Vditor 全局样式需要统一,否则会出现样式污染的问题