readme change

.gitignore

@@ -0,0 +1,29 @@
+# 依赖目录
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+
+# 构建产物
+public/
+index.html
+
+# IDE 配置
+.vscode/
+.idea/
+*.sublime-project
+*.sublime-workspace
+
+# 系统文件
+.DS_Store
+Thumbs.db
+
+# 环境变量
+.env
+.env.local
+.env.*.local
+
+# 日志文件
+*.log
+logs/ 

README.md

@@ -1,8 +1,6 @@
-# menav
+# MeNav - 个人导航站
- A personal navigation page that serves as your web identity card and bookmark collection. 一个作为个人网络身份证和网页收藏夹的导航页面。
-# 个人导航站
 
-一个美观、响应式的个人导航网站，集成了搜索功能和分类展示。
+一个美观、响应式的个人导航网站，集成了搜索功能和分类展示。支持通过配置文件管理网站内容，自动构建部署。
 
 ## 功能特点
 
@@ -11,96 +9,283 @@
 - 📱 响应式设计：完美适配移动端和桌面端
 - 🎨 现代化界面：优雅的动画和过渡效果
 - 🌙 暗色主题：护眼的深色模式
-- 🚀 高性能：优化的动画和渲染性能
+- 🚀 自动化部署：支持多种部署方式
+- ⚙️ 配置驱动：通过 YAML 文件管理内容
 
-## 技术栈
+## 部署方式
 
-- HTML5
+### 1. GitHub Pages 部署（最简单）
-- CSS3 (Flexbox, Grid, 动画)
-- JavaScript (ES6+)
-- Font Awesome 图标
 
-## 项目结构
+适合个人使用，完全免费，自动部署。
 
-```
+1. Fork 本仓库
-├── index.html      # 主页面
-├── style.css       # 样式文件
-├── script.js       # 交互脚本
-└── README.md       # 项目文档
-```
-
-## 使用说明
-
-1. 克隆项目到本地：
 ```bash
-git clone [repository-url]
+# 1. 点击 GitHub 页面右上角的 Fork 按钮
+# 2. 选择你的账号
 ```
 
-2. 直接打开 `index.html` 文件或使用本地服务器运行：
+2. 设置仓库（可选）
 ```bash
-# 使用 Python 启动简单的 HTTP 服务器
+# 如果需要，可以将仓库设为私有
+Settings -> General -> Change repository visibility -> Private
+```
+
+3. 启用 GitHub Pages
+```bash
+# 1. 进入仓库设置
+Settings -> Pages
+# 2. 选择 GitHub Actions 作为来源
+```
+
+4. 修改配置
+```bash
+# 编辑 config.yml 文件，添加你的网站内容
+git add config.yml
+git commit -m "更新配置"
+git push
+```
+
+GitHub Actions 会自动构建并部署到 GitHub Pages。
+
+### 2. 服务器部署（自动构建）
+
+适合需要自定义域名和更多控制的场景。
+
+1. 克隆仓库到服务器
+```bash
+git clone https://github.com/你的用户名/menav.git
+cd menav
+```
+
+2. 安装依赖
+```bash
+npm install
+```
+
+3. 设置定时任务
+```bash
+# 编辑 crontab
+crontab -e
+
+# 添加定时任务（每小时构建一次）
+0 * * * * cd /path/to/menav && npm run generate
+
+# 或者使用 watch 模式（需要安装 nodemon）
+npm install -g nodemon
+nodemon --watch config.yml -e yml --exec "npm run generate"
+```
+
+4. 配置 Nginx
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+    root /path/to/menav;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+
+### 3. 本地构建部署
+
+适合已有网站空间，只需要静态文件的场景。
+
+1. 克隆仓库
+```bash
+git clone https://github.com/你的用户名/menav.git
+cd menav
+```
+
+2. 安装依赖并构建
+```bash
+npm install
+npm run generate
+```
+
+3. 部署生成的文件
+```bash
+# 生成的文件在根目录：
+- index.html
+- style.css
+- script.js
+
+# 将这些文件上传到你的网站空间
+```
+
+### 4. Cloudflare Pages 部署
+
+适合需要 CDN 加速和免费托管的场景。
+
+1. Fork 仓库并连接到 Cloudflare
+```bash
+# 1. Fork 本仓库
+# 2. 登录 Cloudflare Dashboard
+# 3. Pages -> Create a project -> Connect to Git
+# 4. 选择你的仓库
+```
+
+2. 配置构建设置
+```bash
+# Build settings:
+Build command: npm run generate
+Build output directory: /
+```
+
+3. 环境变量（可选）
+```bash
+NODE_VERSION: 16
+```
+
+4. 部署
+```bash
+# 1. 修改配置
+# 2. 推送到 GitHub
+# 3. Cloudflare Pages 会自动构建和部署
+```
+
+## 配置说明
+
+`config.yml` 文件结构：
+
+```yaml
+# 网站基本信息
+site:
+  title: 网站标题
+  description: 网站描述
+  author: 作者名
+
+# 个人信息
+profile:
+  title: 欢迎语
+  subtitle: 副标题
+  description: 个人描述
+
+# 导航菜单
+navigation:
+  - name: 菜单名称
+    icon: 图标类名
+    id: 页面ID
+    active: 是否激活
+
+# 分类示例
+categories:
+  - name: 分类名称
+    icon: 分类图标
+    sites:
+      - name: 网站名称
+        url: 网站地址
+        icon: 网站图标
+        description: 网站描述
+```
+
+## 本地开发
+
+1. 克隆仓库
+```bash
+git clone https://github.com/你的用户名/menav.git
+cd menav
+```
+
+2. 安装依赖
+```bash
+npm install
+```
+
+3. 修改配置
+```bash
+# 编辑 config.yml
+```
+
+4. 本地预览
+```bash
+# 生成网站
+npm run generate
+
+# 启动本地服务器
 python -m http.server 8000
+# 或
+npm install -g serve
+serve .
 ```
 
