日期：2026 年 9 月 13 日 版本：v2.0 — 模块化 UI 统一

一、本次更新初衷

过去一段时间，网站的博客、Wiki、小工具、后台管理等模块各自使用了不同时期的模板，视觉风格差异明显：有的页面还在用旧版 Bootstrap 的 jumbotron、黑底表格，有的页面卡片边框生硬，移动端适配也不一致。

这次更新的目标只有一个：在不动数据结构和后台逻辑的前提下，把所有前端页面统一到同一套设计语言，让阅读更舒适、导航更清晰、移动端更友好。

二、博客模块更新

1. 博客首页

  • 顶部从 350px 的硬编码大图，换成更轻量的青绿渐变 Hero 区，带站点标语与两个入口按钮。
  • 「最近更新」从 5 条扩展至 10 条，并给每篇文章绑定封面字段，无封面时不再留白。
  • 文章卡片重做：左侧封面、右侧标题摘要，悬停轻微上浮，图片微放大。
  • 广告位从标题中间移到独立区块，不再打断阅读流。
  • 底部「阅读量高的博客」区块重做，卡片风格与首页统一。

2. 博客分类页

  • 新增面包屑导航：首页 / 博客 / 分类名。
  • 顶部改为紧凑分类头，展示分类名、文章数与简短说明。
  • 左侧栏分类列表统一为白色卡片，当前分类高亮显示。
  • 每页文章数从 5 条调整为 20 条。
  • 分页组件统一为青绿主色的圆角按钮。

3. 博客详情页

  • 正文最大宽度限制在 780px，行高 1.75，段间距更清晰。
  • 代码块改为深色主题，带圆角与「复制」按钮。
  • 右侧目录 sticky 固定，滚动时高亮当前章节，移动端可折叠。
  • 分享按钮从首屏移到文末，改为懒加载，不再拖慢首屏。
  • 捐赠卡片默认折叠，点击才展开。
  • 移除 mdeditor 全套资源，只保留 highlight.js，详情页加载明显变快。

4. 关于本站

  • 删除无关的分享组件与硬编码大图。
  • 顶部改为紧凑页头，带面包屑与站点定位说明。
  • 正文与详情页共用同一套排版规则。
  • 联系方式改为图标卡片，捐赠卡片改为折叠。

三、Wiki 模块更新

1. Wiki 首页

  • 顶部改为紧凑 Hero，带面包屑、主题数与站点说明。
  • 主题列表从表格改为网格卡片，悬停上浮，长标题一行截断。
  • 主题描述限制两行，超出省略。
  • 空状态区分是否登录，登录用户可直接新增主题。

2. 主题详情页

  • 顶部带面包屑，显示主题名与文章数。
  • 主题描述用 article-body 排版，可读性更好。
  • 文章列表从表格改为卡片，每张卡片包含标题、摘要、时间、阅读量。
  • 编辑/删除按钮收进页头右侧，仅登录后显示。
  • 移动端卡片纵向堆叠，操作按钮贴底。

3. 文章详情页

  • 顶部面包屑：首页 / Wiki / 主题 / 文章。
  • 正文沿用博客详情页的排版与代码高亮。
  • 左侧新增 sticky 目录，滚动高亮。
  • 文末新增同主题内的「上一篇 / 下一篇」导航。
  • 捐赠卡片折叠在文末。
  • 侧边栏宽度固定为 220px，长标题自动省略号，不再撑宽。

4. Wiki 侧边栏

  • 从 container 内部移出，position: fixed 终于生效，稳定固定在屏幕左侧。
  • 每个主题下最多显示 10 篇文章，超出时显示「阅读更多」跳转到主题详情。
  • 当前所在主题高亮显示（topicdetail / postdetail 页）。

四、小工具模块更新

1. 工具索引页

  • 顶部紧凑 Hero + 快捷跳转导航。
  • 每个工具改为独立卡片，带图标、标题、描述与箭头链接。
  • 卡片悬停上浮，和博客、Wiki 卡片风格一致。

2. 各工具页

  • 天干地支转换、IP 信息查询、随机密码生成器三个页面统一为「紧凑页头 + 卡片式表单」。
  • 输入框、下拉框、复选框全部统一圆角与聚焦样式。
  • 结果区改为彩色提示卡片，成功为青绿、失败为浅红。
  • 密码生成结果改为独立列表，等宽字体展示，方便复制。

3. 文件比对工具

  • 修复了一个严重 bug：原页面内部 CSS 使用了 .container、.header 等通用类名，会覆盖 Bootstrap 全局样式，导致全站布局崩坏。本次给所有类名加 diff- 前缀隔离作用域。
  • 上传区、对比区、统计区全部重新配色，与站点主色统一。
  • 加载动画、错误提示改为轻量样式，不再使用纯红背景。

五、后台管理模块更新

  • 后台整体布局改为「左侧固定侧栏 + 右侧主内容区」。
  • 侧栏改为白色圆角卡片，当前页高亮，分组可折叠。
  • 博客类型与博客内容拆成两张独立卡片，表头浅灰、悬停行有底色。
  • 按钮统一为青绿主按钮 + 白底次按钮。
  • 表单页统一白色卡片 + 圆角输入框 + 主次按钮。
  • 分页组件统一为青绿高亮。
  • 新增消息提示区域，删除分类前检查是否还有文章。

六、其他优化

  • 删除重复引入的 jQuery 与 Underscore/Lodash，减少首屏请求。
  • 图片全面加 loading="lazy" 与 decoding="async"，首屏加载更快。
  • 导航栏改为毛玻璃效果，搜索框默认折叠为图标，点击展开。
  • 404 页标题修正，避免再显示「首页」。
  • 全站统一青绿主色（#14b8a6）与中性灰文本，对比度符合无障碍要求。

七、后续计划

  • 暗色模式。
  • 全文搜索。
  • 图片自动转 WebP 与 CDN 加速。
  • 页面片段缓存与数据库索引优化。

如果你在使用过程中发现任何显示问题，或者有更好的建议，欢迎通过「关于本站」页面的联系方式告诉我。网站还在持续打磨中，感谢你的访问。