デフォルトテーマの設定

テーマ設定では、テーマのカスタマイズができます。設定ファイルの themeConfig オプションで定義します。

export default {
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',

  // テーマ関連の設定
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

このページで説明するオプションは、デフォルトテーマにのみ適用されます。 テーマによって期待する設定は異なります。カスタムテーマを使用する場合、ここで定義したテーマ設定オブジェクトはテーマへ渡され、テーマ側がそれに基づいて条件付きの挙動を定義できます。

i18nRouting

型: boolean

ロケールを zh のように切り替えると、URL は /foo（または /en/foo/）から /zh/foo に変わります。themeConfig.i18nRouting を false に設定すると、この挙動を無効化できます。

logo

型: ThemeableImage

サイトタイトルの直前に、ナビゲーションバーに表示されるロゴ。パス文字列、またはライト／ダークモードで異なるロゴを設定するオブジェクトを受け取ります。

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

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

siteTitle

型: string | false

ナビゲーション内の既定サイトタイトル（アプリ設定の title）を置き換えます。false の場合、ナビのタイトルを非表示にします。ロゴ自体にサイト名が含まれている場合に便利です。

export default {
  themeConfig: {
    siteTitle: 'Hello World'
  }
}

nav

型: NavItem

ナビゲーションメニューの設定。デフォルトテーマ: ナビを参照してください。

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' }
        ]
      }
    ]
  }
}

type NavItem = NavItemWithLink | NavItemWithChildren

interface NavItemWithLink {
  text: string
  link: string | ((payload: PageData) => string)
  activeMatch?: string
  target?: string
  rel?: string
  noIcon?: boolean
}

interface NavItemChildren {
  text?: string
  items: NavItemWithLink[]
}

interface NavItemWithChildren {
  text?: string
  items: (NavItemChildren | NavItemWithLink)[]
  activeMatch?: string
}

型: Sidebar

サイドバーメニューの設定。デフォルトテーマ: サイドバーを参照してください。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

export type Sidebar = SidebarItem[] | SidebarMulti

export interface SidebarMulti {
  [path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
}

export type SidebarItem = {
  /**
   * 項目のテキストラベル
   */
  text?: string

  /**
   * 項目のリンク
   */
  link?: string

  /**
   * 子項目
   */
  items?: SidebarItem[]

  /**
   * 指定しない場合、グループは折りたたみ不可。
   *
   * `true` なら折りたたみ可能でデフォルト折りたたみ
   *
   * `false` なら折りたたみ可能だがデフォルト展開
   */
  collapsed?: boolean

  /**
   * 子項目のベースパス
   */
  base?: string

  /**
   * 前／次リンクのフッターに表示するテキストをカスタマイズ
   */
  docFooterText?: string

  rel?: string
  target?: string
}

aside

型: boolean | 'left'
既定値: true
ページごとに frontmatter で上書き可能

false でサイドコンテナの描画を無効化。
true で右側に表示。
left で左側に表示。

すべてのビューポートで無効にしたい場合は、代わりに outline: false を使用してください。

outline

型: Outline | Outline['level'] | false
レベルはページごとに frontmatter で上書き可能

false でアウトラインコンテナの描画を無効化。詳細は以下を参照：

interface Outline {
  /**
   * アウトラインに表示する見出しレベル
   * 単一の数値なら、そのレベルのみ表示
   * タプルなら最小レベルと最大レベル
   * `'deep'` は `[2, 6]` と同じ（`<h2>` 〜 `<h6>` を表示）
   *
   * @default 2
   */
  level?: number | [number, number] | 'deep'

  /**
   * アウトラインに表示するタイトル
   *
   * @default 'On this page'
   */
  label?: string
}

socialLinks

型: SocialLink[]

ナビゲーションにアイコン付きのソーシャルリンクを表示します。

export default {
  themeConfig: {
    socialLinks: [
      // simple-icons (https://simpleicons.org/) の任意のアイコンを指定可能
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // SVG 文字列を渡してカスタムアイコンも可
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...',
        // アクセシビリティ向けにカスタムラベルも指定可（推奨）
        ariaLabel: 'cool link'
      }
    ]
  }
}

interface SocialLink {
  icon: string | { svg: string }
  link: string
  ariaLabel?: string
}

型: Footer
ページごとに frontmatter で上書き可能

フッター設定。メッセージや著作権表示を追加できますが、ページにサイドバーがある場合はデザイン上表示されません。

export default {
  themeConfig: {
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2019-present Evan You'
    }
  }
}

