网站导航页面自定义指南

本文档详细介绍如何自定义网站导航页面，包括分类管理、网站添加、颜色配置等。

功能概述

网站导航页面支持以下功能：

分类管理：可自由添加、删除、重命名分类
网站卡片：每个网站显示图标、名称、描述和标签
分类筛选：点击分类标签可筛选显示对应分类
响应式设计：自适应手机、平板、电脑
暗色模式：支持深色/浅色主题切换
自定义颜色：每个分类和网站可独立配置颜色

配置文件位置

所有配置都在一个文件中：

1
src/config/navigationConfig.ts

只需编辑这一个文件即可完成所有自定义。

配置结构说明

1
export const navigationConfig = {
2
  // 页面标题
3
  title: "网站导航",
4
  // 页面描述
5
  description: "我常用和推荐的网站",
6

7
  // 分类配置数组
8
  categories: [
9
    {
10
      id: "分类ID",           // 唯一标识符
11
      name: "分类名称",       // 显示名称
12
      icon: "图标名称",       // Iconify 图标
13
      color: "#颜色代码",     // 主题颜色
14
      dotColor: "#颜色代码",  // 标签圆点颜色（可选）
15
      sites: [                // 网站数组
16
        // ...网站配置
17
      ],
18
    },
19
    // ...更多分类
20
  ] as NavCategory[],
21
};

自定义分类

添加新分类

在 categories 数组中添加新的分类对象：

1
{
2
  id: "new-category",           // 唯一ID，不能与其他分类重复
3
  name: "我的新分类",           // 显示名称
4
  icon: "material-symbols:star", // 分类图标
5
  color: "#ff6b6b",             // 主题颜色
6
  dotColor: "#ff6b6b",          // 标签圆点颜色
7
  sites: [],                    // 网站列表
8
}

删除分类

直接删除对应的分类对象即可。

重命名分类

修改 name 字段的值：

1
{
2
  id: "my-sites",
3
  name: "我的网站",      // 修改这里
4
  // ...
5
}

隐藏空分类

如果分类没有网站（sites: []），页面会自动隐藏该分类的标签和内容区域。

自定义网站

添加新网站

在对应分类的 sites 数组中添加网站对象：

1
{
2
  name: "网站名称",
3
  url: "https://example.com",
4
  description: "网站描述",
5
  icon: "mdi:earth",           // 图标名称
6
  iconColor: "#4CAF50",        // 图标背景颜色（可选）
7
  tags: ["标签1", "标签2"],    // 标签数组
8
}

网站配置说明

字段	类型	必填	说明
`name`	string	✅	网站名称
`url`	string	✅	网站链接
`description`	string	✅	网站描述
`icon`	string	✅	Iconify 图标名称
`iconColor`	string	❌	图标背景颜色，默认使用分类颜色
`tags`	string[]	✅	标签数组，可为空数组 `[]`

删除网站

删除对应的网站对象即可。

修改网站信息

直接修改对应字段的值。

颜色配置

分类颜色

每个分类有两个颜色配置：

1
{
2
  color: "#3b82f6",      // 主要颜色，用于：
3
                          // - 分类图标背景
4
                          // - 分类标题
5
                          // - 分隔线渐变
6
                          // - 网站标签背景和文字（如果没有单独配置）
7

8
  dotColor: "#3b82f6",   // 标签圆点颜色（可选）
9
                          // 如果不设置，使用 color 的值
10
}

网站卡片颜色

网站卡片有左边框颜色，自动使用所属分类的颜色。

图标颜色

1
{
2
  iconColor: "#24292e",  // 图标背景颜色
3
                          // 如果不设置，使用所属分类的 color
4
}

分类	推荐颜色	色值
我的网站	蓝色	`#3b82f6`
常用网站	橙色	`#f97316`
资源网站	粉色	`#ec4899`
工具网站	绿色	`#10b981`
大佬博客	紫色	`#8b5cf6`
学习网站	青色	`#06b6d4`
文档	黄绿色	`#84cc16`
其他网站	灰色	`#6b7280`