-3. 在浏览器中访问：
+## 更新上游代码
-- 直接打开：双击 `index.html`
-- 本地服务器：访问 `http://localhost:8000`
 
-## 自定义配置
+如果你 Fork 了本项目，可以通过以下方式获取更新：
 
-### 添加新的导航项
+```bash
+# 1. 添加上游仓库
+git remote add upstream https://github.com/原始用户名/menav.git
 
-在 `index.html` 中的相应分类下添加新的卡片：
+# 2. 获取更新
+git fetch upstream
 
-```html
+# 3. 合并更新（注意处理配置文件的冲突）
-<a href="你的链接" class="site-card">
+git merge upstream/main
-    <i class="fas fa-icon"></i>
-    <h3>标题</h3>
-    <p>描述</p>
-</a>
 ```
 
-### 修改样式
+## 自定义主题
 
-可以在 `style.css` 中自定义以下样式：
+1. 修改 `style.css`
+```css
+/* 修改主题色 */
+:root {
+    --primary-color: #你的颜色;
+    --background-color: #你的颜色;
+    /* 其他颜色变量 */
+}
+```
 
-- 主题颜色
+2. 添加新的样式
-- 卡片样式
+```css
-- 动画效果
+/* 添加自定义样式 */
-- 响应式布局
+.your-custom-class {
+    /* 你的样式 */
+}
+```
 
-## 性能优化
+## 常见问题
 
-项目已实现以下优化：
+1. 如何添加新网站？
+- 编辑 `config.yml` 文件
+- 在相应分类下添加网站信息
+- 提交并推送更改
 
-- 使用 `will-change` 优化动画性能
+2. 如何修改图标？
-- 实现搜索防抖
+- 使用 Font Awesome 图标
-- 批量 DOM 更新
+- 在 [Font Awesome 网站](https://fontawesome.com/icons) 查找图标
-- 使用 `requestAnimationFrame` 优化动画
+- 复制图标类名（例如：`fas fa-home`）
-- CSS 动画硬件加速
 
-## 浏览器支持
+3. 部署失败？
-
+- 检查 GitHub Pages 设置
-- Chrome (推荐)
+- 确认 Actions 权限
-- Firefox
+- 查看 Actions 日志
-- Safari
-- Edge
-
-## 开发计划
-
-- [ ] 支持自定义分类
-- [ ] 添加更多动画效果
-- [ ] 支持数据持久化
-- [ ] 添加更多自定义选项
 
 ## 贡献指南
 
 1. Fork 项目
-2. 创建特性分支：`git checkout -b feature/AmazingFeature`
+2. 创建特性分支
-3. 提交改动：`git commit -m 'Add some AmazingFeature'`
+```bash
-4. 推送分支：`git push origin feature/AmazingFeature`
+git checkout -b feature/AmazingFeature
-5. 提交 Pull Request
+```
+3. 提交改动
+```bash
+git commit -m 'Add some AmazingFeature'
+```
+4. 推送分支
+```bash
+git push origin feature/AmazingFeature
+```
+5. 创建 Pull Request
 
 ## 许可证
 
-MIT License - 详见 LICENSE 文件 
+本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件
+
+## 致谢
+
+- [Font Awesome](https://fontawesome.com/) - 图标库
+- [GitHub Pages](https://pages.github.com/) - 托管服务
+- [GitHub Actions](https://github.com/features/actions) - 自动化部署 

config.yml

@@ -8,7 +8,7 @@ site:
 profile:
   title: Hello,
   subtitle: Welcome to My Navigation
-  description:
+  description:8
 
 # 导航菜单
 navigation: