评论区升级

今天也是来水一下，有个在写的暂时还没准备好发，先用这个垫着吧。

前段时间把评论框的表情直接加入输入框，而不是是表情指令，从而删除了MD预览。今天在群里发现一个好的功能可以加进来，那就是图片上传评论区。我小站之前对头像资源其实就有上传头像的，也能自动清理无关联的图片，今天把这个搬运到评论区来，删除评论之后对应的图片也就删除。

不过这个功能目前只给登录的用户使用，不登录的可以直接使用外链图片也可以加载的。不知道为什么做这个限制，总之是有这个限制，就和头像上传接口一样做了鉴权。

做这个功能的时候发现个很严重的问题：那就是之前我把预览关了，那图片展示就只能是![](link)这种形式了啊！所以我第一时间做的，是找一个MD实时渲染的开源项目加进来，我找到了 Vditor

我先把 Vditor封装进了我的评论区输入，然后同步评论区和输入框的渲染结果，然后就是碰到了一个阻碍我一下午的BUG！那就是表情！！！表情渲染为:smile:这种指令会导致各种各样的鼠标光标问题，以及选中问题！最终我还是把表情修改为了MD图片渲染形式，因为这种形式 Vditor 做的交互效果更好，更符合我的预期！所以要怪就怪他吧！

一个副作用让我不满意：由于现在是图片渲染的形式，所以表情前面才是表情源码，感觉视觉上我还没有习惯

这实际上让我感受到了一个很错位的视觉问题：

从光标上来看，我光标是在表情图片的左侧，此时插入表情心理预期也应该在表情左侧。但是是实际上这是在表情源码的末尾，所以最终会在最后面插入表情。如果把代码和图片反过来，我怕导致交互BUG，或者破坏了MD原来的样子。

即时渲染

评论框现在是 Vditor 的即时渲染模式。照常打 Markdown，光标离开那一段，它就渲染成最终的样子；光标回去，标记又露出来，方便接着改。

比如打 **这句话很重要**，光标一挪开就变成加粗的「这句话很重要」。

评论框加载

即时渲染靠一个 Markdown 解析器，传输时大约 400 KB。不打算评论的读者不该为它多下载这些，所以它只在你第一次点评论框（或者点开表情面板）的时候才开始下载。

下载期间评论框底部有一条进度条，按钮那一行中间写着「实时预览正在赶来…」和百分比。这段时间可以照常打字，下载完以后，打了一半的内容会原样带进新的编辑框，光标也跟过去。万一下载失败，评论框就保持原来的普通输入框，评论照样能发。

同一个页面里只下载一次。之后再点「回复」，新冒出来的评论框直接就是即时渲染的。

贴图：三种方式

图片处理流程：

1、浏览器先把图片缩到长边不超过 1920 像素，转成 WebP，手机拍的原图体积会小很多；

2、传到本站的评论服务器；

3、在光标处插入一行 ![](图片地址)，框里直接显示图片。

动图不压缩，原样上传，以免只剩第一帧，上限 5 MB。另外，重新编码会把照片里的拍摄信息一起去掉，包括 GPS 坐标，不用担心照片泄露你在哪儿。

上传图片需要登录。图存在本站的服务器上，不限制的话谁都能往上面堆东西。没登录时点上传，会弹出登录框。

不过，引用别处的图片不受这个限制：直接写 ![](https://别处的图片地址)，不登录也能用，框里一样当场显示。

图片不会一直占着空间

服务器不单独记录「哪张图属于哪条评论」，判断标准只有一条：还有没有评论在用这张图。

表情

表情还是从表情面板里点。点进去以后，它在框里就是一张普通的小图片，和上面说的外链图片行为一样：可以拖选、可以退格删掉；光标挨着它时会露出一小段 ![](/e/qq_weixiao)。这是表情图片的短地址，不用管它。

发出去的内容不受影响，存进评论里的仍然是表情短码，显示也和以前一样，单独发一个超级表情还是会放大播放动画。

end

评论区其他的用法（匿名和注册的区别、头像、通知邮件）在评论区完全指南里。遇到别的怪问题，欢迎直接在下面评论，正好试试新的评论框。