让 Docusaurus 变得更好:SQYBI.com 上线评论系统
从上 次 SQYBI.com 下线开始,我就尝试过很多次自己手写实现一个博客系统。
这件事看起来简单,但实际上还是蛮难的,在 SQYBI.com:时隔十年的重新上线 中我有提到过少量细节。当时虽然有 Django 这样基础的框架,也(忍着痛苦)写完了对应的基本功能,但是那时的前端框架实在过于简陋,除了 CSS 的问题以外,基于 AJAX 的动态更新逻辑写起来也是很麻烦的。
好在随着这十年的技术发展,大量新框架、新语言和新服务提供商涌现出来。感谢 Node.js、React、Docusaurus、Cloudflare、ChatGPT、Brevo、Github、wysimark、Giscus 以及可能我没有提到的其它基础设施,我才能这么快速地搭建起来现在这个网站。
之前博客上线之后,我一直在使用 Giscus 作为评论系统。但是我发现,慢慢地就没有人再发表评论了。
Giscus 背后是基于 Github 的,而众所周知在国内 Github 是不能访问的状态。加上一些之前配置的问题,让 Giscus 在部分手机端即使有梯子也无法显示出来。
虽然不知道这到底影响了多少人回复的意愿,但我还是决定用自己写的评论系统替换掉它,毕竟我不能简单地认为所有访问者都有梯子。同时,这其实也是让我重新捡起当年没写完的博客系统的机会,至少完整地完成一次大块的功能。
另一个原因可能就是最近重新装修了一下这个网站之后,Giscus 的前端看起来有点格格不入了。虽然调整 CSS 或许也能做到,但工作量想必也不会小。事实证明,即使是开发自己的系统,大部分时间也是花在了调整 CSS 上。
小小的自夸一下,这算是深度定制 Docusaurus 了吧。不知道有没有其他人像我一样使用 Docusaurus 搭建博客,还做了这么多的二次开发。如果有的话,我也想围观一下他的网站。
既然上线了新的评论系统,看到这里的你,不如就直接来试着发表一条评论吧!
简单介绍新的评论系统
首先来简单介绍一下这套新评论系统的主要功能和亮点设计。
发表评论区域
最基础的功能,自然就是发表评论的功能。
配色
在这个区域,我特地将评论框的各种颜色都调整成了和博客新主题类似的配色,同时移除了 原有的各种边框。另外,我还特地调整了字体,让这部分的字体和全局统一。
文本编辑器
文本编辑器是一个 WYSIWYG 的编辑器,后台会转换为 Markdown 语法。本来打算使用一个简单文本框的,但是既然设计的目标是减少发表评论的难度,那也不太可能要求来评论的每个人都学习 Markdown。这里需要感谢 mundimark 的总结,这个简单好用的编辑器就是在这个列表中找到的。
不过现在还有一些小问题,比如编辑器里的 blockquote 和我自己 CSS 中加的样式冲突了,可以看到图中大引号下面有一个重叠的竖线。这个不会太难改,有空的时候再修吧。
发表评论按钮
发表评论按钮的逻辑也花了我一些时间处理,现在的状况大概是这样的:
- 如果评论内容是空,则按钮不可用。
- 如果评论者的昵称是空,则按钮也不可用。
- 当按钮可用并点击发送的时候,会有一个发送动画出现。
- 发送失败的情况下,按钮会恢复可用状态,且所有内容不清空,等待重新发送。
- 发送成功之后,会清空编辑区内容但保留评论者信息,同时按钮恢复不可用无动画状态,等待发送下一条。
- 当昵称为空的时候,会在周围显示红圈提示必须填写。
感谢 React,让这所有的逻辑(也包括下面的大量逻辑)变得简单易写,否则我可能真没有精力和动力手撸这么一套系统。
嵌套评论
对于已经发表的评论,右侧会出现一个“回复此评论”的按钮。这个功能的交互细节会在下面聊到评论区域的时候再讲,简单来说就是点了这个按钮以后,发表评论区域的标题会变成“回复评论”,底下的按钮也会变成“发表回复”,同时多出一个“取消回复评论”按钮。
这部分 UI 我自认为设计的还是不错的,现在唯一的问题是虽然加上了时间戳,但还是比较难以判断自己回复的是哪条评论。老婆在测试的过程中就发错过一次,后面可能要想办法高亮一下对应的评论,或者干脆把被回复评论的内容贴在下面。
如果点击了“取消回复评论”,一切就会回到初始状态。但是放心,已经输入的评论内容不会丢失。
这里有一个小问题是刷新页面还是会丢失评论内容,后续的版本里会修复这个问题。
评论者信息
每个评论者可以输入三个信息:必须输入的昵称,和可选的邮箱与网址。
和大部分评论系统一样,如果你输入了网址信息,那么你的评论中名称上面就会出现到这个网址的链接。而如果你输入了邮箱,首先你的头像会变成 Gravatar 上设置的头像(前提是你注册过,如果没有也可以去注册一下,之后就能看到了!)。其次,当你发表评论或收到评论回复的时候,就会收到对应的邮件。
我非常建议所有人在评论的时候都填写一下自己的邮箱,因为有人评论你的时候能够收到邮件,还是蛮关键的一件事。
此外,这个区域还有一个小功能,但是我感觉是非常非常重要的功能:当你输入过一次自己的信息(名称、邮箱、网址)之后,就会在浏览器中记录这些信息并在下一次自动填写。除非你换了浏览器或者清空了历史数据,否则通常都不需要再重新填写这些信息了。
我想如果没有这个功能的话,每次面对着空空如也的昵称区域,发表评论的兴趣肯定会大减吧。
最后,如果你没有输入邮箱或者输入了没有 Gravatar 头像的邮箱,处理的逻辑是这样的:
- 如果输入了没有 Gravatar 头像的邮箱,则会根据这个邮箱生成一个头像;同时当这个邮箱注册了 Gravatar 之后,会更新为 Gravatar 的头像。
- 如果没有输入邮箱,则会根据昵称生成一个头像,且保证整个网站上这个昵称对应的头像都是一样的。