网站导航管理脚本使用指南
前言
博客的「网站导航」页面(/projects/)收录了大量常用网站,每个网站都需要手动创建 Markdown 文件、填写 frontmatter、找图标链接……重复操作非常繁琐。
为了解决这个问题,我开发了 add-daohang 脚本,只需输入一个网址,就能自动完成所有工作。
功能概览
| 功能 | 说明 |
|---|---|
| 🌐 自动获取 ICO | 输入网址后自动调用 API 获取网站图标 |
| 📝 交互式填写 | 逐项引导填写名称、描述、分类、标签等 |
| 🔍 URL 查重 | 检测网址是否已存在,避免重复添加 |
| ✏️ 编辑模式 | 查重后可选择编辑已有条目,更新信息或修复失效图标 |
| 📂 智能分类 | 自动扫描已有分类 + 预设分类,支持创建新分类 |
| 🎨 颜色选择 | 9 种预设颜色,也可输入自定义色值 |
| 📊 自动排序 | 自动分配 order 值,新条目排在最后 |
使用方式
方式一:通过 CLI 菜单(推荐)
pnpm cli nav方式二:直接运行脚本
# 交互式:逐步引导输入node scripts/add-daohang/index.js
# 命令行传参:直接指定网址node scripts/add-daohang/index.js --url=https://example.com完整使用流程
第一步:输入网址
╔══════════════════════════════════════╗║ 添加网站导航条目 ║╚══════════════════════════════════════╝
请输入网站地址: https://example.com输入网址后,脚本会自动:
- 补全
https://前缀(如果未输入) - 检查该 URL 是否已存在
- 调用 API 获取网站 ICO 图标
第二步:URL 查重
如果该网址已存在,会提示选择操作:
⚠ 该网址已存在于: example-com.md 1. 编辑已有条目(更新信息/修复 ICO) 2. 仍然新建 0. 取消选择操作 [0-2] (默认: 0):| 选项 | 说明 |
|---|---|
1 | 进入编辑模式,所有字段预填原值,回车保留 |
2 | 跳过查重,作为新条目创建 |
0 | 取消操作 |
第三步:获取 ICO 图标
正在获取网站图标... ✓ 图标获取成功: https://example.com/favicon.ico脚本调用 xxapi.cn 的免费 API 获取网站图标。即使在编辑模式下也会重新获取,用于修复失效的图标链接。
第四步:填写基本信息
网站名称 [Example]:网站描述 [这是一个示例网站]:- 方括号内为默认值(新条目从 URL 提取域名,编辑模式显示原值)
- 直接回车使用默认值
第五步:选择分类
可选分类: 1. 我的网站 2. 工具网站 3. 设计资源 4. 学习网站 5. 开发工具 6. AI 工具 7. 社交媒体 8. 资源网站 9. 影视网站 10. 常用网站 11. 文档 12. 其他 0. 输入新分类选择分类 [0-12]:- 分类列表 = 预设分类 + 已有文件中的分类(自动扫描)
- 输入
0可以手动输入新分类 - 也可以直接输入分类名称(不输编号)
第六步:输入标签
标签 (逗号分隔) [工具, 设计]:多个标签用逗号分隔,如 工具, 设计, 在线。
第七步:选择颜色
可选颜色: 1. 蓝色 (#3b82f6) 2. 绿色 (#10b981) 3. 紫色 (#8b5cf6) 4. 红色 (#ef4444) 5. 橙色 (#f97316) 6. 青色 (#06b6d4) 7. 粉色 (#ec4899) 8. 黄色 (#eab308) 9. 灰色 (#6b7280)选择颜色 [1-9] (默认: 蓝色):也可以直接输入十六进制色值,如 #ff6600。
第八步:是否置顶
是否置顶?(y/N):输入 y 将该网站标记为置顶。
第九步:确认文件名
文件名 [example-com]:默认从 URL 域名生成(去掉 www.,. 改为 -)。编辑模式下显示原文件名。
完成
════════════════════════════════════════✓ 已创建: src/content/daohang/example-com.md 名称: Example 地址: https://example.com 图标: https://example.com/favicon.ico 分类: 工具网站 标签: 工具, 设计 颜色: #3b82f6 置顶: 否 排序: 26════════════════════════════════════════编辑模式详解
编辑模式的核心用途:
- 修复失效图标 — 网站更换了图标链接,重新获取即可
- 更新描述 — 修改网站描述文字
- 调整分类/标签 — 重新归类
- 修改颜色/置顶 — 调整展示效果
编辑模式下所有字段都预填原值,直接回车保留不变,只修改需要改的字段即可。
生成的文件格式
脚本会在 src/content/daohang/ 目录下生成如下格式的 Markdown 文件:
---name: Exampleurl: https://example.comicon: https://example.com/favicon.icodescription: 这是一个示例网站category: 工具网站tags: [工具, 设计]color: "#3b82f6"featured: falseorder: 26---
这是一个示例网站字段说明
| 字段 | 必填 | 说明 |
|---|---|---|
name | ✅ | 网站名称 |
url | ✅ | 网站地址 |
icon | ❌ | 图标链接(自动获取) |
description | ❌ | 网站描述 |
category | ✅ | 分类名称 |
tags | ❌ | 标签数组 |
color | ❌ | 卡片主题色(十六进制) |
featured | ❌ | 是否置顶(默认 false) |
order | ❌ | 排序值(自动递增) |
查重机制
脚本通过 URL 匹配 进行查重:
- 去掉末尾
/后比对 - 不区分大小写
https://example.com和https://example.com/识别为同一地址
查重范围是 src/content/daohang/ 目录下的所有 .md 文件。
分类管理
分类来源有两部分:
- 预设分类(硬编码在脚本中):我的网站、工具网站、设计资源、学习网站、开发工具、AI 工具、社交媒体、其他
- 已有分类(自动扫描):脚本会读取所有已有文件的
category字段,合并到选项列表中
输入 0 可以创建全新的分类。新分类会立即生效,并在下次运行时出现在选项列表中。
常见问题
Q: 图标获取失败怎么办?
A: 脚本会跳过图标字段,生成的文件中不包含 icon 行。你可以之后手动添加,或者重新运行脚本进入编辑模式更新。
Q: 如何批量更新所有失效图标?
A: 逐个运行脚本,输入已有网址,选择「编辑已有条目」,脚本会自动重新获取图标。
Q: 文件名可以改吗?
A: 可以。在确认文件名时输入新名称即可。但注意编辑模式下改文件名会创建新文件,原文件不会自动删除。
Q: order 值是怎么算的?
A: 新条目的 order = 当前所有文件中最大的 order 值 + 1。编辑模式下保持原值不变。
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!
评论区
如果你喜欢,那么欢迎来到我的世界!
了解更多