惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

L
LangChain Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
雷峰网
雷峰网
量子位
V
V2EX
S
SegmentFault 最新的问题
月光博客
月光博客
博客园 - 【当耐特】
Hugging Face - Blog
Hugging Face - Blog
V
Visual Studio Blog
大猫的无限游戏
大猫的无限游戏
T
Tailwind CSS Blog
博客园_首页
博客园 - Franky
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
美团技术团队
Y
Y Combinator Blog
The Cloudflare Blog
C
Check Point Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
腾讯CDC
B
Blog
Stack Overflow Blog
Stack Overflow Blog
P
Proofpoint News Feed

東风

豆包图片下载器:一键保存豆包对话里的图片 从vps到边缘函数-我都经历了什么? 新主题设计理念 魔法玩具 alwaysdata 博客后台和域名 我给博客加了AI审核评论功能 我给博客加了AI审核评论功能 把 RSS 监控搬到了 EdgeOne 上,这次带了个前端 评论等级系统——从庶民到太师的九品十八阶 给 D1 数据库加了个只读副本,评论 API 快了 30% 给 D1 数据库加了个只读副本,评论 API 快了 30% 我退订了 Kimi 和 MiniMax 的 Coding Plan 我退订了 Kimi 和 MiniMax 的 Coding Plan 写了一个 RSS 博客订阅自动监控工具 写了一个 RSS 博客订阅自动监控工具 飞书同步机器人 — 部署教程 飞书同步机器人 — 部署教程 给博客评论加个飞书通知 给博客评论加个飞书通知 飞书发布测试 飞书发布测试 1700公里的旅程 1700公里的旅程 1700公里的旅程 Hello World - 欢迎来到我的博客 Hello World - 欢迎来到我的博客
评论等级系统——从庶民到太师的九品十八阶
東风 · 2026-05-17 · via 東风

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

2026年5月17日 4 分钟阅读 0 次阅读

基于宋代九品十八阶官制给博客评论做了套等级系统,从庶民到正一品太师共 19 级,含 hover 卡片、进度条、点赞动画。正一品太师/从一品太尉。

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

等级表

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

品阶官职需要多少条
正一品太师2000
从一品太尉1400
正二品参知政事1050
从二品节度使800
正三品御史中丞600
从三品秘书监480
正四品谏议大夫380
从四品侍读学士300
正五品给事中240
从五品知州190
正六品侍御史150
从六品通判115
正七品知县85
从七品殿中侍御史60
正八品大理评事40
从八品录事参军25
正九品主簿15
从九品司户参军5
庶民0

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

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

颜色怎么分的

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

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

鼠标移上去还有卡片

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

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

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

点赞会弹一下

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

最后一个正经的东西

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

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