工具盒是一个可自定义的导航页面，支持站点收藏、搜索引擎切换、分类管理。所有配置通过两个 YAML 数据文件完成，无需修改代码。

文件位置

1
2
3
4
5
6
source/
├── _data/
│   ├── navi.yml          # 导航站点数据
│   └── navi_search.yml   # 搜索引擎数据
└── navi/
    └── index.md          # 页面入口（仅一行: {% navi %}）

导航配置 (navi.yml)

平铺分类

分类下直接列出站点，适合无子分类的简单分组：

1
2
3
4
5
6
7
8
9
开发社区:
  - name: Stack Overflow
    url: https://stackoverflow.com/
    icon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.2.1/source/box/images/logo/stackoverflow.png
    desc: 全球最受程序员欢迎的开发社区
  - name: CSDN
    url: https://www.csdn.net/
    icon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.2.1/source/box/images/logo/csdn.png
    desc: 全球最大中文IT社区

分组分类

分类下包含多个子分类，每个子分类下再列站点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
技能训练:
  在线平台:
    - name: LeetCode
      url: https://leetcode-cn.com/
      icon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.2.1/source/box/images/logo/leetcode.png
      desc: 全球极客挚爱的技术成长平台
    - name: Codeforces
      url: http://codeforces.com/
      icon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.2.1/source/box/images/logo/codeforces.png
      desc: 俄罗斯最大的算法比赛网站
  高校平台:
    - name: POJ
      url: http://poj.org/
      icon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.2.1/source/box/images/logo/poj.png
      desc: 北京大学程序在线评测系统

添加新站点

1
2
3
4
5
我的分类:                          # 分类名称（侧边栏显示）
  - name: 站点名称
    url: https://example.com       # 完整 URL
    icon: https://.../logo.png     # 图标（建议 40x40）
    desc: 一句话描述

图标可直接省略 icon 字段，工具盒会自动使用 Google Favicons 服务获取网站图标。

搜索引擎配置 (navi_search.yml)

搜索引擎分为多个分组，每个分组内可定义多个引擎：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
defaultEngine: 'https://www.baidu.com/s?wd='
groups:
  - name: 常用
    id: c
    icon: fa-search
    color: bg-blue
    items:
      - name: 百度
        url: https://www.baidu.com/s?wd=
        ph: 百度一下
        style: 'color:#2529d8'
      - name: Google
        url: https://www.google.com/search?q=
        ph: 谷歌搜索
        style: 'color:#3B83FA'

字段说明：

字段 说明
defaultEngine 默认搜索引擎 URL
groups[].name 分组名（顶部标签）
groups[].id 分组标识（唯一，单个字母即可）
groups[].icon 标签图标（Font Awesome 类名）
groups[].color 标签颜色（bg-blue / bg-teal / bg-pink / bg-yl / bg-gj / bg-tp / bg-sq / bg-sc / bg-red）
items[].name 引擎名称
items[].url 搜索 URL（关键词部分用空字符串，前端会拼接）
items[].ph 搜索框 placeholder 提示文字
items[].style 引擎名称文字颜色样式

添加搜索分组

1
2
3
4
5
6
7
8
9
10
11
12
13
- name: AI
  id: i
  icon: fa-robot
  color: bg-teal
  items:
    - name: ChatGPT
      url: https://chat.openai.com/?q=
      ph: 向 ChatGPT 提问
      style: 'color:#10a37f'
    - name: 文心一言
      url: https://yiyan.baidu.com/search?q=
      ph: 向文心一言提问
      style: 'color:#003daa'

页面入口

source/navi/index.md 只需一行：

1
2
3
4
---
layout: false
---
{% navi %}

设置 layout: false 避免被博客主题包裹，{% navi %} 标签插件会生成完整的独立导航页面。