图标使用

图标格式

使用 Iconify 图标库，格式为：

1
图标库:图标名称

常用图标示例

分类图标

1
// 人物相关
2
"material-symbols:person"      // 人物
3
"material-symbols:group"       // 群组
4
"material-symbols:people"      // 人群
5

6
// 工具相关
7
"material-symbols:build"       // 工具
8
"material-symbols:settings"    // 设置
9
"material-symbols:code"        // 代码
10

11
// 文件相关
12
"material-symbols:folder"      // 文件夹
13
"material-symbols:description" // 文档
14
"material-symbols:book"        // 书籍
15

16
// 星标相关
17
"material-symbols:star"        // 星星
18
"material-symbols:favorite"    // 喜爱
19
"material-symbols:bookmark"    // 书签
20

21
// 其他
22
"material-symbols:school"      // 学校
23
"material-symbols:language"    // 语言
24
"material-symbols:public"      // 公共

网站图标

1
// 常用网站图标
2
"mdi:github"                   // GitHub
3
"mdi:tray-arrow-up"             // Vercel
4
"mdi:cloud"                    // Cloud
5
"mdi:email"                    // 邮箱
6
"mdi:image-multiple"           // 相册
7
"mdi:notebook"                 // 笔记本
8
"mdi:run"                      // 跑步
9
"mdi:comment-text-multiple"    // 评论
10
"mdi:emoticon-outline"         // Emoji
11
"mdi:filmstrip"                // 电影
12
"mdi:draw"                     // 绘画
13
"mdi:book-open-variant"        // 书籍
14
"mdi:rocket-launch"            // 火箭
15
"mdi:earth"                    // 地球
16
"mdi:music"                    // 音乐
17
"mdi:video"                    // 视频
18
"mdi:shopping"                 // 购物

查找图标

访问 Iconify
搜索图标名称
复制格式为 prefix:name 的图标名称

完整示例

示例1：添加”学习资源”分类

1
{
2
  id: "learning",
3
  name: "学习资源",
4
  icon: "material-symbols:school",
5
  color: "#06b6d4",
6
  dotColor: "#06b6d4",
7
  sites: [
8
    {
9
      name: "MDN Web Docs",
10
      url: "https://developer.mozilla.org",
11
      description: "Web 开发文档与学习资源",
12
      icon: "mdi:book-open-variant",
13
      iconColor: "#06b6d4",
14
      tags: ["文档", "前端"],
15
    },
16
    {
17
      name: "W3School",
18
      url: "https://w3school.com.cn",
19
      description: "Web 技术教程",
20
      icon: "mdi:school",
21
      iconColor: "#04a604",
22
      tags: ["教程", "入门"],
23
    },
24
  ],
25
}

示例2：添加个人项目

1
{
2
  id: "my-projects",
3
  name: "我的项目",
4
  icon: "material-symbols:code",
5
  color: "#8b5cf6",
6
  sites: [
7
    {
8
      name: "我的博客",
9
      url: "https://your-blog.com",
10
      description: "个人技术博客",
11
      icon: "mdi:web",
12
      iconColor: "#8b5cf6",
13
      tags: ["博客", "技术"],
14
    },
15
    {
16
      name: "GitHub 仓库",
17
      url: "https://github.com/your-username",
18
      description: "我的开源项目",
19
      icon: "mdi:github",
20
      iconColor: "#24292e",
21
      tags: ["开源", "代码"],
22
    },
23
  ],
24
}

示例3：添加外部链接网站

1
{
2
  id: "external",
3
  name: "推荐网站",
4
  icon: "material-symbols:public",
5
  color: "#f59e0b",
6
  sites: [
7
    {
8
      name: "知乎",
9
      url: "https://zhihu.com",
10
      description: "中文问答社区",
11
      icon: "mdi:comment-question",
12
      iconColor: "#0066ff",
13
      tags: ["社区", "问答"],
14
    },
15
  ],
16
}

注意事项

1. ID 唯一性

