docs(readme): 更新项目结构与CSS规范说明

- 添加详细的项目目录结构图 - 补充CSS命名与样式组织规范 - 完善主题管理与第三方组件样式说明 - 更新部署与自定义指南链接描述 - 增加待办事项清单及已完成任务列表 - 修复文档中的拼写错误与格式问题
2025-11-25 14:46:34 +08:00
parent b6d0f51a98
commit f23ac23781
2 changed files with 198 additions and 5 deletions
--- a/DEPLOY.md
+++ b/DEPLOY.md
@@ -92,6 +92,64 @@ server {
 }
 ```

+## 项目结构规范
+
+```
+Home/
+├── index.html              # 主页
+├── about.html              # 关于页面
+├── README.md               # 项目说明文档
+├── DEPLOY.md               # 部署与自定义指南
+├── LICENSE                 # 开源许可证
+├── CNAME                   # 自定义域名配置
+├── vercel.json             # Vercel 配置文件
+├── netlify.toml            # Netlify 配置文件
+├── _headers                # Netlify 安全头配置
+├── _redirects              # Netlify 重定向配置
+├── favicon.ico             # 网站图标
+├── apple-touch-icon.png    # iOS 主屏图标
+├── css/
+│   ├── about.css           # 关于页面样式
+│   ├── style.css           # 主页样式
+│   ├── artalk.css          # 评论系统样式
+│   └── iconfont.css        # 字体图标样式
+├── js/
+│   ├── config.js           # 全局配置文件
+│   ├── main.js             # 主页脚本
+│   ├── about.js            # 关于页面脚本
+│   ├── bj.js               # 背景效果脚本
+│   └── ...                 # 其他功能脚本
+├── data/
+│   ├── articles.json       # 文章数据
+│   └── ...                 # 其他数据文件
+└── images/
+    ├── home.png            # 主页预览图
+    ├── about-day.png       # 关于页面白天模式预览图
+    ├── about-night.png     # 关于页面夜间模式预览图
+    └── ...                 # 其他图片资源
+```
+
+## CSS 规范
+
+### 命名规范
+- 使用语义化类名，如 `.profile-content`、`.tech-wrapper`
+- 组件相关类名以组件名开头，如 `.bento-card`、`.glass-panel`
+- 状态类名使用 `is-*` 或 `has-*` 前缀，如 `.is-active`
+
+### 样式组织
+- 使用 CSS 自定义属性（变量）管理主题色和常用值
+- 遵循移动优先的响应式设计原则
+- 组件样式与全局样式分离，便于维护
+
+### 主题管理
+- 白天模式样式定义在 `:root` 选择器下
+- 夜间模式样式定义在 `[data-theme="night"]` 选择器下
+- 使用 `var(--variable-name)` 引用 CSS 变量
+
+### 第三方组件样式
+- 第三方组件样式独立成专门的 CSS 文件（如 artalk.css）
+- 避免污染主样式文件，保持样式文件职责单一
+
 ## 站点配置（js/config.js）

 - GitHub 与 RSS
@@ -136,11 +194,52 @@ server {
 - GitHub/RSS 数据为空
  - 检查 `SiteConfig` 中的用户名与 RSS 接口；或查看浏览器控制台网络请求

-## 进一步扩展
+## 拓展功能

- 接入更多数据源（如 Twitter/知乎/掘金）
- 为 3D 技术栈添加交互（点击跳链接、标签分组）
- 增加文章详情页与分页列表
+### 添加新的数据源
+1. 在 `js/config.js` 中添加新的配置项
+2. 在 `js/about.js` 的 DataManager 类中添加新的数据获取方法
+3. 创建对应的数据渲染方法
+4. 在 HTML 中添加展示区域
+5. 在 CSS 中添加样式
+
+### 自定义主题色
+1. 修改 `css/about.css` 中的 CSS 变量
+2. 调整 `:root`（白天模式）和 `[data-theme="night"]`（夜间模式）下的颜色值
+3. 确保颜色搭配符合可访问性标准
+
+### 添加新的语言支持
+1. 在 `js/about.js` 的 I18nManager 类中添加新的语言字典
+2. 在 HTML 元素上添加对应的数据属性
+3. 更新语言切换逻辑
+
+## TODO List
+
+### 已完成
+- [x] 实现响应式布局，适配桌面、平板和手机设备
+- [x] 开发白天/夜间主题切换功能
+- [x] 实现中英文国际化支持
+- [x] 集成 Artalk 评论系统
+- [x] 添加 GitHub 项目展示功能
+- [x] 添加博客文章展示功能
+- [x] 实现技术栈 3D 球体效果
+- [x] 添加一键部署到 Vercel、Netlify 等平台的支持
+- [x] 实现移动端优化，包括可拖拽悬浮按钮
+- [x] 添加骨架屏加载效果
+- [x] 实现数据缓存机制，提升页面加载速度
+- [x] 添加淡入动画效果，提升用户体验
+
+### 待完成
+- [ ] 添加更多数据源（如 Twitter、知乎等）
+- [ ] 实现技术栈标签的交互功能（点击跳转链接等）
+- [ ] 添加文章详情页与分页列表功能
+- [ ] 实现更多的个性化定制选项
+- [ ] 添加键盘快捷键支持
+- [ ] 增加更多动画效果和交互细节
+- [ ] 实现 PWA 支持，支持离线访问
+- [ ] 添加更多主题选项（如高对比度模式等）
+- [ ] 实现深色模式下的图片优化处理
+- [ ] 添加无障碍访问支持（ARIA 属性完善）

 ---

--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@
 - **Tech Universe**：PC 3D 标签球；移动端三行滚动标签
 - **Interests**：两列卡片，圆角玻璃态，白天清爽、夜间半透明深色
 - **Open Source**：GitHub 仓库列表，星标与分支信息
- **Latest Posts**：RSS 文章列表，标题/日期/分类
+- **Latest Posts**：RSS 文文章列表，标题/日期/分类
 - **Comments**：Artalk 评论区域，桌/移端响应式优化

 ## ⚙️ 技术栈与工程细节
@@ -74,6 +74,64 @@
 - **内容聚合**：RSS 解析通过 DOMParser，失败时降级本地 JSON 或默认数据
 - **交互体验**：骨架加载与淡入动画、移动端可拖拽悬浮工具、ARIA 辅助属性

+## 📁 项目结构
+
+```
+Home/
+├── index.html              # 主页
+├── about.html              # 关于页面
+├── README.md               # 项目说明文档
+├── DEPLOY.md               # 部署与自定义指南
+├── LICENSE                 # 开源许可证
+├── CNAME                   # 自定义域名配置
+├── vercel.json             # Vercel 配置文件
+├── netlify.toml            # Netlify 配置文件
+├── _headers                # Netlify 安全头配置
+├── _redirects              # Netlify 重定向配置
+├── favicon.ico             # 网站图标
+├── apple-touch-icon.png    # iOS 主屏图标
+├── css/
+│   ├── about.css           # 关于页面样式
+│   ├── style.css           # 主页样式
+│   ├── artalk.css          # 评论系统样式
+│   └── iconfont.css        # 字体图标样式
+├── js/
+│   ├── config.js           # 全局配置文件
+│   ├── main.js             # 主页脚本
+│   ├── about.js            # 关于页面脚本
+│   ├── bj.js               # 背景效果脚本
+│   └── ...                 # 其他功能脚本
+├── data/
+│   ├── articles.json       # 文章数据
+│   └── ...                 # 其他数据文件
+└── images/
+    ├── home.png            # 主页预览图
+    ├── about-day.png       # 关于页面白天模式预览图
+    ├── about-night.png     # 关于页面夜间模式预览图
+    └── ...                 # 其他图片资源
+```
+
+## 🎨 CSS 规范
+
+### 命名规范
+- 使用语义化类名，如 `.profile-content`、`.tech-wrapper`
+- 组件相关类名以组件名开头，如 `.bento-card`、`.glass-panel`
+- 状态类名使用 `is-*` 或 `has-*` 前缀，如 `.is-active`
+
+### 样式组织
+- 使用 CSS 自定义属性（变量）管理主题色和常用值
+- 遵循移动优先的响应式设计原则
+- 组件样式与全局样式分离，便于维护
+
+### 主题管理
+- 白天模式样式定义在 `:root` 选择器下
+- 夜间模式样式定义在 `[data-theme="night"]` 选择器下
+- 使用 `var(--variable-name)` 引用 CSS 变量
+
+### 第三方组件样式
+- 第三方组件样式独立成专门的 CSS 文件（如 artalk.css）
+- 避免污染主样式文件，保持样式文件职责单一
+
 ## 🚀 快速开始

 ```bash
