IFZPress 博客新视觉设计说明

目标

在不改变现有发布链路的前提下，把站点从默认主题风格改造成更贴近当下个人技术博客的冷色技术杂志风：首页突出最新文章流，文章页强化长文阅读体验，分类、标签与时间线统一到同一套视觉系统。

范围

• 保留 vuepress-theme-hope 主题与现有博客路由
• 不改动 Decap CMS、Gitea、Webhook、微信公众号脚本
• 主要通过主题配置、首页文案和全局样式完成改造

视觉方向

• 风格：冷色技术杂志感
• 基调：深海蓝、雾灰蓝、少量暖橙点缀
• 质感：毛玻璃导航、半透明卡片、柔和阴影
• 首页重心：最新文章流，而不是大横幅

页面策略

首页

• 缩短首屏高度，让最新文章列表更快进入视线
• 使用夜景背景做氛围层，增加冷色遮罩，降低背景干扰
• 首页正文补充专题入口和站点介绍模块，增强“技术博客首页”而不是“默认文档首页”的感觉
• 右侧信息栏继续使用 Hope 主题原生博客信息面板，通过站点资料和样式升级做出杂志感

文章详情页

• 收窄正文宽度，优化中文长文阅读
• 强化标题层级、引用块、代码块、图片展示
• 优化文章元信息、上一篇/下一篇导航和底部留白

分类 / 标签 / 时间线

• 分类和标签页面改成卡片化入口风格
• 时间线保留纵向结构，但提升卡片感和年份分组视觉
• 页面标题区、列表区和交互状态统一成同一套风格

技术实现

• 修改 docs/.vuepress/config.js，补充博客站点信息和导航布局
• 修改 docs/README.md，重写首页 frontmatter 与正文模块
• 新增 docs/.vuepress/styles/index.scss，集中覆盖主题样式

风险与边界

• 本次改动偏视觉，主要风险在样式覆盖和响应式布局
• 不主动升级 VuePress / Hope 主题版本，避免引入新的兼容性问题
• 以现有构建命令 npm run docs:build 为最终验证标准