From f23ac237819a91902b2f5947acaa39cf6353a79f Mon Sep 17 00:00:00 2001 From: hehh Date: Tue, 25 Nov 2025 14:46:34 +0800 Subject: [PATCH] =?UTF-8?q?docs(readme):=20=E6=9B=B4=E6=96=B0=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=BB=93=E6=9E=84=E4=B8=8ECSS=E8=A7=84=E8=8C=83?= =?UTF-8?q?=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加详细的项目目录结构图 - 补充CSS命名与样式组织规范 - 完善主题管理与第三方组件样式说明 - 更新部署与自定义指南链接描述 - 增加待办事项清单及已完成任务列表 - 修复文档中的拼写错误与格式问题 --- DEPLOY.md | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- README.md | 96 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 198 insertions(+), 5 deletions(-) diff --git a/DEPLOY.md b/DEPLOY.md index cd33512..46c14b4 100644 --- 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 属性完善） --- diff --git a/README.md b/README.md index 3bb8930..ab2a4e8 100644 --- 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 属性完善） + ## 🙏 鸣谢与致敬 本项目在开发过程中参考和借鉴了以下开源项目：