最近对博客进行了一轮深度优化,基于LiMhy v4.0内核,围绕友链系统、评论互动、动态展示和视觉风格做了不少调整。这篇文章记录一下这次升级的核心内容。
一、友链系统增强:RSS聚合 + 评论活跃度
1. 友链RSS订阅聚合
之前的友链只是简单的链接卡片,现在为每个友链站点增加了RSS订阅功能。系统会定时抓取各站点的RSS feed,获取最新文章标题和发布时间,并在点击友链头像时弹出详情卡片展示。
同时,友链卡片默认按RSS最新文章更新时间排序,最近更新的站点会排在前面。卡片下方会显示类似"今日更新"、"昨日更新"、"3天前更新"的徽章,方便快速了解友站的活跃情况。
2. 友链同步评论条数 & 等级体系
每个友链卡片右上角会显示该站点在博客中的评论总数,并根据评论数量自动划分等级:
| 评论数 | 等级 | 称号 |
|---|---|---|
| 401+ | LV7 | 君怀 |
| 201-400 | LV6 | 相守 |
| 101-200 | LV5 | 倾心 |
| 51-100 | LV4 | 柔情 |
| 21-50 | LV3 | 勿忘 |
| 5-20 | LV2 | 依念 |
| 1-4 | LV1 | 初遇 |
鼠标悬停在评论数标签上时,会弹出Tooltip显示详细等级信息。这个设计让友链不仅仅是外链工具,更像是一个"友邻活跃度仪表盘"。
3. 自助申请通道
友链页面底部增加了"自助申请通道"抽屉表单,访客可以提交站点名称、URL、RSS地址、邮箱、Logo和描述等信息。提交后系统会邮件通知站长审核,审核通过后自动上架。
二、评论排行榜:小镇名人堂
新增了评论排行榜模块,命名为"小镇名人堂 · 谁是最活跃的评论家?"。
这个模块会统计所有评论者的评论数量(仅统计已审核的评论),按数量降序排列,展示Top 10活跃评论者。每个评论者会显示:
- 头像(支持Gravatar,无头像则显示首字母占位)
- 昵称
- 评论总数
- 专属等级徽章
排行榜会缓存在本地,每小时更新一次,避免每次访问都查询数据库造成压力。
三、动态模块重构:微语 + 聚合卡片
1. 拆分独立"微语"
之前的动态是一个混杂的流,现在将短内容(类似碎碎念、状态更新)独立为微语模块。
微语的特点:
- 字数限制在200字以内,适合随手记录
- 支持点赞功能,每条微语可以统计被点赞次数
- 按发布时间倒序排列
2. 聚合改为卡片式布局
原来的动态聚合列表比较单调,现在改为卡片式布局:
- 每条动态独立成卡片,带有阴影和圆角
- 卡片内显示发布者头像、昵称、发布时间、内容
卡片式布局让动态流更加清晰,视觉层次更分明,滚动浏览的体验也更好。
四、视觉风格:旧报纸主题 #E2DACA
这次升级最大的视觉变化是主题色调整。新主题色为 #E2DACA,一个温暖的旧报纸米色。
配色方案
| 用途 | 颜色值 | 说明 |
|---|---|---|
| 主背景 | #E2DACA | 旧报纸底色,温暖怀旧 |
| 卡片/表面 | #E0D8C8 / #EBDFC7 | 层次递进的米色系 |
| 文字主色 | #000000 | 纯黑,保证对比度和可读性 |
| 文字辅色 | #555555 | 灰色,用于次要信息 |
| 边框色 | #000000 | 纯黑边框,手绘素描风格 |
| 强调/悬停 | #c4bdb0 | 深米色,用于悬停反馈 |
设计灵感
这个配色的灵感来自旧报纸和泛黄的书页,给人一种温暖、怀旧、有质感的阅读氛围。相比之前的纯白/暗黑模式,#E2DACA在护眼和美学之间找到了一个平衡点。
视觉特色
- 手绘素描风格:所有卡片都使用纯黑色边框(
border: 2px solid #000000),配合box-shadow: 3px 3px 0 #000000的偏移阴影,营造出一种类似手绘素描的粗犷质感。 - 倾斜相册效果:文章列表的封面图采用双图层旋转设计(外框-5度旋转,内图+3度旋转),鼠标悬停时恢复平整,模拟老式相册的随意感。
- 卡片悬停反馈:所有卡片在鼠标悬停时都会向左上方偏移(
transform: translate(-2px, -2px)),阴影相应增大,产生类似纸张被抬起的物理反馈。 - 圆润的边角:统一使用
border-radius: 12px的大圆角,让硬朗的素描风格多了一份柔和。 - 沉浸式深色模式:暗色模式下的背景为
#1a1b1e,卡片为#242629,边框为#4a4d50,保持了同样的素描风格但更护眼。深色模式下图标会自动反色,确保可见性。
暗色模式适配
暗色模式做了完整适配,主要调整包括:
- 背景色:
#1a1b1e(深灰) - 卡片背景:
#242629 - 边框色:
#4a4d50 - 文字主色:
#d1d5db(柔和的白色,避免刺眼) - 所有交互元素在深色模式下都有对应的悬停效果
- 图片、图标等元素使用
filter: invert()或重新适配
日夜切换
主题切换采用CSS变量 + data-theme属性控制,切换时有平滑的过渡动画。顶部切换按钮集成了日夜切换功能,点击即可在亮色/暗色模式间切换,系统会记住用户的选择。
以上就是这次基于LiMhy v4.0的升级内容。如果你也在用LiMhy轻量级博客系统,欢迎交流改造经验。
