每个分类的 id 必须唯一，不能与其他分类重复：

1
// ✅ 正确
2
{ id: "my-sites", ... }
3
{ id: "frequently-used", ... }
4

5
// ❌ 错误 - ID 重复
6
{ id: "my-sites", ... }
7
{ id: "my-sites", ... }

2. 图标名称格式

图标名称必须是 prefix:name 格式：

1
// ✅ 正确
2
icon: "mdi:github"
3
icon: "material-symbols:star"
4

5
// ❌ 错误
6
icon: "github"
7
icon: "star"

3. 颜色格式

颜色必须是有效的 HEX 格式：

1
// ✅ 正确
2
color: "#3b82f6"
3
color: "#fff"
4

5
// ❌ 错误
6
color: "blue"
7
color: "rgb(59, 130, 246)"

4. URL 格式

外部链接必须包含协议：

1
// ✅ 正确
2
url: "https://github.com"
3
url: "http://example.com"
4

5
// ❌ 错误
6
url: "github.com"
7
url: "//example.com"

5. 标签数量

建议每个网站的标签数量控制在 1-3 个，过多会影响显示效果。

6. 描述长度

建议描述控制在 20 字以内，过长会被截断显示。

7. 图标库依赖

项目已配置 Iconify 图标库，支持所有主流图标库：

Material Symbols
MDI (Material Design Icons)
Lucide
Heroicons
等等…

常见问题

Q: 如何修改分类标签的颜色？

A: 修改对应分类的 dotColor 字段：

1
{
2
  id: "my-sites",
3
  name: "我的网站",
4
  color: "#3b82f6",
5
  dotColor: "#ff0000",  // 修改这里改变圆点颜色
6
  // ...
7
}

Q: 如何让某个分类不显示？

A: 将该分类的 sites 数组设为空：

1
{
2
  id: "hidden-category",
3
  name: "隐藏分类",
4
  sites: [],  // 空数组会自动隐藏
5
  // ...
6
}

Q: 如何修改页面标题？

A: 修改配置文件顶部的 title 字段：

1
export const navigationConfig = {
2
  title: "我的导航",  // 修改这里
3
  // ...
4
};

Q: 如何添加没有图标的网站？

A: 图标是必填项，但可以使用通用图标：

1
{
2
  name: "某网站",
3
  icon: "mdi:web",  // 使用通用网页图标
4
  // ...
5
}

Q: 如何修改卡片左边框颜色？

A: 卡片左边框颜色自动使用所属分类的颜色，无法单独配置。

Q: 分类标签显示不全？

A: 分类标签支持横向滚动，在移动端可以左右滑动查看。

Q: 如何预览修改效果？

A: 启动开发服务器：

1
pnpm dev

然后访问 http://localhost:4321/navigation/ 查看效果。

技术支持

如有问题，请查看：

Iconify 图标搜索
Astro 官方文档
博客导航系列其他文章

音乐

音乐

网站导航页面自定义指南

网站导航页面自定义指南

目录

功能概述

配置文件位置

配置结构说明

自定义分类

添加新分类

删除分类

重命名分类

隐藏空分类

自定义网站

添加新网站

网站配置说明

删除网站

修改网站信息

颜色配置

分类颜色

网站卡片颜色

图标颜色

推荐颜色搭配

图标使用

图标格式

常用图标示例

分类图标

网站图标

查找图标

完整示例

示例1：添加”学习资源”分类

示例2：添加个人项目

示例3：添加外部链接网站

注意事项

1. ID 唯一性

2. 图标名称格式

3. 颜色格式

4. URL 格式

5. 标签数量

6. 描述长度

7. 图标库依赖

常见问题

Q: 如何修改分类标签的颜色？

Q: 如何让某个分类不显示？

Q: 如何修改页面标题？

Q: 如何添加没有图标的网站？

Q: 如何修改卡片左边框颜色？

Q: 分类标签显示不全？

Q: 如何预览修改效果？

相关文件

技术支持

支持与分享

评论区

音乐

文章目录