--
:
--
:
--
网站导航页面配置说明
最后更新于:
🧭 网站导航页面概述
Hugo-Teek 主题内置了精美的网站导航页面功能，支持分组展示、卡片式布局、徽章标记等特性。通过数据驱动的方式，您可以轻松管理和展示常用网站链接。
✨ 导航页面特性
🎨 设计特性
- 📦 卡片式布局：响应式网格展示网站链接
- 🏷️ 徽章标记：支持为网站添加标签徽章
- 🖼️ 图标展示：自动加载网站图标或自定义图片
- 📱 响应式设计：适配各种屏幕尺寸
⚙️ 配置特性
- 📊 数据驱动：通过 JSON 文件管理网站数据
- 🗂️ 分组管理：支持多分组分类展示
- 🔗 新窗口打开：外部链接默认在新窗口打开
- 🎭 骨架屏加载：图片加载时显示骨架屏效果
📁 配置文件路径
网站导航页面涉及以下配置文件：
1# hugo-teek-site/data/websites.json
2# 网站导航数据配置文件
3# 定义所有分组和网站信息1# hugo-teek-site/content/websites.md
2# 网站导航页面内容文件
3# 使用 navCard Shortcode 渲染分组1# hugo-teek-site/config/teek-plugins/menus.toml
2# 导航栏菜单配置
3# 添加网站导航页面入口文件作用说明
1网站导航页面配置流程：
2┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
3│ websites.json │────▶│ websites.md │────▶│ menus.toml │
4│ (数据定义) │ │ (页面渲染) │ │ (导航入口) │
5└─────────────────┘ └─────────────────┘ └─────────────────┘📊 数据配置（websites.json）
数据结构说明
网站导航数据采用 JSON 格式存储，支持分组管理和丰富的网站属性：
1{
2 "groups": [
3 {
4 "title": "分组标题",
5 "sites": [
6 {
7 "name": "网站名称",
8 "desc": "网站描述",
9 "img": "图标URL地址",
10 "link": "网站链接地址",
11 "badge": "徽章文本",
12 "badgeType": "徽章类型"
13 }
14 ]
15 }
16 ]
17}1groups: # ◀️ 分组数组
2 - title: 分组标题 # ◀️ 分组显示名称
3 sites: # ◀️ 网站数组
4 - name: 网站名称 # ◀️ 网站显示名称（必填）
5 desc: 网站描述 # ◀️ 网站简短描述
6 img: 图标URL # ◀️ 网站图标或Logo地址
7 link: 网站链接 # ◀️ 网站跳转链接（必填）
8 badge: 徽章文本 # ◀️ 右上角徽章文字
9 badgeType: 类型 # ◀️ 徽章样式类型网站字段详细说明
| 字段 | 必填 | 说明 |
|---|---|---|
name | ✅ | 网站显示名称 |
link | ✅ | 网站跳转链接，支持相对/绝对路径 |
desc | ❌ | 网站描述文字，显示在卡片下方 |
img | ❌ | 网站图标/Logo URL，支持各种图片格式 |
badge | ❌ | 徽章文字，显示在卡片右上角 |
badgeType | ❌ | 徽章样式类型：info、tip、warning、danger |
完整配置示例
1{
2 "groups": [
3 {
4 "title": "我的站点",
5 "sites": [
6 {
7 "name": "One",
8 "desc": "明心静性，爱自己",
9 "img": "https://img.onedayxyy.cn/images/xyy-logo.ico",
10 "link": "https://onedayxyy.cn/"
11 },
12 {
13 "name": "我的知乎",
14 "desc": "知乎",
15 "img": "https://img.onedayxyy.cn/images/hg-zhihu.jpg",
16 "link": "https://www.zhihu.com/people/foryouone"
17 }
18 ]
19 },
20 {
21 "title": "搜索引擎",
22 "sites": [
23 {
24 "name": "百度",
25 "desc": "百度——全球最大的中文搜索引擎",
26 "link": "http://www.baidu.com/",
27 "img": "https://example.com/baidu.jpg",
28 "badge": "搜索引擎"
29 },
30 {
31 "name": "Google",
32 "desc": "全球最大的搜索引擎公司",
33 "link": "http://www.google.com/",
34 "img": "https://example.com/google.jpg",
35 "badge": "搜索引擎",
36 "badgeType": "tip"
37 }
38 ]
39 },
40 {
41 "title": "工具",
42 "sites": [
43 {
44 "name": "菜鸟工具",
45 "desc": "在线工具集合",
46 "img": "https://static.jyshare.com/images/c-runoob-logo.ico",
47 "link": "https://c.runoob.com/"
48 },
49 {
50 "name": "PicList",
51 "desc": "图片上传 云存储管理",
52 "img": "https://example.com/piclist.png",
53 "link": "https://piclist.cn/",
54 "badge": "强烈推荐",
55 "badgeType": "warning"
56 }
57 ]
58 }
59 ]
60}📝 页面创建（websites.md）
Front Matter 配置
创建网站导航页面需要设置特定的 Front Matter 参数：
1---
2coverImg: https://mu.baimu.live/img/mn/ # ◀️ 封面图片
3date: 2025-11-17T20:00:00+08:00 # ◀️ 创建日期
4description: 精选优质网站导航 # ◀️ 页面描述
5draft: false # ◀️ 是否草稿
6lastmod: 2025-11-17T22:30:00+08:00 # ◀️ 最后修改时间
7layout: websites # ◀️ 布局模板（必填）
8title: 网站导航 # ◀️ 页面标题
9type: websites # ◀️ 页面类型（必填）
10url: /about/websites/ # ◀️ 自定义URL路径
11---1layout: websites # ◀️ 必须设置为 websites，使用主题内置布局
2type: websites # ◀️ 必须设置为 websites，用于样式识别
3url: /about/websites/ # ◀️ 自定义访问路径，与导航栏配置保持一致使用 navCard Shortcode
在页面内容中使用 navCard Shortcode 渲染分组：
1# 我的站点
2
3{{< navCard group="我的站点" >}}
4
5# VitePress网站
6
7{{< navCard group="VitePress网站" >}} 1# 我的站点
2
3{{< navCard group="我的站点" >}}
4
5# VitePress网站
6
7{{< navCard group="VitePress网站" >}}
8
9# 静态站点构建器(SSG)
10
11{{< navCard group="静态站点构建器(SSG)" >}}
12
13# Docusaurus
14
15{{< navCard group="Docusaurus" >}}
16
17# 搜索引擎
18
19{{< navCard group="搜索引擎" >}}
20
21# 工具
22
23{{< navCard group="工具" >}}
24
25# 图床软件
26
27{{< navCard group="图床软件" >}}
28
29# 壁纸网站
30
31{{< navCard group="壁纸网站" >}}Shortcode 参数说明
| 参数 | 必填 | 说明 |
|---|---|---|
group | ✅ | 对应 websites.json 中的分组标题 |
⚠️ 注意事项
group参数必须与websites.json中的title完全一致- 如果分组不存在，页面会显示提示信息
- 每个分组可以多次使用，但通常每个分组只使用一次
🔗 导航栏菜单配置
添加导航栏入口
在导航栏配置文件中添加网站导航页面入口：
1# hugo-teek-site/config/teek-plugins/menus.toml
2
3[[main]]
4 name = "🌐 网站导航"
5 parent = "about"
6 url = "/about/websites/"
7 weight = 29.0
8 [main.params]
9 icon = "compass"1[[main]]
2 name = "🌐 网站导航" # ◀️ 菜单显示名称
3 parent = "about" # ◀️ 父菜单标识符（放在【关于】下拉菜单下）
4 url = "/about/websites/" # ◀️ 链接地址，与页面 url 保持一致
5 weight = 29.0 # ◀️ 排序权重
6 [main.params]
7 icon = "compass" # ◀️ Bootstrap Icons 图标名称独立导航项配置
如果需要将网站导航作为独立的一级菜单：
1[[main]]
2 name = "🌐 网站导航"
3 url = "/about/websites/"
4 weight = 6
5 [main.params]
6 icon = "compass" 1# 父菜单
2[[main]]
3 identifier = "resources"
4 name = "📦 资源"
5 url = "#"
6 weight = 5
7
8# 子菜单 - 网站导航
9[[main]]
10 name = "🌐 网站导航"
11 parent = "resources"
12 url = "/about/websites/"
13 weight = 1
14 [main.params]
15 icon = "compass"🎨 徽章类型样式
徽章类型说明
网站导航卡片支持多种徽章样式：
1{
2 "sites": [
3 {
4 "name": "普通徽章",
5 "badge": "默认样式"
6 // 不设置 badgeType，使用默认 info 样式
7 },
8 {
9 "name": "提示徽章",
10 "badge": "推荐",
11 "badgeType": "tip"
12 },
13 {
14 "name": "警告徽章",
15 "badge": "强烈推荐",
16 "badgeType": "warning"
17 },
18 {
19 "name": "危险徽章",
20 "badge": "必看",
21 "badgeType": "danger"
22 }
23 ]
24}1badgeType 样式说明：
2┌───────────┬──────────┬──────────────────┐
3│ 类型 │ 颜色 │ 适用场景 │
4├───────────┼──────────┼──────────────────┤
5│ info │ 蓝色 │ 普通信息（默认） │
6│ tip │ 绿色 │ 提示、推荐 │
7│ warning │ 黄色/橙色 │ 警告、强烈推荐 │
8│ danger │ 红色 │ 重要、必看 │
9└───────────┴──────────┴──────────────────┘🔧 完整配置流程
步骤一：配置数据文件
- 创建或编辑
data/websites.json文件 - 按照 JSON 格式定义分组和网站数据
- 验证 JSON 语法正确性
步骤二：创建页面文件
- 创建
content/websites.md文件 - 配置 Front Matter（设置
layout: websites和type: websites） - 使用
navCardShortcode 引用分组
步骤三：配置导航栏
- 编辑
config/teek-plugins/menus.toml - 添加网站导航菜单项
- 设置正确的
url路径
配置流程图
1┌─────────────────────────────────────────────────────────────┐
2│ 网站导航页面配置流程 │
3├─────────────────────────────────────────────────────────────┤
4│ │
5│ ┌─────────────────┐ │
6│ │ 1. 准备网站数据 │ │
7│ │ websites.json│ │
8│ └────────┬────────┘ │
9│ │ │
10│ ▼ │
11│ ┌─────────────────┐ │
12│ │ 2. 创建页面文件 │ │
13│ │ websites.md │ │
14│ │ layout: websites │
15│ └────────┬────────┘ │
16│ │ │
17│ ▼ │
18│ ┌─────────────────┐ │
19│ │ 3. 配置导航菜单 │ │
20│ │ menus.toml │ │
21│ └────────┬────────┘ │
22│ │ │
23│ ▼ │
24│ ┌─────────────────┐ │
25│ │ 4. 访问页面 │ │
26│ │ /about/websites/ │
27│ └─────────────────┘ │
28│ │
29└─────────────────────────────────────────────────────────────┘📝 配置模板速查
最小化配置模板
1{
2 "groups": [
3 {
4 "title": "常用网站",
5 "sites": [
6 {
7 "name": "示例网站",
8 "link": "https://example.com/"
9 }
10 ]
11 }
12 ]
13} 1---
2layout: websites
3title: 网站导航
4type: websites
5url: /websites/
6---
7
8# 常用网站
9
10{{< navCard group="常用网站" >}}1[[main]]
2 name = "🌐 网站导航"
3 url = "/websites/"
4 weight = 10
5 [main.params]
6 icon = "compass"❓ 常见问题
页面显示空白或分组不显示
1原因：navCard 的 group 参数与 websites.json 中的 title 不匹配
2解决：
31️⃣ 检查 group 参数是否与 title 完全一致（包括空格）
42️⃣ 检查 JSON 语法是否正确
53️⃣ 重启 Hugo 开发服务器1原因：图片地址错误或无法访问
2解决：
31️⃣ 检查 img 字段的 URL 是否正确
42️⃣ 确保图片地址支持跨域访问
53️⃣ 使用可靠的图床或 CDN1原因：导航栏配置错误或缓存问题
2解决：
31️⃣ 检查 menus.toml 语法是否正确
42️⃣ 确认 url 与页面 url 一致
53️⃣ 重启开发服务器配置检查清单
1✅ websites.json 语法正确（使用 JSON 验证器检查）
2✅ 分组 title 与 navCard 的 group 参数一致
3✅ 必填字段 name 和 link 已配置
4✅ websites.md 设置了 layout: websites 和 type: websites
5✅ 导航栏配置的 url 与页面 url 一致
6✅ 重启 Hugo 开发服务器后生效🎉 网站导航页面配置完成！
如有问题，请在 Hugo-Teek项目仓库 的 Issues 中反馈
📡
本站文章除特别声明外，均采用
CC BY-NC-SA 4.0
协议，转载请注明来自
余温Gueen Blog！
推荐使用微信支付
推荐使用支付宝
