在你的Vuepress博客中添加导航页面

在你的Vuepress博客中添加导航页面

Step 1 快速体验

在你的根目录下找到.vuepress文件夹,在该目录下创建Navigate.vue文件,复制粘贴以下代码.

Step 2 markdown创建文件

我使用的是reco主题,如果你也是,你可以在你的blogsordocs目录下创建一篇markdown文章——navigate.md,粘贴一下代码。

    ---
    title: 导航
    date: 2022-9-28 14:47:01
    ---

    
    

Step3 可扩展性

如果你想添加导航，可以在navList中添加,格式如下

    navList: [ // 整体作为一个数组,用于循环渲染
        { // 每个数组下，有多个分类
          title: "动漫 | 漫画 | 兴趣", // 当前分类的标题
          arr: [ // 当前分类下的导航
            {
              nav: "bilibili", // 导航名
              nav_url: "https://www.bilibili.com/", // 导航链接
              id: "1", // 导航id
            },
          ],
        },
    ]

效果展示

最后

如果它对你有帮助，我希望您可以再来看看我的博客的其它文章<请点击这里>