デフォルトテーマの設定

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

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

  // Theme related configurations.
  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に設定すると、ナビのタイトルが無効になります。すでにサイトタイトルテキストを含むlogoがある場合に便利です。

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
  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 = {
  /**
   * The text label of the item.
   */
  text?: string

  /**
   * The link of the item.
   */
  link?: string

  /**
   * The children of the item.
   */
  items?: SidebarItem[]

  /**
   * If not specified, group is not collapsible.
   *
   * If `true`, group is collapsible and collapsed by default
   *
   * If `false`, group is collapsible but expanded by default
   */
  collapsed?: boolean

  /**
   * Base path for the children items.
   */
  base?: string

  /**
   * Customize text that appears on the footer of previous/next page.
   */
  docFooterText?: string

  rel?: string
  target?: string
}

aside

型: boolean | 'left'
デフォルト: true
ページごとにフロントマターを介して上書きできます

この値をfalseに設定すると、asideコンテナのレンダリングが防止されます。
この値をtrueに設定すると、asideが右側にレンダリングされます。
この値をleftに設定すると、asideが左側にレンダリングされます。

すべてのビューポートで無効にしたい場合は、代わりにoutline: falseを使用する必要があります。

outline

型: Outline | Outline['level'] | false
レベルはページごとにフロントマターを介して上書きできます

この値をfalseに設定すると、アウトラインコンテナのレンダリングが防止されます。詳細については、このインターフェースを参照してください

interface Outline {
  /**
   * The levels of headings to be displayed in the outline.
   * Single number means only headings of that level will be displayed.
   * If a tuple is passed, the first number is the minimum level and the second number is the maximum level.
   * `'deep'` is same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed.
   *
   * @default 2
   */
  level?: number | [number, number] | 'deep'

  /**
   * The title to be displayed on the outline.
   *
   * @default 'On this page'
   */
  label?: string
}

socialLinks

型: SocialLink[]

ナビにアイコン付きのソーシャルアカウントリンクを表示するために、このオプションを定義できます。

export default {
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // You can also add custom icons by passing SVG as string:
      {
        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: '...',
        // You can include a custom label for accessibility too (optional but recommended):
        ariaLabel: 'cool link'
      }
    ]
  }
}

interface SocialLink {
  icon: SocialLinkIcon
  link: string
  ariaLabel?: string
}

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'mastodon'
  | 'npm'
  | 'slack'
  | 'twitter'
  | 'x'
  | 'youtube'
  | { svg: string }

型: Footer
ページごとにフロントマターを介して上書きできます

フッターの設定。フッターにメッセージや著作権テキストを追加できますが、ページにサイドバーが含まれていない場合にのみ表示されます。これはデザイン上の懸念によるものです。

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
ページごとにフロントマターを介して上書きできます

編集リンクを使用すると、GitHubやGitLabなどのGit管理サービスでページを編集するためのリンクを表示できます。詳細については、デフォルトテーマ: 編集リンクを参照してください。

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

前と次のリンクの上に表示されるテキストをカスタマイズするために使用できます。英語でドキュメントを作成していない場合に役立ちます。また、前/次のリンクをグローバルに無効にすることもできます。前/次のリンクを選択的に有効/無効にする場合は、フロントマターを使用できます。

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

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

darkModeSwitchLabel

型: string
デフォルト: 外観

ダークモードスイッチラベルをカスタマイズするために使用できます。このラベルは、モバイルビューでのみ表示されます。

lightModeSwitchTitle

型: string
デフォルト: ライトテーマに切り替え

ホバー時に表示されるライトモードスイッチのタイトルをカスタマイズするために使用できます。

darkModeSwitchTitle

型: string
デフォルト: ダークテーマに切り替え

ホバー時に表示されるダークモードスイッチのタイトルをカスタマイズするために使用できます。

sidebarMenuLabel

型: string
デフォルト: メニュー

サイドバーメニューラベルをカスタマイズするために使用できます。このラベルは、モバイルビューでのみ表示されます。

returnToTopLabel

型: string
デフォルト: トップに戻る

トップに戻るボタンのラベルをカスタマイズするために使用できます。このラベルは、モバイルビューでのみ表示されます。

langMenuLabel

型: string
デフォルト: 言語を変更

ナビバーの言語切り替えボタンのaria-labelをカスタマイズするために使用できます。これは、i18nを使用している場合にのみ使用されます。

externalLinkIcon

型: boolean
デフォルト: false

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

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

i18nRouting ​

logo ​

siteTitle ​

nav ​

sidebar ​

aside ​

outline ​

socialLinks ​

footer ​

editLink ​

lastUpdated ​

algolia ​

carbonAds ​

docFooter ​

darkModeSwitchLabel ​

lightModeSwitchTitle ​

darkModeSwitchTitle ​

sidebarMenuLabel ​

returnToTopLabel ​

langMenuLabel ​

externalLinkIcon ​