一个简洁、美观的静态导航网站，通过 JSON 文件管理链接，轻松添加和分类你的常用网站。
Demo：https://momo-nav.msx.cc.cd/
- 📝 可视化配置 - 按Ctrl+F9进入编辑模式，支持内联修改链接、分类及顶部菜单
- 📁 分类管理 - 支持多分类组织链接，支持拖拽排序
- 🔗 顶部导航 - 支持二级下拉菜单，提供直观的内联编辑与排序体验
- 🔍 实时搜索 - 支持多搜索引擎和本地过滤
- 🎨 响应式设计 - 适配桌面和移动设备
- ⚡ 纯静态 - 无需后端，直接部署
- 🖼️ 多种图标支持 - 支持 Iconify、Iconfont、自定义图片
- 📱 主屏图标支持 - 支持 iOS/Android 添加到主屏幕图标配置
- 🛠️ 自定义扩展钩子 - 支持通过配置动态加载外部 CSS/JS 插件
-
编辑链接：打开
momo-nav.json文件，按格式添加你的网站 -
本地预览：需要用本地服务器运行（直接双击打开会因浏览器安全限制无法加载数据）
方式一：使用 VS Code Live Server 插件（推荐）
- 安装 Live Server 插件
- 右键点击
index.html→ "Open with Live Server"
方式二：使用 Python
# Python 3 python -m http.server 8080 # 然后访问 http://localhost:8080
方式三：使用 Node.js
npx serve
-
部署：将整个文件夹上传到任意静态托管服务（GitHub Pages、Vercel、Netlify 等）
本仓库自带一组 Node 脚本，用于刷新版本号和缓存时间戳。无需安装任何依赖，只要你有 Node.js 就能跑。三种使用形态都能自动识别：
- 直接用本仓库（纯使用者）：Fork 本仓库后，把
example.json改名为momo-nav.json并填入你的数据，然后直接在仓库根目录运行下面的命令。 - 作为子目录（数据仓维护者）：把本仓库作为子目录或 submodule 放在你的数据仓里，在数据仓根目录运行下面的命令，脚本会自动识别
core-momo-nav/子目录并从中同步文件。
| 命令 | 作用 | 什么时候用 |
|---|---|---|
npm run sync |
同步核心文件到根目录（子目录形态下）；刷新 ?v= 缓存时间戳；从 momo-nav.json 的 updatedAt 派生 DATA_VERSION 写入 index.html；读 VERSION 写入 app.js 的 APP_VERSION |
预览前、部署前 |
npm run data |
用当前时间刷新 momo-nav.json 的 updatedAt |
改了导航数据后、部署前 |
npm run version |
用当前时间更新 VERSION 文件 |
改了核心代码后、推送前 |
页脚 "MOMO-NAV" 链接悬停时会显示 数据版本: xxx | 核心版本: xxx：
| 版本号 | 来源 | 含义 |
|---|---|---|
核心版本 (APP_VERSION) |
VERSION 文件 |
你最后一次发布核心引擎的时间 |
数据版本 (DATA_VERSION) |
从 momo-nav.json 的 updatedAt 派生（YYYY.MM.DD.HHMM，东八区） |
你最后一次修改导航数据的时间 |
| updatedAt | momo-nav.json 的 updatedAt 字段（ISO 8601） |
唯一时间源，供版本切换开关使用 |
关键设计：
updatedAt是唯一的时间源，不在 sync 时自动生成，而是由npm run data单独维护。前端展示的数据版本号由 sync 脚本从它格式化派生。这样 Vercel 即使重复部署（比如你只改了 README），也不会误伤导航数据的时间戳。
在导航页面按 Ctrl+F9 即可显示进入编辑模式的按钮（位置在左上角logo右边），点击即可开始可视化编辑。
进入编辑模式后，页头菜单支持“所见即所得”的编辑：
- 新增菜单：点击菜单栏末尾的虚线框按钮即可添加新菜单项。
- 内联编辑：鼠标悬停在已有菜单上，下方会弹出“编辑”与“删除”按钮。
- 拖拽排序：直接按住菜单项文字即可在页头左右移动调整位置。
- 子菜单管理：在编辑弹框中提供列表式编辑器，支持子菜单的新增、删除及内部排序。
编辑好了之后导出momo-nav.json配置，替换掉原来的即可。不替换的话只是临时保存哦！
编辑模式底部还支持一键导出 site.webmanifest（用于移动端“添加到主屏幕”图标与主题色）。
在 Ctrl+F9 编辑模式下，所有路径类输入框（如图标、Logo、封面等）右侧都有一个 “纠正” 按钮。它可以一键处理以下常见错误：
- 清理 Font Awesome 标签:
如果你直接从官网复制了
<i class="fa-solid fa-star"></i>，点击纠正会提取出fa-solid fa-star。 - 修复 Windows 路径:
自动将反斜杠
\转换为 Web 通用的正斜杠/。 - 智能截断绝对路径:
如果你复制了本地电脑的全路径（如
D:\Nav\other-favicon\icon.svg），系统会识别项目内的特征文件夹（如other-favicon/,mn-src/,assets/等）并自动截断多余的本地路径，将其变为相对于根目录的路径（如/other-favicon/icon.svg）。 - 补全路径前缀:
自动为相对路径补齐开头的
/，确保路径在任何情况下都能被正确识别为 URL。
核心引擎支持在 momo-nav.json 中通过 customFeatures 字段动态注入样式和脚本，实现在不修改核心代码的情况下扩展功能。
在 momo-nav.json 中按需添加：
{
"customFeatures": {
"styles": ["tools/tools-panel.css"],
"scripts": ["tools/tools-panel.js"]
}
}- 私有功能扩展：在不污染核心逻辑的前提下，添加如“工具箱”、评论系统或站点统计。
- 样式个性化：通过外部 CSS 文件覆盖默认样式，实现深度 UI 定制。
- 第三方脚本注入：集成在线客服、广告等第三方服务。
- 加载机制：CSS 通过
link标签同步注入，JS 通过script标签异步（async）注入。 - 加载时机：引擎会在
momo-nav.json加载完成后立即触发注入，确保功能准备就绪。 - 事件同步：扩展脚本应监听
momo-nav-ready事件以获取完整的配置数据：window.addEventListener('momo-nav-ready', (e) => { const data = e.detail; // 这里是原始导航配置对象 // 初始化您的功能逻辑... });
- 防止冗余：引擎会自动检查资源路径，避免重复加载。
详细的配置参数说明（包括基础配置、Logo、封面、主题、搜索引擎、Iconfont 等）请参考：
见仓库根目录下 example.json 文件。
一般正常部署即可，但想必你也是注意到了这个仓库的目录下有vercel.json文件，以及scripts/文件夹，这个似乎不是正常静态网站部署所必须的。
那么，你如果想要玩点花活儿，可以参考：Vercel构建时从 Vercel Blob 中拉取资源的实践，这里说明了这个是干啥的。
但只想安安静静的用一下导航，正常部署，大可不必理会。
MIT License