215 lines
5.1 KiB
Markdown
215 lines
5.1 KiB
Markdown
# MeNav - 个人导航站
|
||
|
||
一个个人导航网站，帮助你整理和展示你的网络收藏。
|
||
|
||
## 在线预览
|
||
|
||
访问：[https://rzlnb.github.io/menav/](https://rzlnb.github.io/menav/)
|
||
|
||
## 功能特点
|
||
|
||
- 🎨 简洁美观的界面设计
|
||
- 📱 响应式布局，支持移动端
|
||
- 🔍 实时搜索功能
|
||
- 🎯 分类展示网站链接
|
||
- 👥 支持展示社交媒体链接
|
||
- 📝 支持多个内容页面（首页、项目、文章、友链）
|
||
|
||
## 技术栈
|
||
|
||
- HTML5 + CSS3
|
||
- JavaScript (原生)
|
||
- Font Awesome 图标
|
||
- GitHub Pages / Cloudflare Pages 托管
|
||
|
||
## 快速开始
|
||
|
||
1. 克隆仓库
|
||
```bash
|
||
git clone https://github.com/RZLNB/menav.git
|
||
cd menav
|
||
```
|
||
|
||
2. 安装依赖
|
||
```bash
|
||
# 清理旧的依赖(如果需要)
|
||
rm -rf node_modules
|
||
rm -f package-lock.json
|
||
|
||
# 安装新的依赖
|
||
npm install
|
||
```
|
||
|
||
3. 修改配置
|
||
编辑 `config.yml` 文件，根据你的需求修改网站内容：
|
||
- 修改网站基本信息
|
||
- 添加/修改导航链接
|
||
- 自定义社交媒体链接
|
||
- 更新个人项目展示
|
||
- 添加友情链接等
|
||
|
||
4. 本地预览
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## 部署方式
|
||
|
||
### 快速部署到GitHub Pages
|
||
|
||
#### 第一步：前置设置
|
||
|
||
1. Fork仓库:
|
||
- 点击右上角的 Fork 按钮复制此仓库到您的账号
|
||
|
||
2. 启用必要功能:
|
||
- 进入仓库的 Settings -> General
|
||
- 找到 Features 部分
|
||
- 勾选 "Issues"
|
||
|
||
3. 启用Actions:
|
||
- 进入fork后的仓库
|
||
- 点击顶部的 "Actions" 标签页
|
||
- 点击绿色按钮 "I understand my workflows, go ahead and enable them"
|
||
|
||
4. 配置Pages:
|
||
- 进入仓库的 Settings -> Pages
|
||
- 在 "Build and deployment" 部分
|
||
- Source: 选择 "GitHub Actions"
|
||
|
||
#### 第二步：自定义配置
|
||
|
||
1. 创建个人配置文件:
|
||
- 复制 `config.yml` 为 `config.user.yml`
|
||
- 在 `config.user.yml` 中修改配置
|
||
- 这样在后续同步更新时,您的配置不会被覆盖
|
||
|
||
2. 修改配置信息:
|
||
- 修改网站基本信息
|
||
- 添加/修改导航链接
|
||
- 自定义社交媒体链接
|
||
- 更新个人项目展示
|
||
- 添加友情链接等
|
||
|
||
完成以上步骤后,系统会自动部署您的网站。部署完成后,您可以在 Settings -> Pages 中找到您的网站地址。
|
||
|
||
> 重要提示: 请务必使用 `config.user.yml` 进行配置,这样在同步上游更新时不会丢失您的个人设置。
|
||
|
||
#### 故障排除
|
||
|
||
如果遇到部署问题:
|
||
1. 请确保完成了所有前置设置步骤
|
||
2. 检查每个设置页面是否都点击了 Save 按钮
|
||
3. 如果修改设置后部署仍然失败:
|
||
- 进入 Actions 标签页
|
||
- 找到失败的工作流
|
||
- 点击 "Re-run all jobs" 重新运行
|
||
|
||
### 高级部署选项：Cloudflare Pages
|
||
|
||
如果您需要更好的访问速度或私有仓库支持,可以选择使用Cloudflare Pages部署:
|
||
|
||
1. 在 [Cloudflare Dashboard](https://dash.cloudflare.com) 中创建新项目
|
||
2. 连接您的GitHub仓库
|
||
3. 使用以下构建配置:
|
||
- 构建命令: `npm run generate`
|
||
- 构建输出目录: `/`
|
||
- Node.js 版本: `16`或更高
|
||
|
||
## 自定义配置
|
||
|
||
### 配置文件说明
|
||
|
||
本项目提供两种配置文件:
|
||
1. `config.yml` - 默认配置模板,会随项目更新
|
||
2. `config.user.yml` - 用户个人配置,不会被项目更新覆盖
|
||
|
||
建议使用步骤:
|
||
1. 复制 `config.yml` 为 `config.user.yml`
|
||
2. 在 `config.user.yml` 中进行个性化配置
|
||
3. 原始的 `config.yml` 保持不变
|
||
4. 后续同步更新时,您的个人配置不会被覆盖
|
||
|
||
> 注意: `config.user.yml` 已添加到 .gitignore 中,不会被提交到仓库
|
||
|
||
### 配置文件结构
|
||
|
||
`config.yml` 包含以下主要部分：
|
||
|
||
```yaml
|
||
# 网站基本信息
|
||
site:
|
||
title: 网站标题
|
||
description: 网站描述
|
||
author: 作者名
|
||
favicon: favicon.ico # 网站图标,支持ico、png等格式
|
||
|
||
# 个人信息
|
||
profile:
|
||
title: 欢迎语
|
||
subtitle: 副标题
|
||
description: 描述
|
||
|
||
# 导航菜单
|
||
navigation:
|
||
- name: 菜单名称
|
||
icon: 图标类名
|
||
id: 页面ID
|
||
active: 是否激活
|
||
|
||
# 更多配置...
|
||
```
|
||
|
||
### 设置网站图标
|
||
|
||
1. 准备图标文件:
|
||
- 支持.ico、.png等格式
|
||
- 建议尺寸为32x32或16x16像素
|
||
- 将图标文件放在仓库根目录
|
||
- 例如: `favicon.ico` 或 `favicon.png`
|
||
|
||
2. 配置图标:
|
||
- 在`config.yml`或`config.user.yml`的site部分设置favicon
|
||
- 使用相对于仓库根目录的路径
|
||
- 例如: `favicon: favicon.ico`
|
||
- 也可以使用在线图标URL
|
||
|
||
3. 生成和部署:
|
||
- 运行 `npm run generate` 时会自动复制图标文件
|
||
- 确保图标文件存在于指定位置
|
||
- 部署后图标会自动显示在浏览器标签页
|
||
|
||
> 提示: 如果图标没有显示,请检查:
|
||
> 1. 图标文件是否存在于正确位置
|
||
> 2. 配置文件中的路径是否正确
|
||
> 3. 是否重新运行了生成命令
|
||
|
||
### 添加新的网站链接
|
||
|
||
在 `config.yml` 中相应的分类下添加新站点：
|
||
|
||
```yaml
|
||
categories:
|
||
- name: 分类名称
|
||
icon: 分类图标
|
||
sites:
|
||
- name: 网站名称
|
||
url: 网站地址
|
||
icon: 网站图标
|
||
description: 网站描述
|
||
```
|
||
|
||
## 版本
|
||
|
||
当前版本: v1.2.3
|
||
|
||
查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的更新历史。
|
||
|
||
## 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。
|
||
|
||
## 许可证
|
||
|
||
MIT License
|