https://github.com/cunyu1943/nav
村雨遥的藏宝阁
https://github.com/cunyu1943/nav
software source website
Last synced: 17 days ago
JSON representation
村雨遥的藏宝阁
- Host: GitHub
- URL: https://github.com/cunyu1943/nav
- Owner: cunyu1943
- License: mit
- Created: 2021-10-12T13:36:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-05-20T16:08:33.000Z (about 1 month ago)
- Last Synced: 2026-05-20T17:17:59.470Z (about 1 month ago)
- Topics: software, source, website
- Language: JavaScript
- Homepage: https://cunyu1943.github.io/nav
- Size: 2.27 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ❤️ 村雨遥优选站 (Momo Nav)
一个简洁、美观的静态导航网站，通过 JSON 文件管理链接，轻松添加和分类你的常用网站。
Demo：https://momo-nav.msx.cc.cd/
自用：https://123.ihcll.cn/
## ✨ 特性
- 📝 **可视化配置** - 按Ctrl+F9进入编辑模式，支持内联修改链接、分类及顶部菜单
- 📁 **分类管理** - 支持多分类组织链接，支持拖拽排序
- 🔗 **顶部导航** - 支持二级下拉菜单，提供直观的内联编辑与排序体验
- 🔍 **实时搜索** - 支持多搜索引擎和本地过滤
- 🎨 **响应式设计** - 适配桌面和移动设备
- ⚡ **纯静态** - 无需后端，直接部署
- 🖼️ **多种图标支持** - 支持 Iconify、Iconfont、自定义图片
- 📱 **主屏图标支持** - 支持 iOS/Android 添加到主屏幕图标配置
- 🛠️ **自定义扩展钩子** - 支持通过配置动态加载外部 CSS/JS 插件
## 🚀 快速开始
1. **编辑链接**：打开 `momo-nav.json` 文件，按格式添加你的网站
2. **本地预览**：需要用本地服务器运行（直接双击打开会因浏览器安全限制无法加载数据）
**方式一：使用 VS Code Live Server 插件（推荐）**
- 安装 Live Server 插件
- 右键点击 `index.html` → "Open with Live Server"
**方式二：使用 Python**
```bash
# Python 3
python -m http.server 8080
# 然后访问 http://localhost:8080
```
**方式三：使用 Node.js**
```bash
npx serve
```
3. **部署**：将整个文件夹上传到任意静态托管服务（GitHub Pages、Vercel、Netlify 等）
## 📝 支持可视化编辑
在导航页面按Ctrl+F9即可显示进入编辑模式的按钮（位置在左上角logo右边），点击即可开始可视化编辑。
### 顶部导航菜单编辑
进入编辑模式后，页头菜单支持“所见即所得”的编辑：
- **新增菜单**：点击菜单栏末尾的虚线框按钮即可添加新菜单项。
- **内联编辑**：鼠标悬停在已有菜单上，下方会弹出“编辑”与“删除”按钮。
- **拖拽排序**：直接按住菜单项文字即可在页头左右移动调整位置。
- **子菜单管理**：在编辑弹框中提供列表式编辑器，支持子菜单的新增、删除及内部排序。
编辑好了之后导出`momo-nav.json`配置，替换掉原来的即可。不替换的话只是临时保存哦！
编辑模式底部还支持一键导出 `site.webmanifest`（用于移动端“添加到主屏幕”图标与主题色）。
### 💡 编辑器辅助：纠正功能
在 Ctrl+F9 编辑模式下，所有路径类输入框（如图标、Logo、封面等）右侧都有一个 **“纠正”** 按钮。它可以一键处理以下常见错误：
- **清理 Font Awesome 标签**:
如果你直接从官网复制了 ``，点击纠正会提取出 `fa-solid fa-star`。
- **修复 Windows 路径**:
自动将反斜杠 `\` 转换为 Web 通用的正斜杠 `/`。
- **智能截断绝对路径**:
如果你复制了本地电脑的全路径（如 `D:\Nav\other-favicon\icon.svg`），系统会识别项目内的特征文件夹（如 `other-favicon/`, `mn-src/`, `assets/` 等）并自动截断多余的本地路径，将其变为相对于根目录的路径（如 `/other-favicon/icon.svg`）。
- **补全路径前缀**:
自动为相对路径补齐开头的 `/`，确保路径在任何情况下都能被正确识别为 URL。
## 🧩 自定义扩展钩子 (Custom Features)
核心引擎支持在 `momo-nav.json` 中通过 `customFeatures` 字段动态注入样式和脚本，实现在不修改核心代码的情况下扩展功能。
### 配置方案
在 `momo-nav.json` 中按需添加：
```json
{
"customFeatures": {
"styles": ["tools/tools-panel.css"],
"scripts": ["tools/tools-panel.js"]
}
}
```
### 适用场景
- **私有功能扩展**：在不污染核心逻辑的前提下，添加如“工具箱”、评论系统或站点统计。
- **样式个性化**：通过外部 CSS 文件覆盖默认样式，实现深度 UI 定制。
- **第三方脚本注入**：集成在线客服、广告等第三方服务。
### 接入规范与技术细节
1. **加载机制**：CSS 通过 `link` 标签同步注入，JS 通过 `script` 标签异步（`async`）注入。
2. **加载时机**：引擎会在 `momo-nav.json` 加载完成后立即触发注入，确保功能准备就绪。
3. **事件同步**：扩展脚本应监听 `momo-nav-ready` 事件以获取完整的配置数据：
```javascript
window.addEventListener('momo-nav-ready', (e) => {
const data = e.detail; // 这里是原始导航配置对象
// 初始化您的功能逻辑...
});
```
4. **防止冗余**：引擎会自动检查资源路径，避免重复加载。
## 📝 完整配置说明
详细的配置参数说明（包括基础配置、Logo、封面、主题、搜索引擎、Iconfont 等）请参考：
👉 [**完整配置指南 (Docs)**](docs/configuration.md)
## 📝 配置示例
见仓库根目录下 `cunyu1943.json` 文件。
## vercel部署
一般正常部署即可，但想必你也是注意到了这个仓库的目录下有`vercel.json`文件，和`scripts/`文件夹，这个似乎不是正常静态网站部署所必须的。
那么，你如果想要玩点花活儿，可以参考：[Vercel构建时从 Vercel Blob 中拉取资源的实践](https://ihcll.cn/posts/use-vercel-blob-storage-for-build-time-assets/)，这里说明了这个是干啥的。
但只想安安静静的用一下导航，正常部署，大可不必理会，你甚至可以删掉这些文件。
## 📄 许可证
MIT License