readme change
This commit is contained in:
Zuoling Rong
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
# 依赖目录
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
package-lock.json
|
||||
|
||||
# 构建产物
|
||||
public/
|
||||
index.html
|
||||
|
||||
# IDE 配置
|
||||
.vscode/
|
||||
.idea/
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
# 系统文件
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# 环境变量
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# 日志文件
|
||||
*.log
|
||||
logs/
|
||||
319
README.md
319
README.md
@@ -1,8 +1,6 @@
|
||||
# menav
|
||||
A personal navigation page that serves as your web identity card and bookmark collection. 一个作为个人网络身份证和网页收藏夹的导航页面。
|
||||
# 个人导航站
|
||||
# MeNav - 个人导航站
|
||||
|
||||
一个美观、响应式的个人导航网站，集成了搜索功能和分类展示。
|
||||
一个美观、响应式的个人导航网站，集成了搜索功能和分类展示。支持通过配置文件管理网站内容，自动构建部署。
|
||||
|
||||
## 功能特点
|
||||
|
||||
@@ -11,96 +9,283 @@
|
||||
- 📱 响应式设计：完美适配移动端和桌面端
|
||||
- 🎨 现代化界面：优雅的动画和过渡效果
|
||||
- 🌙 暗色主题：护眼的深色模式
|
||||
- 🚀 高性能：优化的动画和渲染性能
|
||||
- 🚀 自动化部署：支持多种部署方式
|
||||
- ⚙️ 配置驱动：通过 YAML 文件管理内容
|
||||
|
||||
## 技术栈
|
||||
## 部署方式
|
||||
|
||||
- HTML5
|
||||
- CSS3 (Flexbox, Grid, 动画)
|
||||
- JavaScript (ES6+)
|
||||
- Font Awesome 图标
|
||||
### 1. GitHub Pages 部署（最简单）
|
||||
|
||||
## 项目结构
|
||||
适合个人使用，完全免费，自动部署。
|
||||
|
||||
```
|
||||
├── index.html # 主页面
|
||||
├── style.css # 样式文件
|
||||
├── script.js # 交互脚本
|
||||
└── README.md # 项目文档
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 克隆项目到本地：
|
||||
1. Fork 本仓库
|
||||
```bash
|
||||
git clone [repository-url]
|
||||
# 1. 点击 GitHub 页面右上角的 Fork 按钮
|
||||
# 2. 选择你的账号
|
||||
```
|
||||
|
||||
2. 直接打开 `index.html` 文件或使用本地服务器运行：
|
||||
2. 设置仓库（可选）
|
||||
```bash
|
||||
# 使用 Python 启动简单的 HTTP 服务器
|
||||
# 如果需要，可以将仓库设为私有
|
||||
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
|
||||
cd menav
|
||||
```
|
||||
|
||||
2. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. 设置定时任务
|
||||
```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
|
||||
```
|
||||
|
||||
3. 部署生成的文件
|
||||
```bash
|
||||
# 生成的文件在根目录：
|
||||
- index.html
|
||||
- style.css
|
||||
- script.js
|
||||
|
||||
# 将这些文件上传到你的网站空间
|
||||
```
|
||||
|
||||
### 4. Cloudflare Pages 部署
|
||||
|
||||
适合需要 CDN 加速和免费托管的场景。
|
||||
|
||||
1. Fork 仓库并连接到 Cloudflare
|
||||
```bash
|
||||
# 1. Fork 本仓库
|
||||
# 2. 登录 Cloudflare Dashboard
|
||||
# 3. Pages -> Create a project -> Connect to Git
|
||||
# 4. 选择你的仓库
|
||||
```
|
||||
|
||||
2. 配置构建设置
|
||||
```bash
|
||||
# Build settings:
|
||||
Build command: npm run generate
|
||||
Build output directory: /
|
||||
```
|
||||
|
||||
3. 环境变量（可选）
|
||||
```bash
|
||||
NODE_VERSION: 16
|
||||
```
|
||||
|
||||
4. 部署
|
||||
```bash
|
||||
# 1. 修改配置
|
||||
# 2. 推送到 GitHub
|
||||
# 3. Cloudflare Pages 会自动构建和部署
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
`config.yml` 文件结构：
|
||||
|
||||
```yaml
|
||||
# 网站基本信息
|
||||
site:
|
||||
title: 网站标题
|
||||
description: 网站描述
|
||||
author: 作者名
|
||||
|
||||
# 个人信息
|
||||
profile:
|
||||
title: 欢迎语
|
||||
subtitle: 副标题
|
||||
description: 个人描述
|
||||
|
||||
# 导航菜单
|
||||
navigation:
|
||||
- name: 菜单名称
|
||||
icon: 图标类名
|
||||
id: 页面ID
|
||||
active: 是否激活
|
||||
|
||||
# 分类示例
|
||||
categories:
|
||||
- name: 分类名称
|
||||
icon: 分类图标
|
||||
sites:
|
||||
- name: 网站名称
|
||||
url: 网站地址
|
||||
icon: 网站图标
|
||||
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 .
|
||||
```
|
||||
|
||||
3. 在浏览器中访问：
|
||||
- 直接打开：双击 `index.html`
|
||||
- 本地服务器：访问 `http://localhost:8000`
|
||||
## 更新上游代码
|
||||
|
||||
## 自定义配置
|
||||
如果你 Fork 了本项目，可以通过以下方式获取更新：
|
||||
|
||||
### 添加新的导航项
|
||||
```bash
|
||||
# 1. 添加上游仓库
|
||||
git remote add upstream https://github.com/原始用户名/menav.git
|
||||
|
||||
在 `index.html` 中的相应分类下添加新的卡片：
|
||||
# 2. 获取更新
|
||||
git fetch upstream
|
||||
|
||||
```html
|
||||
<a href="你的链接" class="site-card">
|
||||
<i class="fas fa-icon"></i>
|
||||
<h3>标题</h3>
|
||||
<p>描述</p>
|
||||
</a>
|
||||
# 3. 合并更新（注意处理配置文件的冲突）
|
||||
git merge upstream/main
|
||||
```
|
||||
|
||||
### 修改样式
|
||||
## 自定义主题
|
||||
|
||||
可以在 `style.css` 中自定义以下样式：
|
||||
1. 修改 `style.css`
|
||||
```css
|
||||
/* 修改主题色 */
|
||||
:root {
|
||||
--primary-color: #你的颜色;
|
||||
--background-color: #你的颜色;
|
||||
/* 其他颜色变量 */
|
||||
}
|
||||
```
|
||||
|
||||
- 主题颜色
|
||||
- 卡片样式
|
||||
- 动画效果
|
||||
- 响应式布局
|
||||
2. 添加新的样式
|
||||
```css
|
||||
/* 添加自定义样式 */
|
||||
.your-custom-class {
|
||||
/* 你的样式 */
|
||||
}
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
## 常见问题
|
||||
|
||||
项目已实现以下优化：
|
||||
1. 如何添加新网站？
|
||||
- 编辑 `config.yml` 文件
|
||||
- 在相应分类下添加网站信息
|
||||
- 提交并推送更改
|
||||
|
||||
- 使用 `will-change` 优化动画性能
|
||||
- 实现搜索防抖
|
||||
- 批量 DOM 更新
|
||||
- 使用 `requestAnimationFrame` 优化动画
|
||||
- CSS 动画硬件加速
|
||||
2. 如何修改图标？
|
||||
- 使用 Font Awesome 图标
|
||||
- 在 [Font Awesome 网站](https://fontawesome.com/icons) 查找图标
|
||||
- 复制图标类名（例如：`fas fa-home`）
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
- Chrome (推荐)
|
||||
- Firefox
|
||||
- Safari
|
||||
- Edge
|
||||
|
||||
## 开发计划
|
||||
|
||||
- [ ] 支持自定义分类
|
||||
- [ ] 添加更多动画效果
|
||||
- [ ] 支持数据持久化
|
||||
- [ ] 添加更多自定义选项
|
||||
3. 部署失败？
|
||||
- 检查 GitHub Pages 设置
|
||||
- 确认 Actions 权限
|
||||
- 查看 Actions 日志
|
||||
|
||||
## 贡献指南
|
||||
|
||||
1. Fork 项目
|
||||
2. 创建特性分支：`git checkout -b feature/AmazingFeature`
|
||||
3. 提交改动：`git commit -m 'Add some AmazingFeature'`
|
||||
4. 推送分支：`git push origin feature/AmazingFeature`
|
||||
5. 提交 Pull Request
|
||||
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
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT License - 详见 LICENSE 文件
|
||||
本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件
|
||||
|
||||
## 致谢
|
||||
|
||||
- [Font Awesome](https://fontawesome.com/) - 图标库
|
||||
- [GitHub Pages](https://pages.github.com/) - 托管服务
|
||||
- [GitHub Actions](https://github.com/features/actions) - 自动化部署
|
||||
@@ -8,7 +8,7 @@ site:
|
||||
profile:
|
||||
title: Hello,
|
||||
subtitle: Welcome to My Navigation
|
||||
description:
|
||||
description:8
|
||||
|
||||
# 导航菜单
|
||||
navigation:
|
||||
|
||||
Reference in New Issue
Block a user