评论等级系统——从庶民到太师的九品十八阶

经常看到别人博客的评论有等级系统，练级的、修仙的、上班打卡的，五花八门。正好自己博客的评论系统是自建的，我也来折腾一下。

等级表

选来选去还是觉得宋代官制最有味道。从正一品太师到从九品司户参军，再加一个庶民兜底，一共 19 级。以后逛评论区就像上朝，谁官大谁站前面。

你想，发满 5 条就是司户参军了，虽然九品芝麻官，但好歹脱离庶民身份了。发到 85 条当上知县，七品正堂，评论区里也算一号人物。至于太师，2000 条，那得是真爱。

博主自己单开了一个特殊等级，金标”九梁帝王”。

颜色怎么分的

每个品阶配了一个色，一品是金色，二品深紫，三四品紫，五六品深红，七品深绿，八品绿，九品棕，庶民灰色。

头像右下角会贴一个小小的角标，显示”正一品”或者”太师”这样的字样。底色就是对应的品阶色，白字粗体，看起来跟官印似的。不光是角标，头像周围还会有一圈淡淡的光晕，也是这个颜色——老读者一来就能看出来分量。

鼠标移上去还有卡片

头像上停一会儿，会弹出一张卡片。有你的小头像、官职称呼、累计发了多少评论。底下还有个进度条，告诉你离下一级还差多少。

比如你是”从九品司户参军”，进度条会显示你现在 5 条，15 条就能升”正九品主簿”，现在完成了百分之多少。看着进度条一点一点往前走，莫名有一种充值的快感。

卡片弹出不能太快，鼠标划过去闪一下那种很烦人。我设了 200 毫秒的延迟，就是你盯住头像停一会儿它才出来。而且鼠标可以直接从头像滑到卡片上看，不会突然消失。页面一滚动卡片就自动关掉，不挡视线。

点赞会弹一下

点赞按钮点了之后有个小动画——爱心缩放一下再弹回来，“啵”的一下，350 毫秒完事。这个曲线调了好几版，太轻了没感觉，太重了又夸张，现在的力度刚刚好。

最后一个正经的东西

整个系统写起来七七八八，没有一句后端代码——全是前端算的。服务器只管给一个数字”这个人发了 5 条评论”，前端拿到手开始查表、对颜色、算进度、控制卡片弹不弹。数据流很直白，麻烦的反而是细节：延迟多久、卡位会不会出屏幕、滚动要不要关、角标字多了怎么办。

不过弄完之后整个评论区确实变了个样。以前头像旁边就空空的，现在每个人右下角都带着自己的级别，老用户回来能看见自己的官位在涨。算是一种比较隐秘的成就感吧。