docs(readme): 更新项目结构与CSS规范说明
- 添加详细的项目目录结构图 - 补充CSS命名与样式组织规范 - 完善主题管理与第三方组件样式说明 - 更新部署与自定义指南链接描述 - 增加待办事项清单及已完成任务列表 - 修复文档中的拼写错误与格式问题
This commit is contained in:
hehh
107
DEPLOY.md
107
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）
|
## 站点配置（js/config.js）
|
||||||
|
|
||||||
- GitHub 与 RSS
|
- GitHub 与 RSS
|
||||||
@@ -136,11 +194,52 @@ server {
|
|||||||
- GitHub/RSS 数据为空
|
- GitHub/RSS 数据为空
|
||||||
- 检查 `SiteConfig` 中的用户名与 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 属性完善）
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
96
README.md
96
README.md
@@ -63,7 +63,7 @@
|
|||||||
- **Tech Universe**：PC 3D 标签球；移动端三行滚动标签
|
- **Tech Universe**：PC 3D 标签球；移动端三行滚动标签
|
||||||
- **Interests**：两列卡片，圆角玻璃态，白天清爽、夜间半透明深色
|
- **Interests**：两列卡片，圆角玻璃态，白天清爽、夜间半透明深色
|
||||||
- **Open Source**：GitHub 仓库列表，星标与分支信息
|
- **Open Source**：GitHub 仓库列表，星标与分支信息
|
||||||
- **Latest Posts**：RSS 文章列表，标题/日期/分类
|
- **Latest Posts**：RSS 文文章列表，标题/日期/分类
|
||||||
- **Comments**：Artalk 评论区域，桌/移端响应式优化
|
- **Comments**：Artalk 评论区域，桌/移端响应式优化
|
||||||
|
|
||||||
## ⚙️ 技术栈与工程细节
|
## ⚙️ 技术栈与工程细节
|
||||||
@@ -74,6 +74,64 @@
|
|||||||
- **内容聚合**：RSS 解析通过 DOMParser，失败时降级本地 JSON 或默认数据
|
- **内容聚合**：RSS 解析通过 DOMParser，失败时降级本地 JSON 或默认数据
|
||||||
- **交互体验**：骨架加载与淡入动画、移动端可拖拽悬浮工具、ARIA 辅助属性
|
- **交互体验**：骨架加载与淡入动画、移动端可拖拽悬浮工具、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
|
```bash
|
||||||
@@ -95,6 +153,42 @@ open about.html
|
|||||||
请阅读《部署与自定义指南》获取详细说明：
|
请阅读《部署与自定义指南》获取详细说明：
|
||||||
- [DEPLOY.md](./DEPLOY.md)
|
- [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 属性完善）
|
||||||
|
|
||||||
## 🙏 鸣谢与致敬
|
## 🙏 鸣谢与致敬
|
||||||
|
|
||||||
本项目在开发过程中参考和借鉴了以下开源项目：
|
本项目在开发过程中参考和借鉴了以下开源项目：
|
||||||
|
|||||||
Reference in New Issue
Block a user