@@ -95,6 +153,42 @@ open about.html
 请阅读《部署与自定义指南》获取详细说明：
 - [DEPLOY.md](./DEPLOY.md)

+详细的部署与自定义指南包含了：
+- 一键部署到主流平台（Vercel、Netlify、Cloudflare Pages）
+- 本地预览方法
+- 生产环境部署配置
+- CSS 规范和结构规范
+- 拓展功能指南
+- 待办事项清单
+
+## 📋 TODO List
+
+### 已完成
+- [x] 实现响应式布局，适配桌面、平板和手机设备
+- [x] 开发白天/夜间主题切换功能
+- [x] 实现中英文国际化支持
+- [x] 集成 Artalk 评论系统
+- [x] 添加 GitHub 项目展示功能
+- [x] 添加博客文章展示功能
+- [x] 实现技术栈 3D 球体效果
+- [x] 添加一键部署到 Vercel、Netlify 等平台的支持
+- [x] 实现移动端优化，包括可拖拽悬浮按钮
+- [x] 添加骨架屏加载效果
+- [x] 实现数据缓存机制，提升页面加载速度
+- [x] 添加淡入动画效果，提升用户体验
+
+### 待完成
+- [ ] 添加更多数据源（如 Twitter、知乎等）
+- [ ] 实现技术栈标签的交互功能（点击跳转链接等）
+- [ ] 添加文章详情页与分页列表功能
+- [ ] 实现更多的个性化定制选项
+- [ ] 添加键盘快捷键支持
+- [ ] 增加更多动画效果和交互细节
+- [ ] 实现 PWA 支持，支持离线访问
+- [ ] 添加更多主题选项（如高对比度模式等）
+- [ ] 实现深色模式下的图片优化处理
+- [ ] 添加无障碍访问支持（ARIA 属性完善）
+
 ## 🙏 鸣谢与致敬

 本项目在开发过程中参考和借鉴了以下开源项目：