export interface Footer {
  message?: string
  copyright?: string
}

editLink

型: EditLink
ページごとに frontmatter で上書き可能

「このページを編集」リンクを表示します（GitHub/GitLab など）。詳細はデフォルトテーマ: 編集リンクを参照。

export default {
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
      text: 'Edit this page on GitHub'
    }
  }
}

export interface EditLink {
  pattern: string
  text?: string
}

lastUpdated

型: LastUpdatedOptions

最終更新の文言と日付フォーマットをカスタマイズします。

export default {
  themeConfig: {
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    }
  }
}

export interface LastUpdatedOptions {
  /**
   * @default 'Last updated'
   */
  text?: string

  /**
   * @default
   * { dateStyle: 'short',  timeStyle: 'short' }
   */
  formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
}

algolia

型: AlgoliaSearch

Algolia DocSearch によるサイト内検索の設定。デフォルトテーマ: 検索を参照。

export interface AlgoliaSearchOptions extends DocSearchProps {
  locales?: Record<string, Partial<DocSearchProps>>
}

完全なオプションはこちら。

carbonAds

型: CarbonAdsOptions

Carbon Ads を表示します。

export default {
  themeConfig: {
    carbonAds: {
      code: 'your-carbon-code',
      placement: 'your-carbon-placement'
    }
  }
}

export interface CarbonAdsOptions {
  code: string
  placement: string
}

詳細はデフォルトテーマ: Carbon Ads を参照。

docFooter

型: DocFooter

前／次リンクの上に表示される文言をカスタマイズします。英語以外のドキュメントで便利。前／次リンク自体をグローバルに無効化することも可能。ページごとに切り替えたい場合は frontmatter を使用します。

export default {
  themeConfig: {
    docFooter: {
      prev: 'Pagina prior',
      next: 'Proxima pagina'
    }
  }
}

export interface DocFooter {
  prev?: string | false
  next?: string | false
}

darkModeSwitchLabel

型: string
既定値: Appearance

ダークモード切替スイッチのラベル（モバイル表示のみ）をカスタマイズします。

lightModeSwitchTitle

型: string
既定値: Switch to light theme

ホバー時に表示されるライトモード切替のタイトルをカスタマイズします。

darkModeSwitchTitle

型: string
既定値: Switch to dark theme

ホバー時に表示されるダークモード切替のタイトルをカスタマイズします。

sidebarMenuLabel

型: string
既定値: Menu

サイドバーメニューのラベル（モバイル表示のみ）をカスタマイズします。

returnToTopLabel

型: string
既定値: Return to top

トップに戻るボタンのラベル（モバイル表示のみ）をカスタマイズします。

langMenuLabel

型: string
既定値: Change language

ナビバーの言語切替ボタンの aria-label をカスタマイズします。i18n を使う場合に有効です。

skipToContentLabel

型: string
既定値: Skip to content

コンテンツへスキップリンクのラベルをカスタマイズします。キーボード操作時に表示されます。

externalLinkIcon

型: boolean
既定値: false

Markdown 内の外部リンクの横に外部リンクアイコンを表示するかどうか。

`useLayout` composable

レイアウト関連のデータを返します。返り値の型は次のとおりです。

interface {
  isHome: ComputedRef<boolean>

  sidebar: Readonly<ShallowRef<DefaultTheme.SidebarItem[]>>
  sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
  hasSidebar: ComputedRef<boolean>
  isSidebarEnabled: ComputedRef<boolean>

  hasAside: ComputedRef<boolean>
  leftAside: ComputedRef<boolean>

  headers: Readonly<ShallowRef<DefaultTheme.OutlineItem[]>>
  hasLocalNav: ComputedRef<boolean>
}

例:

vue

<script setup>
import { useLayout } from 'vitepress/theme'

const { hasSidebar } = useLayout()
</script>

<template>
  <div v-if="hasSidebar">サイドバーがあるときだけ表示</div>
</template>

デフォルトテーマの設定 ​

i18nRouting ​

logo ​

siteTitle ​

nav ​

sidebar ​

aside ​

outline ​

socialLinks ​

footer ​

editLink ​

lastUpdated ​

algolia ​

carbonAds ​

docFooter ​

darkModeSwitchLabel ​

lightModeSwitchTitle ​

darkModeSwitchTitle ​

sidebarMenuLabel ​

returnToTopLabel ​

langMenuLabel ​

skipToContentLabel ​

externalLinkIcon ​

useLayout composable ​