From f0b6aadb863541664695bfc8a1bb5bf96a4a1da0 Mon Sep 17 00:00:00 2001 From: Zuoling Rong Date: Sat, 1 Feb 2025 18:51:13 +0800 Subject: [PATCH] Update README.md --- README.md | 315 +++++++++++++++--------------------------------------- 1 file changed, 89 insertions(+), 226 deletions(-) diff --git a/README.md b/README.md index 77b59b0..f014a48 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,32 @@ # MeNav - 个人导航站 -一个美观、响应式的个人导航网站,集成了搜索功能和分类展示。支持通过配置文件管理网站内容,自动构建部署。 +一个简洁美观的个人导航网站,帮助你整理和展示你的网络收藏。 + +## 在线预览 + +访问:[https://rzlnb.github.io/menav/](https://rzlnb.github.io/menav/) ## 功能特点 -- 🎯 分类展示:首页、项目、文章和友链四大版块 -- 🔍 实时搜索:支持跨页面快速搜索 -- 📱 响应式设计:完美适配移动端和桌面端 -- 🎨 现代化界面:优雅的动画和过渡效果 -- 🌙 暗色主题:护眼的深色模式 -- 🚀 自动化部署:支持多种部署方式 -- ⚙️ 配置驱动:通过 YAML 文件管理内容 +- 🎨 简洁美观的界面设计 +- 📱 响应式布局,支持移动端 +- 🔍 实时搜索功能 +- 🎯 分类展示网站链接 +- 👥 支持展示社交媒体链接 +- 📝 支持多个内容页面(首页、项目、文章、友链) -## 部署方式 +## 技术栈 -### 1. GitHub Pages 部署(最简单) +- HTML5 + CSS3 +- JavaScript (原生) +- Font Awesome 图标 +- GitHub Pages / Cloudflare Pages 托管 -适合个人使用,完全免费,自动部署。 +## 快速开始 -1. Fork 本仓库 +1. 克隆仓库 ```bash -# 1. 点击 GitHub 页面右上角的 Fork 按钮 -# 2. 选择你的账号 -``` - -2. 设置仓库(可选) -```bash -# 如果需要,可以将仓库设为私有 -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 +git clone https://github.com/RZLNB/menav.git cd menav ``` @@ -62,93 +35,77 @@ cd menav npm install ``` -3. 设置定时任务 +3. 修改配置 +编辑 `config.yml` 文件,根据你的需求修改网站内容: +- 修改网站基本信息 +- 添加/修改导航链接 +- 自定义社交媒体链接 +- 更新个人项目展示 +- 添加友情链接等 + +4. 本地预览 ```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 ``` +然后在浏览器中打开 `index.html` 文件 -3. 部署生成的文件 -```bash -# 生成的文件在根目录: -- index.html -- style.css -- script.js +## 部署方式 -# 将这些文件上传到你的网站空间 -``` +### GitHub Pages 部署 -### 4. Cloudflare Pages 部署 +注意:GitHub Pages 在免费计划下只支持公开仓库。如果你需要保持仓库私有,建议: +- 升级到 GitHub Pro 或更高级的付费计划 +- 或使用 Cloudflare Pages 部署(支持私有仓库) -适合需要 CDN 加速和免费托管的场景。 +部署步骤: +1. Fork 这个仓库 +2. 修改你的配置 +3. 推送到GitHub +4. 启用GitHub Pages(选择 gh-pages 分支) -1. Fork 仓库并连接到 Cloudflare -```bash -# 1. Fork 本仓库 -# 2. 登录 Cloudflare Dashboard -# 3. Pages -> Create a project -> Connect to Git -# 4. 选择你的仓库 -``` +### Cloudflare Pages 部署 -2. 配置构建设置 -```bash -# Build settings: -Build command: npm run generate -Build output directory: / -``` +支持公开和私有仓库,完全免费。 -3. 环境变量(可选) -```bash -NODE_VERSION: 16 -``` +1. Fork 仓库到你的GitHub账号 -4. 部署 -```bash -# 1. 修改配置 -# 2. 推送到 GitHub -# 3. Cloudflare Pages 会自动构建和部署 -``` +2. 登录 Cloudflare Dashboard + - 进入 Pages 页面 + - 点击 "Create a project" + - 选择 "Connect to Git" + - 选择你fork的仓库 -## 配置说明 +3. 设置构建配置 + - 构建命令:`npm run generate` + - 构建输出目录:`/` + - Node.js 版本:`16`(或更高版本) -`config.yml` 文件结构: +4. 环境变量(可选) + ``` + NODE_VERSION: 16 + ``` + +5. 部署 + - 点击 "Save and Deploy" + - Cloudflare Pages 会自动构建和部署你的网站 + - 部署完成后,你会得到一个 `*.pages.dev` 的域名 + +6. 自定义域名(可选) + - 在项目设置中添加你的自定义域名 + - 按照 Cloudflare 的说明配置 DNS 记录 + +优点: +- 全球 CDN 加速 +- 自动 HTTPS +- 持续部署 +- 免费额度大 +- 可以绑定自定义域名 + +## 自定义配置 + +### 配置文件结构 + +`config.yml` 包含以下主要部分: ```yaml # 网站基本信息 @@ -161,7 +118,7 @@ site: profile: title: 欢迎语 subtitle: 副标题 - description: 个人描述 + description: 描述 # 导航菜单 navigation: @@ -170,7 +127,14 @@ navigation: id: 页面ID active: 是否激活 -# 分类示例 +# 更多配置... +``` + +### 添加新的网站链接 + +在 `config.yml` 中相应的分类下添加新站点: + +```yaml categories: - name: 分类名称 icon: 分类图标 @@ -181,111 +145,10 @@ categories: 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 . -``` - -## 更新上游代码 - -如果你 Fork 了本项目,可以通过以下方式获取更新: - -```bash -# 1. 添加上游仓库 -git remote add upstream https://github.com/原始用户名/menav.git - -# 2. 获取更新 -git fetch upstream - -# 3. 合并更新(注意处理配置文件的冲突) -git merge upstream/main -``` - -## 自定义主题 - -1. 修改 `style.css` -```css -/* 修改主题色 */ -:root { - --primary-color: #你的颜色; - --background-color: #你的颜色; - /* 其他颜色变量 */ -} -``` - -2. 添加新的样式 -```css -/* 添加自定义样式 */ -.your-custom-class { - /* 你的样式 */ -} -``` - -## 常见问题 - -1. 如何添加新网站? -- 编辑 `config.yml` 文件 -- 在相应分类下添加网站信息 -- 提交并推送更改 - -2. 如何修改图标? -- 使用 Font Awesome 图标 -- 在 [Font Awesome 网站](https://fontawesome.com/icons) 查找图标 -- 复制图标类名(例如:`fas fa-home`) - -3. 部署失败? -- 检查 GitHub Pages 设置 -- 确认 Actions 权限 -- 查看 Actions 日志 - -## 贡献指南 - -1. Fork 项目 -2. 创建特性分支 -```bash -git checkout -b feature/AmazingFeature -``` -3. 提交改动 -```bash -git commit -m 'Add some AmazingFeature' -``` -4. 推送分支 -```bash -git push origin feature/AmazingFeature -``` -5. 创建 Pull Request +欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。 ## 许可证 -本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件 - -## 致谢 - -- [Font Awesome](https://fontawesome.com/) - 图标库 -- [GitHub Pages](https://pages.github.com/) - 托管服务 -- [GitHub Actions](https://github.com/features/actions) - 自动化部署 \ No newline at end of file +MIT License \ No newline at end of file