一个简洁、美观的静态导航网站，通过 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

   # Python 3
   python -m http.server 8080
   
   # 然后访问 http://localhost:8080

   方式三：使用 Node.js

   npx serve

3. 部署：将整个文件夹上传到任意静态托管服务（GitHub Pages、Vercel、Netlify 等）

在导航页面按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 定制。
• 第三方脚本注入：集成在线客服、广告等第三方服务。

1. 加载机制：CSS 通过 link 标签同步注入，JS 通过 script 标签异步（async）注入。
2. 加载时机：引擎会在 momo-nav.json 加载完成后立即触发注入，确保功能准备就绪。
3. 事件同步：扩展脚本应监听 momo-nav-ready 事件以获取完整的配置数据：

   window.addEventListener('momo-nav-ready', (e) => {
       const data = e.detail; // 这里是原始导航配置对象
       // 初始化您的功能逻辑...
   });

4. 防止冗余：引擎会自动检查资源路径，避免重复加载。

详细的配置参数说明（包括基础配置、Logo、封面、主题、搜索引擎、Iconfont 等）请参考：

👉 完整配置指南 (Docs)

见仓库根目录下 example.json 文件。

一般正常部署即可，但想必你也是注意到了这个仓库的目录下有vercel.json文件，和scripts/文件夹，这个似乎不是正常静态网站部署所必须的。

那么，你如果想要玩点花活儿，可以参考：Vercel构建时从 Vercel Blob 中拉取资源的实践，这里说明了这个是干啥的。

但只想安安静静的用一下导航，正常部署，大可不必理会，你甚至可以删掉这些文件。

MIT License