网站ICO 图标管理脚本使用指南

前言#

博客的「网站导航」页面（/projects/）收录了大量常用网站，每个网站都需要手动创建 Markdown 文件、填写 frontmatter、找图标链接……重复操作非常繁琐。

为了解决这个问题，我开发了 add-daohang 脚本，只需输入一个网址，就能自动完成所有工作。

功能概览#

功能	说明
🌐 自动获取 ICO	输入网址后自动调用 API 获取网站图标
📝 交互式填写	逐项引导填写名称、描述、分类、标签等
🔍 URL 查重	检测网址是否已存在，避免重复添加
✏️ 编辑模式	查重后可选择编辑已有条目，更新信息或修复失效图标
📂 智能分类	自动扫描已有分类 + 预设分类，支持创建新分类
🎨 颜色选择	9 种预设颜色，也可输入自定义色值
📊 自动排序	自动分配 `order` 值，新条目排在最后

使用方式#

方式一：通过 CLI 菜单（推荐）#

1
pnpm cli nav

方式二：直接运行脚本#

1
# 交互式：逐步引导输入
2
node scripts/add-daohang/index.js
3

4
# 命令行传参：直接指定网址
5
node scripts/add-daohang/index.js --url=https://example.com

完整使用流程#

第一步：输入网址#

1
╔══════════════════════════════════════╗
2
║      添加网站导航条目               ║
3
╚══════════════════════════════════════╝
4

5
请输入网站地址: https://example.com

输入网址后，脚本会自动：

补全 https:// 前缀（如果未输入）
检查该 URL 是否已存在
调用 API 获取网站 ICO 图标

第二步：URL 查重#

如果该网址已存在，会提示选择操作：

1
⚠ 该网址已存在于: example-com.md
2
  1. 编辑已有条目（更新信息/修复 ICO）
3
  2. 仍然新建
4
  0. 取消
5
选择操作 [0-2] (默认: 0):

选项	说明
`1`	进入编辑模式，所有字段预填原值，回车保留
`2`	跳过查重，作为新条目创建
`0`	取消操作

第三步：获取 ICO 图标#

1
  正在获取网站图标...
2
  ✓ 图标获取成功: https://example.com/favicon.ico

脚本调用 xxapi.cn 的免费 API 获取网站图标。即使在编辑模式下也会重新获取，用于修复失效的图标链接。

第四步：填写基本信息#

1
网站名称 [Example]:
2
网站描述 [这是一个示例网站]:

方括号内为默认值（新条目从 URL 提取域名，编辑模式显示原值）
直接回车使用默认值

第五步：选择分类#

1
可选分类:
2
  1. 我的网站
3
  2. 工具网站
4
  3. 设计资源
5
  4. 学习网站
6
  5. 开发工具
7
  6. AI 工具
8
  7. 社交媒体
9
  8. 资源网站
10
  9. 影视网站
11
  10. 常用网站
12
  11. 文档
13
  12. 其他
14
  0. 输入新分类
15
选择分类 [0-12]:

分类列表 = 预设分类 + 已有文件中的分类（自动扫描）
输入 0 可以手动输入新分类
也可以直接输入分类名称（不输编号）

第六步：输入标签#

1
标签 (逗号分隔) [工具, 设计]:

多个标签用逗号分隔，如 工具, 设计, 在线。

第七步：选择颜色#

1
可选颜色:
2
  1. 蓝色 (#3b82f6)
3
  2. 绿色 (#10b981)
4
  3. 紫色 (#8b5cf6)
5
  4. 红色 (#ef4444)
6
  5. 橙色 (#f97316)
7
  6. 青色 (#06b6d4)
8
  7. 粉色 (#ec4899)
9
  8. 黄色 (#eab308)
10
  9. 灰色 (#6b7280)
11
选择颜色 [1-9] (默认: 蓝色):

也可以直接输入十六进制色值，如 #ff6600。

第八步：是否置顶#

1
是否置顶？(y/N):

输入 y 将该网站标记为置顶。

第九步：确认文件名#

1
文件名 [example-com]:

默认从 URL 域名生成（去掉 www.，. 改为 -）。编辑模式下显示原文件名。

完成#

1
════════════════════════════════════════
2
✓ 已创建: src/content/daohang/example-com.md
3
  名称: Example
4
  地址: https://example.com
5
  图标: https://example.com/favicon.ico
6
  分类: 工具网站
7
  标签: 工具, 设计
8
  颜色: #3b82f6
9
  置顶: 否
10
  排序: 26
11
════════════════════════════════════════

编辑模式详解#

编辑模式的核心用途：

修复失效图标 — 网站更换了图标链接，重新获取即可
更新描述 — 修改网站描述文字
调整分类/标签 — 重新归类
修改颜色/置顶 — 调整展示效果

编辑模式下所有字段都预填原值，直接回车保留不变，只修改需要改的字段即可。

生成的文件格式#

脚本会在 src/content/daohang/ 目录下生成如下格式的 Markdown 文件：

1
---
2
name: Example
3
url: https://example.com
4
icon: https://example.com/favicon.ico
5
description: 这是一个示例网站
6
category: 工具网站
7
tags: [工具, 设计]
8
color: "#3b82f6"
9
featured: false
10
order: 26
11
---
12

13
这是一个示例网站

字段说明#

字段	必填	说明
`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。编辑模式下保持原值不变。

团子和蛋糕

前言#

功能概览#

使用方式#

方式一：通过 CLI 菜单（推荐）#

方式二：直接运行脚本#

完整使用流程#

第一步：输入网址#

第二步：URL 查重#

第三步：获取 ICO 图标#

第四步：填写基本信息#

第五步：选择分类#

第六步：输入标签#

第七步：选择颜色#

第八步：是否置顶#

第九步：确认文件名#

完成#

编辑模式详解#

生成的文件格式#

字段说明#

查重机制#

分类管理#

常见问题#

Q: 图标获取失败怎么办？#

Q: 如何批量更新所有失效图标？#

Q: 文件名可以改吗？#

Q: order 值是怎么算的？#

评论区

音乐

团子和蛋糕

网站ICO 图标管理脚本使用指南

网站ICO 图标管理脚本使用指南

前言#

功能概览#

使用方式#

方式一：通过 CLI 菜单（推荐）#

方式二：直接运行脚本#

完整使用流程#

第一步：输入网址#

第二步：URL 查重#

第三步：获取 ICO 图标#

第四步：填写基本信息#

第五步：选择分类#

第六步：输入标签#

第七步：选择颜色#

第八步：是否置顶#

第九步：确认文件名#

完成#

编辑模式详解#

生成的文件格式#

字段说明#

查重机制#

分类管理#

常见问题#

Q: 图标获取失败怎么办？#

Q: 如何批量更新所有失效图标？#

Q: 文件名可以改吗？#

Q: order 值是怎么算的？#

相关文章

评论区

音乐