ナビ

ナビは、ページ上部に表示されるナビゲーションバーです。サイトタイトル、グローバルメニューリンクなどが含まれます。

サイトタイトルとロゴ

デフォルトでは、ナビには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: '...' }
            ]
          }
        ]
      }
    ]
  }
}

リンクの「アクティブ」状態のカスタマイズ

現在のページが一致するパスにある場合、ナビメニュー項目が強調表示されます。一致させるパスをカスタマイズしたい場合は、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を参照してください。