头像 余温Gueen
头像
余温Gueen
-- : -- : --
切换主题色
-- : -- : --
博客 hugo-teek +3 网站导航导航页面配置说明 2156 字 9 分钟 -- 次

网站导航页面配置说明

最后更新于:

🧭 网站导航页面概述

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
 4    <div class="nav-card-grid"><div class="nav-card-grid__item">
 5        <a href="https://onedayxyy.cn/" class="nav-card-item" title="One" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 6              <img src="https://img.onedayxyy.cn/images/xyy-logo.ico" alt="One" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 7            </div><span class="name">One</span>
 8          </div><p class="desc">明心静性，爱自己</p></a>
 9      </div><div class="nav-card-grid__item">
10        <a href="https://img.onedayxyy.cn/images/wechat-gzh.jpg" class="nav-card-item" title="我的公众号" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
11              <img src="https://img.onedayxyy.cn/images/wechat-gzh.jpg" alt="我的公众号" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
12            </div><span class="name">我的公众号</span>
13          </div><p class="desc">公众号</p></a>
14      </div><div class="nav-card-grid__item">
15        <a href="https://blog.csdn.net/weixin_39246554?spm=1000.2115.3001.5343" class="nav-card-item" title="我的csdn" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
16              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-csdn.jpg" alt="我的csdn" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
17            </div><span class="name">我的csdn</span>
18          </div><p class="desc">csdn</p></a>
19      </div><div class="nav-card-grid__item">
20        <a href="https://www.zhihu.com/people/foryouone" class="nav-card-item" title="我的知乎" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
21              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-zhihu.jpg" alt="我的知乎" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
22            </div><span class="name">我的知乎</span>
23          </div><p class="desc">知乎</p></a>
24      </div><div class="nav-card-grid__item">
25        <a href="https://space.bilibili.com/386795051" class="nav-card-item" title="我的b站" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
26              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-bzhan.png" alt="我的b站" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
27            </div><span class="name">我的b站</span>
28          </div><p class="desc">b站</p></a>
29      </div><div class="nav-card-grid__item">
30        <a href="https://photo.onedayxyy.cn/" class="nav-card-item" title="我的相册" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
31              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-photo.png" alt="我的相册" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
32            </div><span class="name">我的相册</span>
33          </div><p class="desc">相册</p></a>
34      </div></div>
35
36# VitePress网站
37
38
39    <div class="nav-card-grid"><div class="nav-card-grid__item">
40        <a href="https://vitepress.dev/zh/" class="nav-card-item" title="VitePress" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
41              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/vitepress-logo-large-logo.svg" alt="VitePress" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
42            </div><span class="name">VitePress</span>
43          </div><p class="desc">VitePress官网</p></a>
44      </div><div class="nav-card-grid__item">
45        <a href="https://vitepress.yiov.top/" class="nav-card-item" title="vitepress.yiov.top" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
46              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/vitepress-logo-large-logo.svg" alt="vitepress.yiov.top" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
47            </div><span class="name">vitepress.yiov.top</span>
48          </div><p class="desc">VitePress中文教程</p></a>
49      </div><div class="nav-card-grid__item">
50        <a href="https://sugarat.top/" class="nav-card-item" title="粥里有勺糖" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
51              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/sugarat.top-logo.jpeg" alt="粥里有勺糖" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
52            </div><span class="name">粥里有勺糖</span>
53          </div><p class="desc">你的指尖,拥有改变世界的力量</p></a>
54      </div><div class="nav-card-grid__item">
55        <a href="https://blog.charles7c.top/" class="nav-card-item" title="查尔斯的知识库" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
56              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.charles7c.top-logo.png" alt="查尔斯的知识库" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
57            </div><span class="name">查尔斯的知识库</span>
58          </div><p class="desc">专注 &amp; 洞察 &amp; 分享</p></a>
59      </div><div class="nav-card-grid__item">
60        <a href="https://blog.imsyy.top/" class="nav-card-item" title="无名小栈" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
61              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.imsyy.top-logo.png" alt="无名小栈" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
62            </div><span class="name">无名小栈</span>
63          </div><p class="desc">大佬，新颖，不错的VitePress主题</p></a>
64      </div><div class="nav-card-grid__item">
65        <a href="https://cloudlark.cn/" class="nav-card-item" title="云雀Lark" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
66              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/cloudlark.cn.avif" alt="云雀Lark" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
67            </div><span class="name">云雀Lark</span>
68          </div><p class="desc">类似 无名小栈 风格网站</p></a>
69      </div><div class="nav-card-grid__item">
70        <a href="https://lumen.theojs.cn/" class="nav-card-item" title="Lumen Enhanced Theme" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
71              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/lumen.theojs.cn-logo.avif" alt="Lumen Enhanced Theme" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
72            </div><span class="name">Lumen Enhanced Theme</span>
73          </div><p class="desc">集成 Vue 功能组件和主题美化的 VitePress 插件</p></a>
74      </div><div class="nav-card-grid__item">
75        <a href="https://luolei.org/" class="nav-card-item" title="罗磊的独立博客" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
76              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/luolei.org-logo.png" alt="罗磊的独立博客" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
77            </div><span class="name">罗磊的独立博客</span>
78          </div><p class="desc">首页文章卡片式风格</p></a>
79      </div><div class="nav-card-grid__item">
80        <a href="https://www.appbeebee.com/" class="nav-card-item" title="APP比比" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
81              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/www.appbeebee.com-logo.png" alt="APP比比" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
82            </div><span class="name">APP比比</span>
83          </div><p class="desc">首页文章卡片式风格</p></a>
84      </div><div class="nav-card-grid__item">
85        <a href="https://blog.uopy.top/" class="nav-card-item" title="科技语者" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
86              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.uopy.top.png" alt="科技语者" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
87            </div><span class="name">科技语者</span>
88          </div><p class="desc">首页文章卡片式风格</p></a>
89      </div></div>
  1# 我的站点
  2
  3
  4    <div class="nav-card-grid"><div class="nav-card-grid__item">
  5        <a href="https://onedayxyy.cn/" class="nav-card-item" title="One" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
  6              <img src="https://img.onedayxyy.cn/images/xyy-logo.ico" alt="One" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
  7            </div><span class="name">One</span>
  8          </div><p class="desc">明心静性，爱自己</p></a>
  9      </div><div class="nav-card-grid__item">
 10        <a href="https://img.onedayxyy.cn/images/wechat-gzh.jpg" class="nav-card-item" title="我的公众号" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 11              <img src="https://img.onedayxyy.cn/images/wechat-gzh.jpg" alt="我的公众号" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 12            </div><span class="name">我的公众号</span>
 13          </div><p class="desc">公众号</p></a>
 14      </div><div class="nav-card-grid__item">
 15        <a href="https://blog.csdn.net/weixin_39246554?spm=1000.2115.3001.5343" class="nav-card-item" title="我的csdn" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 16              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-csdn.jpg" alt="我的csdn" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 17            </div><span class="name">我的csdn</span>
 18          </div><p class="desc">csdn</p></a>
 19      </div><div class="nav-card-grid__item">
 20        <a href="https://www.zhihu.com/people/foryouone" class="nav-card-item" title="我的知乎" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 21              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-zhihu.jpg" alt="我的知乎" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 22            </div><span class="name">我的知乎</span>
 23          </div><p class="desc">知乎</p></a>
 24      </div><div class="nav-card-grid__item">
 25        <a href="https://space.bilibili.com/386795051" class="nav-card-item" title="我的b站" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 26              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-bzhan.png" alt="我的b站" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 27            </div><span class="name">我的b站</span>
 28          </div><p class="desc">b站</p></a>
 29      </div><div class="nav-card-grid__item">
 30        <a href="https://photo.onedayxyy.cn/" class="nav-card-item" title="我的相册" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 31              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hg-photo.png" alt="我的相册" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 32            </div><span class="name">我的相册</span>
 33          </div><p class="desc">相册</p></a>
 34      </div></div>
 35
 36# VitePress网站
 37
 38
 39    <div class="nav-card-grid"><div class="nav-card-grid__item">
 40        <a href="https://vitepress.dev/zh/" class="nav-card-item" title="VitePress" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 41              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/vitepress-logo-large-logo.svg" alt="VitePress" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 42            </div><span class="name">VitePress</span>
 43          </div><p class="desc">VitePress官网</p></a>
 44      </div><div class="nav-card-grid__item">
 45        <a href="https://vitepress.yiov.top/" class="nav-card-item" title="vitepress.yiov.top" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 46              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/vitepress-logo-large-logo.svg" alt="vitepress.yiov.top" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 47            </div><span class="name">vitepress.yiov.top</span>
 48          </div><p class="desc">VitePress中文教程</p></a>
 49      </div><div class="nav-card-grid__item">
 50        <a href="https://sugarat.top/" class="nav-card-item" title="粥里有勺糖" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 51              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/sugarat.top-logo.jpeg" alt="粥里有勺糖" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 52            </div><span class="name">粥里有勺糖</span>
 53          </div><p class="desc">你的指尖,拥有改变世界的力量</p></a>
 54      </div><div class="nav-card-grid__item">
 55        <a href="https://blog.charles7c.top/" class="nav-card-item" title="查尔斯的知识库" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 56              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.charles7c.top-logo.png" alt="查尔斯的知识库" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 57            </div><span class="name">查尔斯的知识库</span>
 58          </div><p class="desc">专注 &amp; 洞察 &amp; 分享</p></a>
 59      </div><div class="nav-card-grid__item">
 60        <a href="https://blog.imsyy.top/" class="nav-card-item" title="无名小栈" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 61              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.imsyy.top-logo.png" alt="无名小栈" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 62            </div><span class="name">无名小栈</span>
 63          </div><p class="desc">大佬，新颖，不错的VitePress主题</p></a>
 64      </div><div class="nav-card-grid__item">
 65        <a href="https://cloudlark.cn/" class="nav-card-item" title="云雀Lark" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 66              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/cloudlark.cn.avif" alt="云雀Lark" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 67            </div><span class="name">云雀Lark</span>
 68          </div><p class="desc">类似 无名小栈 风格网站</p></a>
 69      </div><div class="nav-card-grid__item">
 70        <a href="https://lumen.theojs.cn/" class="nav-card-item" title="Lumen Enhanced Theme" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 71              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/lumen.theojs.cn-logo.avif" alt="Lumen Enhanced Theme" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 72            </div><span class="name">Lumen Enhanced Theme</span>
 73          </div><p class="desc">集成 Vue 功能组件和主题美化的 VitePress 插件</p></a>
 74      </div><div class="nav-card-grid__item">
 75        <a href="https://luolei.org/" class="nav-card-item" title="罗磊的独立博客" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 76              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/luolei.org-logo.png" alt="罗磊的独立博客" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 77            </div><span class="name">罗磊的独立博客</span>
 78          </div><p class="desc">首页文章卡片式风格</p></a>
 79      </div><div class="nav-card-grid__item">
 80        <a href="https://www.appbeebee.com/" class="nav-card-item" title="APP比比" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 81              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/www.appbeebee.com-logo.png" alt="APP比比" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 82            </div><span class="name">APP比比</span>
 83          </div><p class="desc">首页文章卡片式风格</p></a>
 84      </div><div class="nav-card-grid__item">
 85        <a href="https://blog.uopy.top/" class="nav-card-item" title="科技语者" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 86              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/blog.uopy.top.png" alt="科技语者" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 87            </div><span class="name">科技语者</span>
 88          </div><p class="desc">首页文章卡片式风格</p></a>
 89      </div></div>
 90
 91# 静态站点构建器(SSG)
 92
 93
 94    <div class="nav-card-grid"><div class="nav-card-grid__item">
 95        <a href="https://vitepress.dev/zh/" class="nav-card-item" title="VitePress" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
 96              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/vitepress-logo-large-logo.svg" alt="VitePress" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
 97            </div><span class="name">VitePress</span>
 98          </div><p class="desc">由 Vite 和 Vue 驱动的静态站点生成器</p></a>
 99      </div><div class="nav-card-grid__item">
