Skip to content

自定义导航栏

配置导航栏

版权

作者指导,自己测试。

环境

配置环境:

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

配置

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

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

ts
    nav: [
      // { text: "首页", link: "/" },

      {
        text: '🏡首页',
        items: [
          { text: '首页', link: '/' },
          { text: '起始页', link: '/' },
        ],
      },  

      { text: '📢Teeker网站', link: '/Teeker' },

      {
        text: '🗃️知识库',
        items: [
          { text: '运维', link: '/linux' },
          { text: '前端', link: '/qianduan' },
          { text: '编程', link: '/code' },
        ],
      },  

      {
        text: '💎专题',
        items: [
          { text: '博客搭建', link: '/blog-dajian' },
          // { text: 'Teeker', link: '/Teeker' },
          // { text: 'vdoing', link: '/vdoing' },
          { text: '前端demo', link: '/qianduan-demo' },
          { text: 'nas', link: '/nas' },
          { text: '脚本', link: '/jiaoben' },
          { text: 'git', link: '/git' },
          { text: '面试', link: '/mianshi' },
          { text: '🧰工具', link: '/tools' },
          { text: '🎨生活', link: '/life' },
        ],
      },  


      {
        text: '🏓娱乐',
        items: [
          { text: '相册', link: '/photo' },
          { text: '音乐', link: '/music' },
          { text: '电影', link: '/movie' },
        ],
      },  


      { text: "💖精神小屋", link: "/love" },

      { text: "👂留言区", link: "/liuyanqu" },

      {
        text: '👏索引',
        items: [
          { text: '分类', link: '/categories' },
          { text: '标签', link: '/tags' },
          { text: '归档', link: '/archives' },
        ],
      },    
      
      {
        text: '🍷关于',
        items: [
          { text: '关于我', link: '/about-me' },
          { text: '关于本站', link: '/aboute-website' },
          { text: '🤝友链', link: '/youlian' },
          { text: '🌐网页导航', link: '/websites' },
          { text: '🔄更新日志', link: '/teeker-update-log' },
          { text: '👏开源项目', link: '/opensource' },
        ],
      },   
    ],

image-20250316155928040

(2)运行测试

bash
pnpm docs:dev

image-20250316200245744