MeNav - 个人导航站
一个美观、响应式的个人导航网站，集成了搜索功能和分类展示。支持通过配置文件管理网站内容，自动构建部署。
功能特点
- 🎯 分类展示：首页、项目、文章和友链四大版块
- 🔍 实时搜索：支持跨页面快速搜索
- 📱 响应式设计：完美适配移动端和桌面端
- 🎨 现代化界面：优雅的动画和过渡效果
- 🌙 暗色主题：护眼的深色模式
- 🚀 自动化部署：支持多种部署方式
- ⚙️ 配置驱动：通过 YAML 文件管理内容
部署方式
1. GitHub Pages 部署（最简单）
适合个人使用，完全免费，自动部署。
- Fork 本仓库
# 1. 点击 GitHub 页面右上角的 Fork 按钮
# 2. 选择你的账号
- 设置仓库（可选）
# 如果需要，可以将仓库设为私有
Settings -> General -> Change repository visibility -> Private
- 启用 GitHub Pages
# 1. 进入仓库设置
Settings -> Pages
# 2. 选择 GitHub Actions 作为来源
- 修改配置
# 编辑 config.yml 文件，添加你的网站内容
git add config.yml
git commit -m "更新配置"
git push
GitHub Actions 会自动构建并部署到 GitHub Pages。
2. 服务器部署（自动构建）
适合需要自定义域名和更多控制的场景。
- 克隆仓库到服务器
git clone https://github.com/你的用户名/menav.git
cd menav
- 安装依赖
npm install
- 设置定时任务
# 编辑 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"
- 配置 Nginx
server {
listen 80;
server_name your-domain.com;
root /path/to/menav;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
3. 本地构建部署
适合已有网站空间，只需要静态文件的场景。
- 克隆仓库
git clone https://github.com/你的用户名/menav.git
cd menav
- 安装依赖并构建
npm install
npm run generate
- 部署生成的文件
# 生成的文件在根目录：
- index.html
- style.css
- script.js
# 将这些文件上传到你的网站空间
4. Cloudflare Pages 部署
适合需要 CDN 加速和免费托管的场景。
- Fork 仓库并连接到 Cloudflare
# 1. Fork 本仓库
# 2. 登录 Cloudflare Dashboard
# 3. Pages -> Create a project -> Connect to Git
# 4. 选择你的仓库
- 配置构建设置
# Build settings:
Build command: npm run generate
Build output directory: /
- 环境变量（可选）
NODE_VERSION: 16
- 部署
# 1. 修改配置
# 2. 推送到 GitHub
# 3. Cloudflare Pages 会自动构建和部署
配置说明
config.yml 文件结构：
# 网站基本信息
site:
title: 网站标题
description: 网站描述
author: 作者名
# 个人信息
profile:
title: 欢迎语
subtitle: 副标题
description: 个人描述
# 导航菜单
navigation:
- name: 菜单名称
icon: 图标类名
id: 页面ID
active: 是否激活
# 分类示例
categories:
- name: 分类名称
icon: 分类图标
sites:
- name: 网站名称
url: 网站地址
icon: 网站图标
description: 网站描述
本地开发
- 克隆仓库
git clone https://github.com/你的用户名/menav.git
cd menav
- 安装依赖
npm install
- 修改配置
# 编辑 config.yml
- 本地预览
# 生成网站
npm run generate
# 启动本地服务器
python -m http.server 8000
# 或
npm install -g serve
serve .
更新上游代码
如果你 Fork 了本项目，可以通过以下方式获取更新：
# 1. 添加上游仓库
git remote add upstream https://github.com/原始用户名/menav.git
# 2. 获取更新
git fetch upstream
# 3. 合并更新（注意处理配置文件的冲突）
git merge upstream/main
自定义主题
- 修改
style.css
/* 修改主题色 */
:root {
--primary-color: #你的颜色;
--background-color: #你的颜色;
/* 其他颜色变量 */
}
- 添加新的样式
/* 添加自定义样式 */
.your-custom-class {
/* 你的样式 */
}
常见问题
- 如何添加新网站？
- 编辑
config.yml文件 - 在相应分类下添加网站信息
- 提交并推送更改
- 如何修改图标？
- 使用 Font Awesome 图标
- 在 Font Awesome 网站 查找图标
- 复制图标类名（例如：
fas fa-home）
- 部署失败？
- 检查 GitHub Pages 设置
- 确认 Actions 权限
- 查看 Actions 日志
贡献指南
- Fork 项目
- 创建特性分支
git checkout -b feature/AmazingFeature
- 提交改动
git commit -m 'Add some AmazingFeature'
- 推送分支
git push origin feature/AmazingFeature
- 创建 Pull Request
许可证
本项目采用 MIT 许可证 - 详见 LICENSE 文件
致谢
- Font Awesome - 图标库
- GitHub Pages - 托管服务
- GitHub Actions - 自动化部署