100        <a href="https://vuepress.vuejs.org/zh/" class="nav-card-item" title="VuePress" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
101              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/VuePress.png" alt="VuePress" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
102            </div><span class="name">VuePress</span>
103          </div><p class="desc">Vue 驱动的静态网站生成器</p></a>
104      </div><div class="nav-card-grid__item">
105        <a href="https://gohugo.io/" class="nav-card-item" title="hugo" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
106              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/gohugo.io.svg" alt="hugo" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
107            </div><span class="name">hugo</span>
108          </div><p class="desc">The world&#39;s fastest framework for building websites</p></a>
109      </div><div class="nav-card-grid__item">
110        <a href="https://docusaurus.io/" class="nav-card-item" title="Docusaurus" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
111              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/docusaurus.svg" alt="Docusaurus" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
112            </div><span class="name">Docusaurus</span>
113          </div><p class="desc">快速构建以内容为核心的最佳网站</p></a>
114      </div><div class="nav-card-grid__item">
115        <a href="https://valaxy.site/" class="nav-card-item" title="Valaxy" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
116              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/Valaxy.svg" alt="Valaxy" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
117            </div><span class="name">Valaxy</span>
118          </div><p class="desc">下一代静态博客框架</p></a>
119      </div><div class="nav-card-grid__item">
120        <a href="https://rspress.uihtm.com/zh/" class="nav-card-item" title="Rspress" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
121              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/rspress.uihtm.com.png" alt="Rspress" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
122            </div><span class="name">Rspress</span>
123          </div><p class="desc">快如闪电的静态站点生成器（简单、高性能、易于扩展）</p></a>
124      </div></div>
125
126# Docusaurus
127
128
129    <div class="nav-card-grid"><div class="nav-card-grid__item">
130        <a href="https://docusaurus.io/" class="nav-card-item" title="Docusaurus官网" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
131              <img src="https://docusaurus.io/img/docusaurus.svg" alt="Docusaurus官网" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
132            </div><span class="name">Docusaurus官网</span>
133          </div><p class="desc">快速构建以内容为核心的最佳网站</p></a>
134      </div><div class="nav-card-grid__item">
135        <a href="https://docusaurus.nodejs.cn/" class="nav-card-item" title="docus完整汉化版" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
136              <img src="https://docusaurus.nodejs.cn/img/docusaurus.svg" alt="docus完整汉化版" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
137            </div><span class="name">docus完整汉化版</span>
138          </div><p class="desc">完美汉化版</p></a>
139      </div><div class="nav-card-grid__item">
140        <a href="https://kuizuo.cn/" class="nav-card-item" title="愧怍" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
141              <img src="https://kuizuo.cn/img/logo.avif" alt="愧怍" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
142            </div><span class="name">愧怍</span>
143          </div><p class="desc">编程爱好者，编写所感兴趣的项目，现主攻js/ts全栈，希望能为开源社区做出一份贡献</p></a>
144      </div><div class="nav-card-grid__item">
145        <a href="https://www.shaking.site/" class="nav-card-item" title="Shake" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
146              <img src="https://www.shaking.site/img/head.jpg" alt="Shake" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
147            </div><span class="name">Shake</span>
148          </div><p class="desc">世界继续热闹，愿你不变模样，勇敢且自由😃</p></a>
149      </div><div class="nav-card-grid__item">
150        <a href="https://spacexcode.com/" class="nav-card-item" title="太空编程" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
151              <img src="https://spacexcode.com/img/favicon.ico" alt="太空编程" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
152            </div><span class="name">太空编程</span>
153          </div><p class="desc">Docusaurus 大佬</p></a>
154      </div></div>
155
156# 搜索引擎
157
158
159    <div class="nav-card-grid"><div class="nav-card-grid__item">
160        <a href="http://www.baidu.com/" class="nav-card-item" title="百度" target="_blank" rel="noopener"><span class="VPBadge info badge">搜索引擎</span><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
161              <img src="https://img.tukuppt.com/png_preview/00/10/46/IHk8cns6Re.jpg!/fw/780" alt="百度" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
162            </div><span class="name">百度</span>
163          </div><p class="desc">百度——全球最大的中文搜索引擎及最大的中文网站，全球领先的人工智能公司</p></a>
164      </div><div class="nav-card-grid__item">
165        <a href="http://www.google.com/" class="nav-card-item" title="Google" target="_blank" rel="noopener"><span class="VPBadge tip badge">搜索引擎</span><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
166              <img src="https://ts1.cn.mm.bing.net/th/id/R-C.58c0f536ec073452434270fb559c3f8c?rik=SnOUNtUtPLX6ww&amp;riu=http%3a%2f%2fwww.sz4a.cn%2fPublic%2fUploads%2fimage%2f20230303%2f1677839482835474.png&amp;ehk=J1lqoeszPGEWzDOSZQ3JxzXsklfd0QzgrJu6ZVvESKk%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0" alt="Google" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
167            </div><span class="name">Google</span>
168          </div><p class="desc">全球最大的搜索引擎公司</p></a>
169      </div></div>
170
171# 工具
172
173
174    <div class="nav-card-grid"><div class="nav-card-grid__item">
175        <a href="https://c.runoob.com/" class="nav-card-item" title="菜鸟工具" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
176              <img src="https://static.jyshare.com/images/c-runoob-logo.ico" alt="菜鸟工具" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
177            </div><span class="name">菜鸟工具</span>
178          </div><p class="desc">菜鸟工具，为开发设计人员提供在线工具，提供在线 PHP、Python、 CSS、JS 调试，中文简繁体转换，进制转换等工具</p></a>
179      </div><div class="nav-card-grid__item">
180        <a href="https://processon.com/" class="nav-card-item" title="ProcessOn" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
181              <img src="https://processon.com/favicon.ico" alt="ProcessOn" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
182            </div><span class="name">ProcessOn</span>
183          </div><p class="desc">免费在线流程图思维导图</p></a>
184      </div><div class="nav-card-grid__item">
185        <a href="https://www.apifox.cn/" class="nav-card-item" title="Apifox" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
186              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/Apifox.png" alt="Apifox" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
187            </div><span class="name">Apifox</span>
188          </div><p class="desc">API 文档、API 调试、API Mock、API 自动化测试</p></a>
189      </div><div class="nav-card-grid__item">
190        <a href="https://www.deepl.com/translator/" class="nav-card-item" title="DeepL 翻译" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
191              <img src="https://static.deepl.com/img/logo/DeepL_Logo_darkBlue_v2.svg" alt="DeepL 翻译" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
192            </div><span class="name">DeepL 翻译</span>
193          </div><p class="desc">号称全世界最准的翻译</p></a>
194      </div><div class="nav-card-grid__item">
195        <a href="https://www.remove.bg/zh/" class="nav-card-item" title="removebg" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
196              <img src="https://t1.gstatic.com/faviconV2?client=SOCIAL&amp;type=FAVICON&amp;fallback_opts=TYPE,SIZE,URL&amp;url=http://www.remove.bg/zh&amp;size=50" alt="removebg" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
197            </div><span class="name">removebg</span>
198          </div><p class="desc">在线抠图软件，可以去除图片背景</p></a>
199      </div><div class="nav-card-grid__item">
200        <a href="https://icon-sets.iconify.design/" class="nav-card-item" title="iconify" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
201              <img src="https://icon-sets.iconify.design/favicon.ico" alt="iconify" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
202            </div><span class="name">iconify</span>
203          </div><p class="desc">数千个图标，一个统一的框架</p></a>
204      </div><div class="nav-card-grid__item">
205        <a href="https://www.iconfont.cn/" class="nav-card-item" title="iconfont" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
206              <img src="https://img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" alt="iconfont" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
207            </div><span class="name">iconfont</span>
208          </div><p class="desc">iconfont - 国内功能很强大且图标内容很丰富的矢量图标库</p></a>
209      </div></div>
210
211# 图床软件
212
213
214    <div class="nav-card-grid"><div class="nav-card-grid__item">
215        <a href="https://piclist.cn/" class="nav-card-item" title="PicList" target="_blank" rel="noopener"><span class="VPBadge info badge">强烈推荐</span><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
216              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/piclist.png" alt="PicList" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
217            </div><span class="name">PicList</span>
218          </div><p class="desc">图片上传 云存储管理（可完全替换PicGo）</p></a>
219      </div><div class="nav-card-grid__item">
220        <a href="https://picgo.github.io/PicGo-Doc/" class="nav-card-item" title="PicGo" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
221              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/picgo.png" alt="PicGo" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
222            </div><span class="name">PicGo</span>
223          </div><p class="desc">图片上传、管理新体验</p></a>
224      </div><div class="nav-card-grid__item">
225        <a href="https://www.u-tools.cn/" class="nav-card-item" title="utools" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
226              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/www.u-tools.cn.png" alt="utools" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
227            </div><span class="name">utools</span>
228          </div><p class="desc">里面含有图床插件</p></a>
229      </div><div class="nav-card-grid__item">
230        <a href="https://getsharex.com/" class="nav-card-item" title="ShareX" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
231              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/getsharex.com.png" alt="ShareX" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
232            </div><span class="name">ShareX</span>
233          </div><p class="desc">可以把图片上传到服务器某个目录下同时保存图片到本地</p></a>
234      </div></div>
235
236# 壁纸网站
237
238
239    <div class="nav-card-grid"><div class="nav-card-grid__item">
240        <a href="https://haowallpaper.com/" class="nav-card-item" title="哲风壁纸" target="_blank" rel="noopener"><span class="VPBadge info badge">不错哦</span><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
241              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/haowallpaper.com.ico" alt="哲风壁纸" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
242            </div><span class="name">哲风壁纸</span>
243          </div><p class="desc">好看的壁纸网站</p></a>
244      </div><div class="nav-card-grid__item">
245        <a href="https://www.bizhihui.com/" class="nav-card-item" title="壁纸汇" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
246              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/bizhihui.png" alt="壁纸汇" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
247            </div><span class="name">壁纸汇</span>
248          </div><p class="desc">15013&#43;份高清4K / 8K壁纸图片提供免费下载！</p></a>
249      </div><div class="nav-card-grid__item">
250        <a href="https://hdqwalls.com/" class="nav-card-item" title="hdqwalls.com" target="_blank" rel="noopener"><div class="nav-card-item__info"><div class="nav-card-item__img skeleton-image">
251              <img src="https://img.onedayxyy.cn/images/Teek/Teekwebsite/hdqwalls.png" alt="hdqwalls.com" loading="lazy" onload="this.classList.add('loaded')" onerror="this.classList.add('loaded')">
252            </div><span class="name">hdqwalls.com</span>
253          </div><p class="desc">壁纸</p></a>
254      </div></div>

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└───────────┴──────────┴──────────────────┘

🔧 完整配置流程

步骤一：配置数据文件

  1. 创建或编辑 data/websites.json 文件
  2. 按照 JSON 格式定义分组和网站数据
  3. 验证 JSON 语法正确性

步骤二：创建页面文件

  1. 创建 content/websites.md 文件
  2. 配置 Front Matter（设置 layout: websites 和 type: websites）
  3. 使用 navCard Shortcode 引用分组

步骤三：配置导航栏

  1. 编辑 config/teek-plugins/menus.toml
  2. 添加网站导航菜单项
  3. 设置正确的 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
11<div class="nav-card-not-found">
12  <p>分组 "<strong>常用网站</strong>" 在 data/websites.json 中不存在</p>
13</div>
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️⃣ 使用可靠的图床或 CDN
1原因：导航栏配置错误或缓存问题
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 中反馈

📡
👤 作者: 余温Gueen
🔗 链接: https://wiki.xxdevops.cn/hobby/website-nav-peizhi
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章