1199 lines
34 KiB
Markdown
1199 lines
34 KiB
Markdown
# 个人博客设计文档
|
||
|
||
## 设计目标
|
||
|
||
设计并实现一个**美观、现代化**的个人博客系统，提供优质的阅读体验和视觉享受。
|
||
|
||
## 核心设计理念
|
||
|
||
### 视觉风格定位
|
||
|
||
- **现代简约**：采用简洁的设计语言，避免视觉噪音，突出内容本身
|
||
- **优雅配色**：构建和谐的色彩体系，支持明暗双主题切换
|
||
- **流畅交互**：提供平滑的动画过渡和响应式反馈
|
||
- **沉浸阅读**：优化排版和间距，营造舒适的阅读氛围
|
||
|
||
### 用户体验目标
|
||
|
||
- 访问者能够快速浏览博客文章列表
|
||
- 文章内容呈现清晰易读，排版美观
|
||
- 界面响应迅速，交互流畅自然
|
||
- 支持多种设备和屏幕尺寸访问
|
||
|
||
## 整体架构设计
|
||
|
||
### 页面结构规划
|
||
|
||
博客系统由以下核心页面组成：
|
||
|
||
| 页面 | 路由 | 功能定位 |
|
||
|------|------|----------|
|
||
| 首页 | `/` | 展示博客文章列表，提供快速导航和内容预览 |
|
||
| 文章详情页 | `/posts/[slug]` | 展示完整文章内容，包含标题、元信息、正文和相关操作 |
|
||
| 关于页面 | `/about` | 介绍博主信息、联系方式和个人简介 |
|
||
|
||
### 布局层次设计
|
||
|
||
系统采用统一的布局框架，确保页面一致性：
|
||
|
||
```mermaid
|
||
graph TB
|
||
Layout[布局容器 Layout]
|
||
Header[页头 Header]
|
||
Main[主内容区 Main]
|
||
Footer[页脚 Footer]
|
||
|
||
Layout --> Header
|
||
Layout --> Main
|
||
Layout --> Footer
|
||
|
||
Header --> Nav[导航菜单]
|
||
Header --> Theme[主题切换]
|
||
|
||
Main --> Content[页面内容槽]
|
||
Main --> BgEffect[视觉背景效果]
|
||
|
||
Footer --> Info[版权信息]
|
||
Footer --> Links[社交链接]
|
||
```
|
||
|
||
## 设计系统规范
|
||
|
||
### 色彩体系
|
||
|
||
#### 明亮主题配色方案
|
||
|
||
| 用途 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 主背景色 | `#FAFAFA` | 柔和的浅灰白色，减少视觉疲劳 |
|
||
| 次级背景 | `#FFFFFF` | 纯白色，用于卡片和内容容器 |
|
||
| 主文本色 | `#1A1A1A` | 深灰色，提供良好对比度 |
|
||
| 次级文本色 | `#666666` | 中性灰，用于辅助信息 |
|
||
| 强调色 | `#0066FF` | 明亮蓝色，用于链接和交互元素 |
|
||
| 边框色 | `#E5E5E5` | 浅灰色，用于分隔线和边框 |
|
||
|
||
#### 暗黑主题配色方案
|
||
|
||
| 用途 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 主背景色 | `#0F0F0F` | 深黑色，护眼且沉浸 |
|
||
| 次级背景 | `#1A1A1A` | 稍浅的黑色，用于卡片和内容容器 |
|
||
| 主文本色 | `#E5E5E5` | 柔和的浅色，确保可读性 |
|
||
| 次级文本色 | `#A0A0A0` | 中性灰，用于辅助信息 |
|
||
| 强调色 | `#3B82F6` | 柔和蓝色，降低视觉刺激 |
|
||
| 边框色 | `#2A2A2A` | 深灰色，用于分隔线和边框 |
|
||
|
||
### 字体排版规范
|
||
|
||
#### 字体家族选择
|
||
|
||
- **主要字体**：系统默认字体栈，确保跨平台一致性
|
||
- 中文：`"PingFang SC", "Microsoft YaHei", "微软雅黑"`
|
||
- 英文：`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue"`
|
||
- 代码：`"JetBrains Mono", "Fira Code", Consolas, Monaco, monospace`
|
||
|
||
#### 字体尺寸规范
|
||
|
||
| 层级 | 尺寸 | 行高 | 用途 |
|
||
|------|------|------|------|
|
||
| H1 标题 | 36px | 1.3 | 文章主标题 |
|
||
| H2 标题 | 28px | 1.4 | 章节标题 |
|
||
| H3 标题 | 22px | 1.4 | 子章节标题 |
|
||
| 正文 | 17px | 1.8 | 文章正文内容 |
|
||
| 小字 | 14px | 1.6 | 元信息、标签等 |
|
||
| 微型字 | 12px | 1.5 | 页脚信息、版权等 |
|
||
|
||
### 间距与尺寸系统
|
||
|
||
采用 8px 为基础单位的间距系统：
|
||
|
||
| 名称 | 数值 | 使用场景 |
|
||
|------|------|----------|
|
||
| xs | 4px | 紧密相关元素的微小间距 |
|
||
| sm | 8px | 小型组件内部间距 |
|
||
| md | 16px | 常规内容间距 |
|
||
| lg | 24px | 区块之间的间距 |
|
||
| xl | 32px | 主要区域分隔 |
|
||
| 2xl | 48px | 大型模块分隔 |
|
||
|
||
### 视觉效果规范
|
||
|
||
#### 圆角设计
|
||
|
||
| 元素类型 | 圆角值 | 说明 |
|
||
|----------|--------|------|
|
||
| 小型元素（按钮、标签） | 6px | 轻微圆角，现代感 |
|
||
| 中型元素（卡片） | 12px | 柔和圆角，亲和力 |
|
||
| 大型容器 | 16px | 明显圆角，层次感 |
|
||
|
||
#### 阴影系统
|
||
|
||
| 层级 | 阴影值 | 使用场景 |
|
||
|------|--------|----------|
|
||
| 浅层阴影 | `0 2px 8px rgba(0,0,0,0.05)` | 卡片悬停、小型浮层 |
|
||
| 中层阴影 | `0 4px 16px rgba(0,0,0,0.08)` | 导航栏、主要卡片 |
|
||
| 深层阴影 | `0 8px 24px rgba(0,0,0,0.12)` | 模态框、重要提示 |
|
||
|
||
#### 动画过渡
|
||
|
||
所有交互动画采用统一的缓动函数和时长：
|
||
|
||
- **标准过渡**：`200ms ease-out` - 用于常规状态变化
|
||
- **快速过渡**：`150ms ease-in-out` - 用于微小元素变化
|
||
- **舒缓过渡**：`300ms cubic-bezier(0.4, 0, 0.2, 1)` - 用于页面级变化
|
||
|
||
## 功能模块设计
|
||
|
||
### 首页设计
|
||
|
||
#### 布局结构
|
||
|
||
首页采用单栏布局，突出内容展示：
|
||
|
||
```mermaid
|
||
graph TB
|
||
Index[首页]
|
||
Hero[顶部横幅区]
|
||
PostList[文章列表区]
|
||
|
||
Index --> Hero
|
||
Index --> PostList
|
||
|
||
Hero --> Title[博客标题]
|
||
Hero --> Desc[个人简介]
|
||
|
||
PostList --> Card1[文章卡片1]
|
||
PostList --> Card2[文章卡片2]
|
||
PostList --> CardN[文章卡片N]
|
||
```
|
||
|
||
#### 顶部横幅区域
|
||
|
||
- **博客标题**：展示博客名称，使用大字号突出显示
|
||
- **个人简介**：简短介绍博主或博客定位，控制在 1-2 行
|
||
- **视觉装饰**：使用渐变背景或几何图案增强视觉吸引力
|
||
|
||
#### 文章列表展示
|
||
|
||
每篇文章以卡片形式呈现，包含以下信息：
|
||
|
||
| 元素 | 展示内容 | 视觉处理 |
|
||
|------|----------|----------|
|
||
| 文章标题 | 完整标题文本 | 大字号、加粗，悬停时变色 |
|
||
| 发布日期 | 格式化的日期 | 小字号、次级文本色 |
|
||
| 文章摘要 | 内容前 150-200 字 | 常规字号、行高适中 |
|
||
| 阅读标签 | 分类或标签名称 | 小型标签样式，配色醒目 |
|
||
| 阅读时长 | 预估阅读分钟数 | 小字号、图标配合 |
|
||
|
||
#### 交互行为设计
|
||
|
||
- 卡片整体可点击，引导用户进入文章详情
|
||
- 鼠标悬停时，卡片轻微上浮并显示阴影
|
||
- 卡片间距适中，视觉呼吸感良好
|
||
- 支持渐进式加载，优化长列表性能
|
||
|
||
### 文章详情页设计
|
||
|
||
#### 布局结构
|
||
|
||
文章页采用居中阅读布局，最大宽度控制在 720-800px，确保舒适的阅读行宽：
|
||
|
||
```mermaid
|
||
graph TB
|
||
Post[文章详情页]
|
||
Meta[文章元信息区]
|
||
Title[文章标题区]
|
||
Content[文章正文区]
|
||
Actions[互动操作区]
|
||
|
||
Post --> Meta
|
||
Post --> Title
|
||
Post --> Content
|
||
Post --> Actions
|
||
|
||
Meta --> Date[发布日期]
|
||
Meta --> Tags[标签列表]
|
||
Meta --> ReadTime[阅读时长]
|
||
|
||
Content --> MD[Markdown渲染内容]
|
||
|
||
Actions --> Back[返回列表]
|
||
Actions --> Share[分享按钮]
|
||
```
|
||
|
||
#### 文章元信息区
|
||
|
||
- **发布日期**：显示完整日期，格式如 `2024年3月15日`
|
||
- **标签**：彩色标签样式，点击可筛选同类文章
|
||
- **阅读时长**：基于字数自动计算预估时间
|
||
- **作者信息**：可选展示作者名称和头像
|
||
|
||
#### 正文内容渲染
|
||
|
||
支持完整的 Markdown 语法，包含以下元素的样式优化：
|
||
|
||
| Markdown 元素 | 视觉设计 |
|
||
|---------------|----------|
|
||
| 标题（H1-H6） | 层级分明的字号和间距，H2 级别添加下划线装饰 |
|
||
| 段落 | 充足的行高（1.8），段落间距适中 |
|
||
| 引用块 | 左侧彩色边框，背景色区分，斜体文字 |
|
||
| 代码块 | 深色背景主题，语法高亮，行号显示，复制按钮 |
|
||
| 行内代码 | 浅色背景，等宽字体，轻微圆角 |
|
||
| 链接 | 强调色显示，悬停下划线 |
|
||
| 列表 | 有序/无序列表样式优化，层级缩进清晰 |
|
||
| 图片 | 自适应宽度，添加圆角和阴影，支持点击放大 |
|
||
| 表格 | 斑马纹背景，边框细腻，表头加粗 |
|
||
| 分隔线 | 细线样式，淡化处理 |
|
||
|
||
#### 代码高亮方案
|
||
|
||
- 使用流行的语法高亮主题（如 One Dark Pro、Nord）
|
||
- 支持多种编程语言识别
|
||
- 提供一键复制代码功能
|
||
- 显示语言标识和行号
|
||
|
||
#### 互动操作区
|
||
|
||
- **返回按钮**：返回文章列表页
|
||
- **分享功能**：支持复制链接、分享到社交平台
|
||
- **目录导航**：长文章自动生成目录，侧边栏固定显示
|
||
- **上/下篇导航**：快速跳转到相邻文章
|
||
|
||
### 关于页面设计
|
||
|
||
#### 内容结构
|
||
|
||
```mermaid
|
||
graph TB
|
||
About[关于页面]
|
||
Profile[个人简介区]
|
||
Skills[技能标签云]
|
||
Contact[联系方式区]
|
||
|
||
About --> Profile
|
||
About --> Skills
|
||
About --> Contact
|
||
|
||
Profile --> Avatar[头像]
|
||
Profile --> Bio[个人介绍]
|
||
|
||
Skills --> TagCloud[技能标签]
|
||
|
||
Contact --> Email[邮箱]
|
||
Contact --> Social[社交链接]
|
||
```
|
||
|
||
#### 个人简介区
|
||
|
||
- **头像展示**：圆形头像，尺寸 120-150px
|
||
- **个人介绍**：多段落文本，支持 Markdown 格式
|
||
- **职业标签**：简短的职业或身份描述
|
||
|
||
#### 技能标签云
|
||
|
||
- 以标签形式展示擅长的技术或领域
|
||
- 不同标签使用不同配色区分
|
||
- 可选实现标签大小与熟练度关联
|
||
|
||
#### 联系方式区
|
||
|
||
- **邮箱地址**：点击可直接发送邮件
|
||
- **社交媒体**：GitHub、Twitter、微信等，图标化展示
|
||
- **友情链接**：推荐的博客或网站
|
||
|
||
### 页头组件设计
|
||
|
||
#### 布局与结构
|
||
|
||
页头采用固定定位（sticky），始终停留在顶部：
|
||
|
||
| 区域 | 功能 | 位置 |
|
||
|------|------|------|
|
||
| 导航菜单 | 首页、关于等链接 | 左侧 |
|
||
| 博客标志 | 品牌标识或文字 | 左侧（可选） |
|
||
| 主题切换 | 明暗模式切换按钮 | 右侧 |
|
||
| 搜索入口 | 文章搜索功能 | 右侧（可选） |
|
||
|
||
#### 视觉样式
|
||
|
||
- **背景处理**：半透明背景 + 毛玻璃效果（backdrop-filter: blur）
|
||
- **边框**：底部细线分隔
|
||
- **高度**：60-70px，确保不过于占据屏幕空间
|
||
- **响应式**：移动端转为汉堡菜单
|
||
|
||
#### 主题切换功能
|
||
|
||
- 提供明暗模式切换按钮，图标化设计（太阳/月亮图标）
|
||
- 切换时平滑过渡色彩变化
|
||
- 记住用户选择，保存到本地存储
|
||
- 默认跟随系统主题设置
|
||
|
||
### 页脚组件设计
|
||
|
||
#### 内容布局
|
||
|
||
```mermaid
|
||
graph LR
|
||
Footer[页脚]
|
||
Left[左侧区域]
|
||
Center[中央区域]
|
||
Right[右侧区域]
|
||
|
||
Footer --> Left
|
||
Footer --> Center
|
||
Footer --> Right
|
||
|
||
Left --> Copyright[版权信息]
|
||
Center --> Links[友情链接]
|
||
Right --> Social[社交图标]
|
||
```
|
||
|
||
#### 信息展示
|
||
|
||
| 内容 | 示例 | 样式 |
|
||
|------|------|------|
|
||
| 版权声明 | `© 2024 42的博客` | 小字号、次级色 |
|
||
| 备案信息 | ICP 备案号及链接 | 小字号、可点击 |
|
||
| 社交链接 | GitHub、Email 等图标 | 图标按钮，悬停变色 |
|
||
| 技术栈说明 | `Powered by Astro` | 微型字号 |
|
||
|
||
#### 视觉样式
|
||
|
||
- 深色背景（明亮主题下为深灰，暗黑主题下更深）
|
||
- 浅色文字，确保对比度
|
||
- 固定高度 80-100px
|
||
- 内容居中对齐
|
||
|
||
## 内容数据管理
|
||
|
||
### 文章数据结构
|
||
|
||
每篇文章包含以下元数据和内容：
|
||
|
||
| 字段 | 类型 | 说明 | 必需 |
|
||
|------|------|------|------|
|
||
| title | 文本 | 文章标题 | 是 |
|
||
| slug | 文本 | URL 友好的标识符 | 是 |
|
||
| date | 日期 | 发布日期 | 是 |
|
||
| summary | 文本 | 文章摘要，150-200字 | 是 |
|
||
| tags | 标签数组 | 文章分类标签 | 否 |
|
||
| cover | 图片URL | 封面图地址 | 否 |
|
||
| author | 文本 | 作者名称 | 否 |
|
||
| readingTime | 数字 | 预估阅读分钟数 | 否 |
|
||
| content | Markdown | 文章正文内容 | 是 |
|
||
|
||
### 文章存储方案
|
||
|
||
文章以 Markdown 文件形式存储在项目中：
|
||
|
||
- **存储位置**：`/src/content/posts/` 目录
|
||
- **文件命名**：使用 slug 作为文件名，如 `my-first-post.md`
|
||
- **元数据位置**：Markdown 文件的 frontmatter 区域
|
||
- **内容组织**：元数据下方为正文内容
|
||
|
||
### 文章查询与渲染流程
|
||
|
||
```mermaid
|
||
graph LR
|
||
Request[页面请求]
|
||
Read[读取Markdown文件]
|
||
Parse[解析Frontmatter]
|
||
Render[渲染Markdown内容]
|
||
Display[页面展示]
|
||
|
||
Request --> Read
|
||
Read --> Parse
|
||
Parse --> Render
|
||
Render --> Display
|
||
```
|
||
|
||
系统在构建或运行时执行以下步骤：
|
||
|
||
1. 扫描文章目录，获取所有 Markdown 文件
|
||
2. 解析每个文件的 frontmatter，提取元数据
|
||
3. 按发布日期降序排序文章列表
|
||
4. 根据路由参数查找对应文章
|
||
5. 将 Markdown 转换为 HTML 并应用样式
|
||
6. 注入到页面模板中渲染
|
||
|
||
## 响应式设计策略
|
||
|
||
### 断点规划
|
||
|
||
| 设备类型 | 断点范围 | 布局调整 |
|
||
|----------|----------|----------|
|
||
| 手机 | < 640px | 单栏布局，导航折叠，间距缩小 |
|
||
| 平板 | 640px - 1024px | 单栏布局，适度间距 |
|
||
| 桌面 | > 1024px | 最大宽度限制，充分留白 |
|
||
|
||
### 移动端优化
|
||
|
||
- **导航菜单**：转为汉堡菜单，点击展开侧边抽屉
|
||
- **文章卡片**：移除复杂效果，简化布局
|
||
- **字体大小**：适当缩小，保证可读性
|
||
- **图片处理**：自适应宽度，延迟加载
|
||
- **触摸优化**：增大点击区域，至少 44x44px
|
||
|
||
## 性能优化策略
|
||
|
||
### 加载性能
|
||
|
||
- **图片优化**：使用现代图片格式（WebP），响应式图片加载
|
||
- **懒加载**：文章列表和图片按需加载
|
||
- **代码分割**：页面级别的代码分割，减少初始加载体积
|
||
- **字体优化**：使用系统字体优先，减少自定义字体加载
|
||
|
||
### 渲染性能
|
||
|
||
- **静态生成**：利用 Astro 的静态生成能力，预渲染页面
|
||
- **CSS 优化**：提取关键 CSS，内联首屏样式
|
||
- **动画性能**：使用 transform 和 opacity 实现动画，避免重排
|
||
- **虚拟滚动**：长列表场景下考虑虚拟滚动
|
||
|
||
### 缓存策略
|
||
|
||
- **静态资源**：设置长期缓存，文件名包含哈希值
|
||
- **API 数据**：合理使用浏览器缓存
|
||
- **服务端缓存**：启用 CDN 加速静态内容分发
|
||
|
||
## 可访问性设计
|
||
|
||
### 语义化 HTML
|
||
|
||
- 使用正确的 HTML5 语义标签（header, nav, main, article, footer）
|
||
- 标题层级合理，避免跳级
|
||
- 列表使用正确的 ul/ol 标签
|
||
|
||
### 键盘导航
|
||
|
||
- 所有交互元素支持键盘操作
|
||
- 明确的焦点指示样式
|
||
- 合理的 Tab 顺序
|
||
|
||
### 屏幕阅读器支持
|
||
|
||
- 图片提供 alt 描述
|
||
- 链接文本有意义，避免"点击这里"
|
||
- ARIA 标签适当使用
|
||
- 颜色对比度符合 WCAG 标准（至少 AA 级别）
|
||
|
||
## 技术实现要点
|
||
|
||
### 路由设计
|
||
|
||
| 路由路径 | 页面组件 | 数据来源 |
|
||
|----------|----------|----------|
|
||
| `/` | `index.astro` | 查询所有文章元数据 |
|
||
| `/posts/[slug]` | `[slug].astro` | 根据 slug 查询单篇文章 |
|
||
| `/about` | `about.astro` | 静态内容 |
|
||
|
||
### 组件组织结构
|
||
|
||
```mermaid
|
||
graph TB
|
||
Components[组件目录]
|
||
Layout[布局组件]
|
||
UI[UI组件]
|
||
Feature[功能组件]
|
||
|
||
Components --> Layout
|
||
Components --> UI
|
||
Components --> Feature
|
||
|
||
Layout --> BaseLayout[基础布局]
|
||
Layout --> PostLayout[文章布局]
|
||
|
||
UI --> Header[页头]
|
||
UI --> Footer[页脚]
|
||
UI --> Card[卡片]
|
||
UI --> Button[按钮]
|
||
UI --> Tag[标签]
|
||
|
||
Feature --> ThemeSwitch[主题切换]
|
||
Feature --> TOC[目录导航]
|
||
Feature --> CodeBlock[代码块]
|
||
```
|
||
|
||
### 状态管理策略
|
||
|
||
- **主题状态**：使用浏览器 localStorage 持久化，页面级别的响应式状态
|
||
- **文章数据**：静态构建时注入，无需客户端状态管理
|
||
- **UI 交互状态**：组件内部 state，如菜单展开/收起
|
||
|
||
### Markdown 处理方案
|
||
|
||
- **解析器选择**：使用 Astro 内置的 Markdown 支持或集成 remark/rehype 插件
|
||
- **语法高亮**：集成 Shiki 或 Prism.js
|
||
- **扩展语法**：支持 GFM（GitHub Flavored Markdown）
|
||
- **自定义渲染**：可为特定元素定制渲染逻辑
|
||
|
||
## 扩展功能规划
|
||
|
||
以下功能为可选的增强方向，可在后续迭代中实现：
|
||
|
||
### 搜索功能
|
||
|
||
- 全文搜索文章内容和标题
|
||
- 实时搜索建议
|
||
- 搜索结果高亮关键词
|
||
|
||
### 文章分类与标签
|
||
|
||
- 按标签筛选文章
|
||
- 标签云展示
|
||
- 分类页面独立展示
|
||
|
||
### 评论系统
|
||
|
||
- 集成第三方评论服务（如 Giscus、Utterances）
|
||
- 评论按时间倒序显示
|
||
- 支持 Markdown 格式评论
|
||
|
||
### RSS 订阅
|
||
|
||
- 生成标准 RSS/Atom feed
|
||
- 在页头提供订阅链接
|
||
- 自动更新 feed 内容
|
||
|
||
### 阅读进度指示
|
||
|
||
- 文章顶部显示阅读进度条
|
||
- 滚动时平滑更新进度
|
||
- 视觉上融入页面设计
|
||
|
||
### 图片预览功能
|
||
|
||
- 点击文章内图片可放大查看
|
||
- 灯箱效果展示
|
||
- 支持键盘左右切换
|
||
|
||
## 设计交付物
|
||
|
||
### 必需实现的页面
|
||
|
||
- 首页（文章列表）
|
||
- 文章详情页
|
||
- 关于页面
|
||
|
||
### 必需实现的组件
|
||
|
||
- 基础布局组件（Layout）
|
||
- 页头组件（Header）
|
||
- 页脚组件（Footer）
|
||
- 文章卡片组件（PostCard）
|
||
- 主题切换组件（ThemeToggle）
|
||
|
||
### 样式系统
|
||
|
||
- CSS 变量定义（色彩、字体、间距）
|
||
- 响应式断点样式
|
||
- Markdown 内容样式
|
||
- 动画过渡效果
|
||
|
||
### 内容准备
|
||
|
||
- 示例文章数据（至少 3-5 篇）
|
||
- 关于页面文案
|
||
- 配置文件（网站标题、描述等）
|
||
|
||
## 设计原则总结
|
||
|
||
### 美观性保证
|
||
|
||
- **一致的视觉语言**：统一的配色、字体、间距和圆角
|
||
- **精致的细节处理**：阴影、过渡动画、悬停效果
|
||
- **呼吸感的留白**：避免拥挤，给予视觉休息空间
|
||
- **高质量的配色**：和谐的色彩搭配，明暗主题都优雅
|
||
|
||
### 用户体验优先
|
||
|
||
- **快速加载**：优化资源体积，提升首屏速度
|
||
- **清晰导航**：用户随时知道自己在哪里，如何返回
|
||
- **易读排版**：舒适的行高、字号和行宽
|
||
- **流畅交互**：所有操作有即时反馈，无卡顿
|
||
|
||
### 可维护性
|
||
|
||
- **组件化设计**：功能模块独立，便于复用和修改
|
||
- **命名规范**：清晰的文件和变量命名
|
||
- **文档齐全**：关键设计决策有记录
|
||
- **扩展友好**：预留扩展接口，便于后续功能添加
|
||
Main[主内容区 Main]
|
||
Footer[页脚 Footer]
|
||
|
||
Layout --> Header
|
||
Layout --> Main
|
||
Layout --> Footer
|
||
|
||
Header --> Nav[导航菜单]
|
||
Header --> Theme[主题切换]
|
||
|
||
Main --> Content[页面内容槽]
|
||
Main --> BgEffect[视觉背景效果]
|
||
|
||
Footer --> Info[版权信息]
|
||
Footer --> Links[社交链接]
|
||
```
|
||
|
||
## 设计系统规范
|
||
|
||
### 色彩体系
|
||
|
||
#### 明亮主题配色方案
|
||
|
||
| 用途 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 主背景色 | `#FAFAFA` | 柔和的浅灰白色，减少视觉疲劳 |
|
||
| 次级背景 | `#FFFFFF` | 纯白色，用于卡片和内容容器 |
|
||
| 主文本色 | `#1A1A1A` | 深灰色，提供良好对比度 |
|
||
| 次级文本色 | `#666666` | 中性灰，用于辅助信息 |
|
||
| 强调色 | `#0066FF` | 明亮蓝色，用于链接和交互元素 |
|
||
| 边框色 | `#E5E5E5` | 浅灰色，用于分隔线和边框 |
|
||
|
||
#### 暗黑主题配色方案
|
||
|
||
| 用途 | 色值 | 说明 |
|
||
|------|------|------|
|
||
| 主背景色 | `#0F0F0F` | 深黑色，护眼且沉浸 |
|
||
| 次级背景 | `#1A1A1A` | 稍浅的黑色，用于卡片和内容容器 |
|
||
| 主文本色 | `#E5E5E5` | 柔和的浅色，确保可读性 |
|
||
| 次级文本色 | `#A0A0A0` | 中性灰，用于辅助信息 |
|
||
| 强调色 | `#3B82F6` | 柔和蓝色，降低视觉刺激 |
|
||
| 边框色 | `#2A2A2A` | 深灰色，用于分隔线和边框 |
|
||
|
||
### 字体排版规范
|
||
|
||
#### 字体家族选择
|
||
|
||
- **主要字体**：系统默认字体栈，确保跨平台一致性
|
||
- 中文：`"PingFang SC", "Microsoft YaHei", "微软雅黑"`
|
||
- 英文：`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue"`
|
||
- 代码：`"JetBrains Mono", "Fira Code", Consolas, Monaco, monospace`
|
||
|
||
#### 字体尺寸规范
|
||
|
||
| 层级 | 尺寸 | 行高 | 用途 |
|
||
|------|------|------|------|
|
||
| H1 标题 | 36px | 1.3 | 文章主标题 |
|
||
| H2 标题 | 28px | 1.4 | 章节标题 |
|
||
| H3 标题 | 22px | 1.4 | 子章节标题 |
|
||
| 正文 | 17px | 1.8 | 文章正文内容 |
|
||
| 小字 | 14px | 1.6 | 元信息、标签等 |
|
||
| 微型字 | 12px | 1.5 | 页脚信息、版权等 |
|
||
|
||
### 间距与尺寸系统
|
||
|
||
采用 8px 为基础单位的间距系统：
|
||
|
||
| 名称 | 数值 | 使用场景 |
|
||
|------|------|----------|
|
||
| xs | 4px | 紧密相关元素的微小间距 |
|
||
| sm | 8px | 小型组件内部间距 |
|
||
| md | 16px | 常规内容间距 |
|
||
| lg | 24px | 区块之间的间距 |
|
||
| xl | 32px | 主要区域分隔 |
|
||
| 2xl | 48px | 大型模块分隔 |
|
||
|
||
### 视觉效果规范
|
||
|
||
#### 圆角设计
|
||
|
||
| 元素类型 | 圆角值 | 说明 |
|
||
|----------|--------|------|
|
||
| 小型元素（按钮、标签） | 6px | 轻微圆角，现代感 |
|
||
| 中型元素（卡片） | 12px | 柔和圆角，亲和力 |
|
||
| 大型容器 | 16px | 明显圆角，层次感 |
|
||
|
||
#### 阴影系统
|
||
|
||
| 层级 | 阴影值 | 使用场景 |
|
||
|------|--------|----------|
|
||
| 浅层阴影 | `0 2px 8px rgba(0,0,0,0.05)` | 卡片悬停、小型浮层 |
|
||
| 中层阴影 | `0 4px 16px rgba(0,0,0,0.08)` | 导航栏、主要卡片 |
|
||
| 深层阴影 | `0 8px 24px rgba(0,0,0,0.12)` | 模态框、重要提示 |
|
||
|
||
#### 动画过渡
|
||
|
||
所有交互动画采用统一的缓动函数和时长：
|
||
|
||
- **标准过渡**：`200ms ease-out` - 用于常规状态变化
|
||
- **快速过渡**：`150ms ease-in-out` - 用于微小元素变化
|
||
- **舒缓过渡**：`300ms cubic-bezier(0.4, 0, 0.2, 1)` - 用于页面级变化
|
||
|
||
## 功能模块设计
|
||
|
||
### 首页设计
|
||
|
||
#### 布局结构
|
||
|
||
首页采用单栏布局，突出内容展示：
|
||
|
||
```mermaid
|
||
graph TB
|
||
Index[首页]
|
||
Hero[顶部横幅区]
|
||
PostList[文章列表区]
|
||
|
||
Index --> Hero
|
||
Index --> PostList
|
||
|
||
Hero --> Title[博客标题]
|
||
Hero --> Desc[个人简介]
|
||
|
||
PostList --> Card1[文章卡片1]
|
||
PostList --> Card2[文章卡片2]
|
||
PostList --> CardN[文章卡片N]
|
||
```
|
||
|
||
#### 顶部横幅区域
|
||
|
||
- **博客标题**：展示博客名称，使用大字号突出显示
|
||
- **个人简介**：简短介绍博主或博客定位，控制在 1-2 行
|
||
- **视觉装饰**：使用渐变背景或几何图案增强视觉吸引力
|
||
|
||
#### 文章列表展示
|
||
|
||
每篇文章以卡片形式呈现，包含以下信息：
|
||
|
||
| 元素 | 展示内容 | 视觉处理 |
|
||
|------|----------|----------|
|
||
| 文章标题 | 完整标题文本 | 大字号、加粗，悬停时变色 |
|
||
| 发布日期 | 格式化的日期 | 小字号、次级文本色 |
|
||
| 文章摘要 | 内容前 150-200 字 | 常规字号、行高适中 |
|
||
| 阅读标签 | 分类或标签名称 | 小型标签样式，配色醒目 |
|
||
| 阅读时长 | 预估阅读分钟数 | 小字号、图标配合 |
|
||
|
||
#### 交互行为设计
|
||
|
||
- 卡片整体可点击，引导用户进入文章详情
|
||
- 鼠标悬停时，卡片轻微上浮并显示阴影
|
||
- 卡片间距适中，视觉呼吸感良好
|
||
- 支持渐进式加载，优化长列表性能
|
||
|
||
### 文章详情页设计
|
||
|
||
#### 布局结构
|
||
|
||
文章页采用居中阅读布局，最大宽度控制在 720-800px，确保舒适的阅读行宽：
|
||
|
||
```mermaid
|
||
graph TB
|
||
Post[文章详情页]
|
||
Meta[文章元信息区]
|
||
Title[文章标题区]
|
||
Content[文章正文区]
|
||
Actions[互动操作区]
|
||
|
||
Post --> Meta
|
||
Post --> Title
|
||
Post --> Content
|
||
Post --> Actions
|
||
|
||
Meta --> Date[发布日期]
|
||
Meta --> Tags[标签列表]
|
||
Meta --> ReadTime[阅读时长]
|
||
|
||
Content --> MD[Markdown渲染内容]
|
||
|
||
Actions --> Back[返回列表]
|
||
Actions --> Share[分享按钮]
|
||
```
|
||
|
||
#### 文章元信息区
|
||
|
||
- **发布日期**：显示完整日期，格式如 `2024年3月15日`
|
||
- **标签**：彩色标签样式，点击可筛选同类文章
|
||
- **阅读时长**：基于字数自动计算预估时间
|
||
- **作者信息**：可选展示作者名称和头像
|
||
|
||
#### 正文内容渲染
|
||
|
||
支持完整的 Markdown 语法，包含以下元素的样式优化：
|
||
|
||
| Markdown 元素 | 视觉设计 |
|
||
|---------------|----------|
|
||
| 标题（H1-H6） | 层级分明的字号和间距，H2 级别添加下划线装饰 |
|
||
| 段落 | 充足的行高（1.8），段落间距适中 |
|
||
| 引用块 | 左侧彩色边框，背景色区分，斜体文字 |
|
||
| 代码块 | 深色背景主题，语法高亮，行号显示，复制按钮 |
|
||
| 行内代码 | 浅色背景，等宽字体，轻微圆角 |
|
||
| 链接 | 强调色显示，悬停下划线 |
|
||
| 列表 | 有序/无序列表样式优化，层级缩进清晰 |
|
||
| 图片 | 自适应宽度，添加圆角和阴影，支持点击放大 |
|
||
| 表格 | 斑马纹背景，边框细腻，表头加粗 |
|
||
| 分隔线 | 细线样式，淡化处理 |
|
||
|
||
#### 代码高亮方案
|
||
|
||
- 使用流行的语法高亮主题（如 One Dark Pro、Nord）
|
||
- 支持多种编程语言识别
|
||
- 提供一键复制代码功能
|
||
- 显示语言标识和行号
|
||
|
||
#### 互动操作区
|
||
|
||
- **返回按钮**：返回文章列表页
|
||
- **分享功能**：支持复制链接、分享到社交平台
|
||
- **目录导航**：长文章自动生成目录，侧边栏固定显示
|
||
- **上/下篇导航**：快速跳转到相邻文章
|
||
|
||
### 关于页面设计
|
||
|
||
#### 内容结构
|
||
|
||
```mermaid
|
||
graph TB
|
||
About[关于页面]
|
||
Profile[个人简介区]
|
||
Skills[技能标签云]
|
||
Contact[联系方式区]
|
||
|
||
About --> Profile
|
||
About --> Skills
|
||
About --> Contact
|
||
|
||
Profile --> Avatar[头像]
|
||
Profile --> Bio[个人介绍]
|
||
|
||
Skills --> TagCloud[技能标签]
|
||
|
||
Contact --> Email[邮箱]
|
||
Contact --> Social[社交链接]
|
||
```
|
||
|
||
#### 个人简介区
|
||
|
||
- **头像展示**：圆形头像，尺寸 120-150px
|
||
- **个人介绍**：多段落文本，支持 Markdown 格式
|
||
- **职业标签**：简短的职业或身份描述
|
||
|
||
#### 技能标签云
|
||
|
||
- 以标签形式展示擅长的技术或领域
|
||
- 不同标签使用不同配色区分
|
||
- 可选实现标签大小与熟练度关联
|
||
|
||
#### 联系方式区
|
||
|
||
- **邮箱地址**：点击可直接发送邮件
|
||
- **社交媒体**：GitHub、Twitter、微信等，图标化展示
|
||
- **友情链接**：推荐的博客或网站
|
||
|
||
### 页头组件设计
|
||
|
||
#### 布局与结构
|
||
|
||
页头采用固定定位（sticky），始终停留在顶部：
|
||
|
||
| 区域 | 功能 | 位置 |
|
||
|------|------|------|
|
||
| 导航菜单 | 首页、关于等链接 | 左侧 |
|
||
| 博客标志 | 品牌标识或文字 | 左侧（可选） |
|
||
| 主题切换 | 明暗模式切换按钮 | 右侧 |
|
||
| 搜索入口 | 文章搜索功能 | 右侧（可选） |
|
||
|
||
#### 视觉样式
|
||
|
||
- **背景处理**：半透明背景 + 毛玻璃效果（backdrop-filter: blur）
|
||
- **边框**：底部细线分隔
|
||
- **高度**：60-70px，确保不过于占据屏幕空间
|
||
- **响应式**：移动端转为汉堡菜单
|
||
|
||
#### 主题切换功能
|
||
|
||
- 提供明暗模式切换按钮，图标化设计（太阳/月亮图标）
|
||
- 切换时平滑过渡色彩变化
|
||
- 记住用户选择，保存到本地存储
|
||
- 默认跟随系统主题设置
|
||
|
||
### 页脚组件设计
|
||
|
||
#### 内容布局
|
||
|
||
```mermaid
|
||
graph LR
|
||
Footer[页脚]
|
||
Left[左侧区域]
|
||
Center[中央区域]
|
||
Right[右侧区域]
|
||
|
||
Footer --> Left
|
||
Footer --> Center
|
||
Footer --> Right
|
||
|
||
Left --> Copyright[版权信息]
|
||
Center --> Links[友情链接]
|
||
Right --> Social[社交图标]
|
||
```
|
||
|
||
#### 信息展示
|
||
|
||
| 内容 | 示例 | 样式 |
|
||
|------|------|------|
|
||
| 版权声明 | `© 2024 42的博客` | 小字号、次级色 |
|
||
| 备案信息 | ICP 备案号及链接 | 小字号、可点击 |
|
||
| 社交链接 | GitHub、Email 等图标 | 图标按钮，悬停变色 |
|
||
| 技术栈说明 | `Powered by Astro` | 微型字号 |
|
||
|
||
#### 视觉样式
|
||
|
||
- 深色背景（明亮主题下为深灰，暗黑主题下更深）
|
||
- 浅色文字，确保对比度
|
||
- 固定高度 80-100px
|
||
- 内容居中对齐
|
||
|
||
## 内容数据管理
|
||
|
||
### 文章数据结构
|
||
|
||
每篇文章包含以下元数据和内容：
|
||
|
||
| 字段 | 类型 | 说明 | 必需 |
|
||
|------|------|------|------|
|
||
| title | 文本 | 文章标题 | 是 |
|
||
| slug | 文本 | URL 友好的标识符 | 是 |
|
||
| date | 日期 | 发布日期 | 是 |
|
||
| summary | 文本 | 文章摘要，150-200字 | 是 |
|
||
| tags | 标签数组 | 文章分类标签 | 否 |
|
||
| cover | 图片URL | 封面图地址 | 否 |
|
||
| author | 文本 | 作者名称 | 否 |
|
||
| readingTime | 数字 | 预估阅读分钟数 | 否 |
|
||
| content | Markdown | 文章正文内容 | 是 |
|
||
|
||
### 文章存储方案
|
||
|
||
文章以 Markdown 文件形式存储在项目中：
|
||
|
||
- **存储位置**：`/src/content/posts/` 目录
|
||
- **文件命名**：使用 slug 作为文件名，如 `my-first-post.md`
|
||
- **元数据位置**：Markdown 文件的 frontmatter 区域
|
||
- **内容组织**：元数据下方为正文内容
|
||
|
||
### 文章查询与渲染流程
|
||
|
||
```mermaid
|
||
graph LR
|
||
Request[页面请求]
|
||
Read[读取Markdown文件]
|
||
Parse[解析Frontmatter]
|
||
Render[渲染Markdown内容]
|
||
Display[页面展示]
|
||
|
||
Request --> Read
|
||
Read --> Parse
|
||
Parse --> Render
|
||
Render --> Display
|
||
```
|
||
|
||
系统在构建或运行时执行以下步骤：
|
||
|
||
1. 扫描文章目录，获取所有 Markdown 文件
|
||
2. 解析每个文件的 frontmatter，提取元数据
|
||
3. 按发布日期降序排序文章列表
|
||
4. 根据路由参数查找对应文章
|
||
5. 将 Markdown 转换为 HTML 并应用样式
|
||
6. 注入到页面模板中渲染
|
||
|
||
## 响应式设计策略
|
||
|
||
### 断点规划
|
||
|
||
| 设备类型 | 断点范围 | 布局调整 |
|
||
|----------|----------|----------|
|
||
| 手机 | < 640px | 单栏布局，导航折叠，间距缩小 |
|
||
| 平板 | 640px - 1024px | 单栏布局，适度间距 |
|
||
| 桌面 | > 1024px | 最大宽度限制，充分留白 |
|
||
|
||
### 移动端优化
|
||
|
||
- **导航菜单**：转为汉堡菜单，点击展开侧边抽屉
|
||
- **文章卡片**：移除复杂效果，简化布局
|
||
- **字体大小**：适当缩小，保证可读性
|
||
- **图片处理**：自适应宽度，延迟加载
|
||
- **触摸优化**：增大点击区域，至少 44x44px
|
||
|
||
## 性能优化策略
|
||
|
||
### 加载性能
|
||
|
||
- **图片优化**：使用现代图片格式（WebP），响应式图片加载
|
||
- **懒加载**：文章列表和图片按需加载
|
||
- **代码分割**：页面级别的代码分割，减少初始加载体积
|
||
- **字体优化**：使用系统字体优先，减少自定义字体加载
|
||
|
||
### 渲染性能
|
||
|
||
- **静态生成**：利用 Astro 的静态生成能力，预渲染页面
|
||
- **CSS 优化**：提取关键 CSS，内联首屏样式
|
||
- **动画性能**：使用 transform 和 opacity 实现动画，避免重排
|
||
- **虚拟滚动**：长列表场景下考虑虚拟滚动
|
||
|
||
### 缓存策略
|
||
|
||
- **静态资源**：设置长期缓存，文件名包含哈希值
|
||
- **API 数据**：合理使用浏览器缓存
|
||
- **服务端缓存**：启用 CDN 加速静态内容分发
|
||
|
||
## 可访问性设计
|
||
|
||
### 语义化 HTML
|
||
|
||
- 使用正确的 HTML5 语义标签（header, nav, main, article, footer）
|
||
- 标题层级合理，避免跳级
|
||
- 列表使用正确的 ul/ol 标签
|
||
|
||
### 键盘导航
|
||
|
||
- 所有交互元素支持键盘操作
|
||
- 明确的焦点指示样式
|
||
- 合理的 Tab 顺序
|
||
|
||
### 屏幕阅读器支持
|
||
|
||
- 图片提供 alt 描述
|
||
- 链接文本有意义，避免"点击这里"
|
||
- ARIA 标签适当使用
|
||
- 颜色对比度符合 WCAG 标准（至少 AA 级别）
|
||
|
||
## 技术实现要点
|
||
|
||
### 路由设计
|
||
|
||
| 路由路径 | 页面组件 | 数据来源 |
|
||
|----------|----------|----------|
|
||
| `/` | `index.astro` | 查询所有文章元数据 |
|
||
| `/posts/[slug]` | `[slug].astro` | 根据 slug 查询单篇文章 |
|
||
| `/about` | `about.astro` | 静态内容 |
|
||
|
||
### 组件组织结构
|
||
|
||
```mermaid
|
||
graph TB
|
||
Components[组件目录]
|
||
Layout[布局组件]
|
||
UI[UI组件]
|
||
Feature[功能组件]
|
||
|
||
Components --> Layout
|
||
Components --> UI
|
||
Components --> Feature
|
||
|
||
Layout --> BaseLayout[基础布局]
|
||
Layout --> PostLayout[文章布局]
|
||
|
||
UI --> Header[页头]
|
||
UI --> Footer[页脚]
|
||
UI --> Card[卡片]
|
||
UI --> Button[按钮]
|
||
UI --> Tag[标签]
|
||
|
||
Feature --> ThemeSwitch[主题切换]
|
||
Feature --> TOC[目录导航]
|
||
Feature --> CodeBlock[代码块]
|
||
```
|
||
|
||
### 状态管理策略
|
||
|
||
- **主题状态**：使用浏览器 localStorage 持久化，页面级别的响应式状态
|
||
- **文章数据**：静态构建时注入，无需客户端状态管理
|
||
- **UI 交互状态**：组件内部 state，如菜单展开/收起
|
||
|
||
### Markdown 处理方案
|
||
|
||
- **解析器选择**：使用 Astro 内置的 Markdown 支持或集成 remark/rehype 插件
|
||
- **语法高亮**：集成 Shiki 或 Prism.js
|
||
- **扩展语法**：支持 GFM（GitHub Flavored Markdown）
|
||
- **自定义渲染**：可为特定元素定制渲染逻辑
|
||
|
||
## 扩展功能规划
|
||
|
||
以下功能为可选的增强方向，可在后续迭代中实现：
|
||
|
||
### 搜索功能
|
||
|
||
- 全文搜索文章内容和标题
|
||
- 实时搜索建议
|
||
- 搜索结果高亮关键词
|
||
|
||
### 文章分类与标签
|
||
|
||
- 按标签筛选文章
|
||
- 标签云展示
|
||
- 分类页面独立展示
|
||
|
||
### 评论系统
|
||
|
||
- 集成第三方评论服务（如 Giscus、Utterances）
|
||
- 评论按时间倒序显示
|
||
- 支持 Markdown 格式评论
|
||
|
||
### RSS 订阅
|
||
|
||
- 生成标准 RSS/Atom feed
|
||
- 在页头提供订阅链接
|
||
- 自动更新 feed 内容
|
||
|
||
### 阅读进度指示
|
||
|
||
- 文章顶部显示阅读进度条
|
||
- 滚动时平滑更新进度
|
||
- 视觉上融入页面设计
|
||
|
||
### 图片预览功能
|
||
|
||
- 点击文章内图片可放大查看
|
||
- 灯箱效果展示
|
||
- 支持键盘左右切换
|
||
|
||
## 设计交付物
|
||
|
||
### 必需实现的页面
|
||
|
||
- 首页（文章列表）
|
||
- 文章详情页
|
||
- 关于页面
|
||
|
||
### 必需实现的组件
|
||
|
||
- 基础布局组件（Layout）
|
||
- 页头组件（Header）
|
||
- 页脚组件（Footer）
|
||
- 文章卡片组件（PostCard）
|
||
- 主题切换组件（ThemeToggle）
|
||
|
||
### 样式系统
|
||
|
||
- CSS 变量定义（色彩、字体、间距）
|
||
- 响应式断点样式
|
||
- Markdown 内容样式
|
||
- 动画过渡效果
|
||
|
||
### 内容准备
|
||
|
||
- 示例文章数据（至少 3-5 篇）
|
||
- 关于页面文案
|
||
- 配置文件（网站标题、描述等）
|
||
|
||
## 设计原则总结
|
||
|
||
### 美观性保证
|
||
|
||
- **一致的视觉语言**：统一的配色、字体、间距和圆角
|
||
- **精致的细节处理**：阴影、过渡动画、悬停效果
|
||
- **呼吸感的留白**：避免拥挤，给予视觉休息空间
|
||
- **高质量的配色**：和谐的色彩搭配，明暗主题都优雅
|
||
|
||
### 用户体验优先
|
||
|
||
- **快速加载**：优化资源体积，提升首屏速度
|
||
- **清晰导航**：用户随时知道自己在哪里，如何返回
|
||
- **易读排版**：舒适的行高、字号和行宽
|
||
- **流畅交互**：所有操作有即时反馈，无卡顿
|
||
|
||
### 可维护性
|
||
|
||
- **组件化设计**：功能模块独立，便于复用和修改
|
||
- **命名规范**：清晰的文件和变量命名
|
||
- **文档齐全**：关键设计决策有记录
|
||
- **扩展友好**：预留扩展接口，便于后续功能添加
|