Skip to content

建立 2026-09-15 更新 2026-09-15

頂欄與側欄

預設主題不會依照資料夾自動長出完整選單。你新增了 .md，若沒寫進 nav 或 sidebar，讀者只能靠搜尋或手動輸入網址找到它。

顯示在每一頁最上方，適合放「指南／參考／關於」這種少數入口：

export default {
  themeConfig: {
    nav: [
      { text: '指南', link: '/guide/' },
      { text: '參考', link: '/reference/config' },
      {
        text: '連結',
        items: [
          { text: '官方文件', link: 'https://vitepress.dev/zh/' },
          { text: 'GitHub', link: 'https://github.com/vuejs/vitepress' },
        ],
      },
    ],
  },
}

link 對應 檔案路由 的路徑，站內頁以 / 開頭。下拉選單用 items。

文件頁左側的章節清單。可以是「全站同一份」，或依路徑切換：

export default {
  themeConfig: {
    sidebar: [
      {
        text: '指南',
        items: [
          { text: '什麼是 VitePress', link: '/guide/what-is-vitepress' },
          { text: '快速開始', link: '/guide/getting-started' },
        ],
      },
    ],
  },
}

依路徑使用不同側欄時，鍵是 URL 前綴：

sidebar: {
  '/guide/': [
    { text: '指南', items: [/* … */] },
  ],
  '/reference/': [
    { text: '參考', items: [/* … */] },
  ],
}

群組預設可折疊。官方文件另有 collapsed 等選項，見〈側邊欄〉與〈導航欄〉。

實務建議

  1. 先決定資料夾，再填 link，不要先寫選單才補檔案。
  2. text 給人看、link 給路由看，兩者不必同名，但 link 必須真實存在。
  3. 側欄不要一次展開全部章節；用多個 text 群組，讓讀者先看到分類。
  4. 改完 config 通常會熱更新；若側欄沒出現，先確認路徑前綴（/guide/ 與 /guide 行為不同）以及檔案是否叫 index.md。

This Dot Media 用實際操作示範如何把新頁面掛進側欄：

影片約 11 分鐘，涵蓋 frontmatter、程式碼高亮與 sidebar。拍攝於 2024 年，設定檔名稱可能是 config.mjs，與現在的 config.ts 只是副檔名差異。