導覽

導覽列是顯示在頁面頂端的導覽列。它包含網站標題、全域選單連結等。

網站標題和標誌

預設情況下，導覽列會顯示網站標題，參照 config.title 值。如果您想變更導覽列上顯示的內容，您可以在 themeConfig.siteTitle 選項中定義自訂文字。

export default {
  themeConfig: {
    siteTitle: 'My Custom Title'
  }
}

如果您有網站標誌，您可以透過傳遞圖片路徑來顯示它。您應該將標誌直接放置在 public 中，並定義其絕對路徑。

export default {
  themeConfig: {
    logo: '/my-logo.svg'
  }
}

加入標誌時，它會與網站標題一起顯示。如果您的標誌就是您需要的，而且您想隱藏網站標題文字，請將 siteTitle 選項設定為 false。

export default {
  themeConfig: {
    logo: '/my-logo.svg',
    siteTitle: false
  }
}

如果您想加入 alt 屬性或根據深色/淺色模式自訂標誌，您也可以傳遞一個物件作為標誌。有關詳細資訊，請參閱 themeConfig.logo。

導覽連結

您可以定義 themeConfig.nav 選項，以將連結加入導覽列。

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      { text: 'Config', link: '/config' },
      { text: 'Changelog', link: 'https://github.com/...' }
    ]
  }
}

text 是實際顯示在導覽列中的文字，而 link 是在按一下文字時會導向的連結。對於連結，請設定路徑至實際檔案，不含 .md 字首，且務必以 / 開頭。

導覽連結也可以是下拉式選單。若要執行此操作，請在連結選項中設定 items 鍵。

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      {
        text: 'Dropdown Menu',
        items: [
          { text: 'Item A', link: '/item-1' },
          { text: 'Item B', link: '/item-2' },
          { text: 'Item C', link: '/item-3' }
        ]
      }
    ]
  }
}

請注意，下拉式選單標題（如上述範例中的「Dropdown Menu」）不能有 `link` 屬性，因為它會變成開啟下拉式對話框的按鈕。

您也可以透過傳遞更多巢狀項目，進一步將「區段」新增至下拉式選單項目。

export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      {
        text: 'Dropdown Menu',
        items: [
          {
            // Title for the section.
            text: 'Section A Title',
            items: [
              { text: 'Section A Item A', link: '...' },
              { text: 'Section B Item B', link: '...' }
            ]
          }
        ]
      },
      {
        text: 'Dropdown Menu',
        items: [
          {
            // You may also omit the title.
            items: [
              { text: 'Section A Item A', link: '...' },
              { text: 'Section B Item B', link: '...' }
            ]
          }
        ]
      }
    ]
  }
}

自訂連結的「active」狀態

當目前頁面在相符路徑下時，導覽選單項目會被標示出來。如果您想要自訂要比對的路徑，請定義 `activeMatch` 屬性，並將正規表示式設為字串值。

export default {
  themeConfig: {
    nav: [
      // This link gets active state when the user is
      // on `/config/` path.
      {
        text: 'Guide',
        link: '/guide',
        activeMatch: '/config/'
      }
    ]
  }
}

警告

預期 `activeMatch` 是正規表示式字串，但您必須將它定義為字串。我們無法在此處使用實際的 RegExp 物件，因為它在建置期間無法序列化。

自訂連結的「target」和「rel」屬性

預設情況下，VitePress 會根據連結是否為外部連結自動判斷 `target` 和 `rel` 屬性。但如果您願意，也可以自訂它們。

export default {
  themeConfig: {
    nav: [
      {
        text: 'Merchandise',
        link: 'https://www.thegithubshop.com/',
        target: '_self',
        rel: 'sponsored'
      }
    ]
  }
}

社群連結

請參閱 socialLinks。