Update README.md

This commit is contained in:
Zuoling Rong
2025-02-01 18:51:13 +08:00
parent 9a70ec863a
commit f0b6aadb86

315
README.md
View File

@@ -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) - 自动化部署
MIT License