为笔记配置一个主页

问题

使用sidebar: "auto"正常的配置一个笔记，一般如下：

docs/.vuepress/notes.ts

defineNoteConfig({
  dir: "vue-press",
  link: "vue-press",
  sidebar: "auto",
});

站点渲染效果如下

可以看出有两点不太友好：

• 左侧的目录均为子级页面，没有一个总的充当主页的页面
• 右侧内容上方的面包屑中只有两层，上一级直接是首页

解决方法

只需要对笔记的定义文件稍作调整即可解决：

手动指定sidebar，添加一层标题，并设置items: "auto"保持自动解析目录

docs/.vuepress/notes.ts

defineNoteConfig({
  dir: "vue-press",
  link: "vue-press",
  sidebar: [
    {
      text: "VuePress", // 侧边栏及面包屑中的名称
      items: "auto", // 保持侧边栏自动解析
    },
  ],
});

笔记目录下添加README.md文件，确保主页存在，否则面包屑中该级不可点击

docs/notes/vue-press/README.md

---
title: VuePress # 主页名称
createTime: 2025/08/30 16:16:49
permalink: /vue-press/ # 主页路径，需要与上面`node`中的`link`一致，否则会导致与笔记不在同一页
---

站点渲染效果如下，可以看到左侧顶部有一个加粗大号的主页名，右侧面包屑中间多了一层：

点击侧边栏主页，或面包屑中的主页，均可以跳转