# MeNav - 个人导航站

一个简洁美观的个人导航网站，帮助你整理和展示你的网络收藏。

[![部署状态](https://github.com/RZLNB/menav/actions/workflows/deploy.yml/badge.svg)](https://github.com/RZLNB/menav/actions/workflows/deploy.yml)

## 在线预览

访问：[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
npm install
```

3. 修改配置
编辑 `config.yml` 文件，根据你的需求修改网站内容：
- 修改网站基本信息
- 添加/修改导航链接
- 自定义社交媒体链接
- 更新个人项目展示
- 添加友情链接等

4. 本地预览
```bash
npm run generate
```
然后在浏览器中打开 `index.html` 文件

## 部署方式

### GitHub Pages 一键部署

只需三步即可完成部署:

1. 点击右上角的 Fork 按钮，复制这个仓库到你的账号

2. 修改配置文件
   - 打开 `config.yml` 文件
   - 根据你的需求修改网站内容
   - 提交更改

3. 等待自动部署
   - 提交更改后，GitHub Actions 会自动开始构建和部署
   - 部署完成后，你可以通过 `https://你的用户名.github.io/menav` 访问你的网站
   - 部署状态可以在仓库的 Actions 标签页查看

注意：首次部署可能需要等待1-2分钟。如果遇到问题：
- 确保仓库设置中的 Actions 权限已启用
- 检查仓库的 Actions 标签页中的部署日志

### Cloudflare Pages 部署

支持公开和私有仓库，完全免费。

1. Fork 仓库到你的GitHub账号

2. 登录 Cloudflare Dashboard
   - 进入 Pages 页面
   - 点击 "Create a project"
   - 选择 "Connect to Git"
   - 选择你fork的仓库

3. 设置构建配置
   - 构建命令：`npm run generate`
   - 构建输出目录：`/`
   - Node.js 版本：`16`（或更高版本）

4. 环境变量（可选）
   ```
   NODE_VERSION: 16
   ```

5. 部署
   - 点击 "Save and Deploy"
   - Cloudflare Pages 会自动构建和部署你的网站
   - 部署完成后，你会得到一个 `*.pages.dev` 的域名

6. 自定义域名（可选）
   - 在项目设置中添加你的自定义域名
   - 按照 Cloudflare 的说明配置 DNS 记录

优点：
- 全球 CDN 加速
- 自动 HTTPS
- 持续部署
- 免费额度大
- 可以绑定自定义域名

## 自定义配置

### 配置文件结构

`config.yml` 包含以下主要部分：

```yaml
# 网站基本信息
site:
  title: 网站标题
  description: 网站描述
  author: 作者名

# 个人信息
profile:
  title: 欢迎语
  subtitle: 副标题
  description: 描述

# 导航菜单
navigation:
  - name: 菜单名称
    icon: 图标类名
    id: 页面ID
    active: 是否激活

# 更多配置...
```

### 添加新的网站链接

在 `config.yml` 中相应的分类下添加新站点：

```yaml
categories:
  - name: 分类名称
    icon: 分类图标
    sites:
      - name: 网站名称
        url: 网站地址
        icon: 网站图标
        description: 网站描述
```

## 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

## 许可证

MIT License