跳到主要内容

自定义导航栏

最后更新于:

配置导航栏

版权

作者指导,自己测试。

环境

配置环境:

Youbg Kbt》大佬开源的《vitepress-theme-teek》一个博客项目(知识库+博客 二合一),它是一个轻量、简易的VitePress主题框架,非常简约唯美,且也在持续迭代更新,感谢大佬开源的这款优秀产品,大佬威武。💖💖💖

配置

(1)编辑demo\docs-base\.vitepress\config.mts文件的如下路径:defineConfig.nav

删除原来2条老数据,修改为我们自己的数据:

 1    nav: [
 2      // { text: "首页", link: "/" },
 3
 4      {
 5        text: '🏡首页',
 6        items: [
 7          { text: '首页', link: '/' },
 8          { text: '起始页', link: '/' },
 9        ],
10      },  
11
12      { text: '📢Teeker网站', link: '/Teeker' },
13
14      {
15        text: '🗃️知识库',
16        items: [
17          { text: '运维', link: '/linux' },
18          { text: '前端', link: '/qianduan' },
19          { text: '编程', link: '/code' },
20        ],
21      },  
22
23      {
24        text: '💎专题',
25        items: [
26          { text: '博客搭建', link: '/blog-dajian' },
27          // { text: 'Teeker', link: '/Teeker' },
28          // { text: 'vdoing', link: '/vdoing' },
29          { text: '前端demo', link: '/qianduan-demo' },
30          { text: 'nas', link: '/nas' },
31          { text: '脚本', link: '/jiaoben' },
32          { text: 'git', link: '/git' },
33          { text: '面试', link: '/mianshi' },
34          { text: '🧰工具', link: '/tools' },
35          { text: '🎨生活', link: '/life' },
36        ],
37      },  
38
39
40      {
41        text: '🏓娱乐',
42        items: [
43          { text: '相册', link: '/photo' },
44          { text: '音乐', link: '/music' },
45          { text: '电影', link: '/movie' },
46        ],
47      },  
48
49
50      { text: "💖精神小屋", link: "/love" },
51
52      { text: "👂留言区", link: "/liuyanqu" },
53
54      {
55        text: '👏索引',
56        items: [
57          { text: '分类', link: '/categories' },
58          { text: '标签', link: '/tags' },
59          { text: '归档', link: '/archives' },
60        ],
61      },    
62      
63      {
64        text: '🍷关于',
65        items: [
66          { text: '关于我', link: '/about-me' },
67          { text: '关于本站', link: '/aboute-website' },
68          { text: '🤝友链', link: '/youlian' },
69          { text: '🌐网页导航', link: '/websites' },
70          { text: '🔄更新日志', link: '/teeker-update-log' },
71          { text: '👏开源项目', link: '/opensource' },
72        ],
73      },   
74    ],

image-20250316155928040

(2)运行测试

1pnpm docs:dev

image-20250316200245744

最新文章

文档导航