# デフォルトテーマの設定 {#default-theme-config} テーマ設定では、テーマのカスタマイズができます。設定ファイルの `themeConfig` オプションで定義します。 ```ts 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` サイトタイトルの直前に、ナビゲーションバーに表示されるロゴ。パス文字列、またはライト／ダークモードで異なるロゴを設定するオブジェクトを受け取ります。 ```ts export default { themeConfig: { logo: '/logo.svg' } } ``` ```ts type ThemeableImage = | string | { src: string; alt?: string } | { light: string; dark: string; alt?: string } ``` ## siteTitle - 型: `string | false` ナビゲーション内の既定サイトタイトル（アプリ設定の `title`）を置き換えます。`false` の場合、ナビのタイトルを非表示にします。ロゴ自体にサイト名が含まれている場合に便利です。 ```ts export default { themeConfig: { siteTitle: 'Hello World' } } ``` ## nav - 型: `NavItem` ナビゲーションメニューの設定。[デフォルトテーマ: ナビ](./default-theme-nav#navigation-links) を参照してください。 ```ts 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' } ] } ] } } ``` ```ts 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 - 型: `Sidebar` サイドバーメニューの設定。[デフォルトテーマ: サイドバー](./default-theme-sidebar) を参照してください。 ```ts export default { themeConfig: { sidebar: [ { text: 'Guide', items: [ { text: 'Introduction', link: '/introduction' }, { text: 'Getting Started', link: '/getting-started' }, ... ] } ] } } ``` ```ts 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](./frontmatter-config#aside) で上書き可能 `false` でサイドコンテナの描画を無効化。\ `true` で右側に表示。\ `left` で左側に表示。 すべてのビューポートで無効にしたい場合は、代わりに `outline: false` を使用してください。 ## outline - 型: `Outline | Outline['level'] | false` - レベルはページごとに [frontmatter](./frontmatter-config#outline) で上書き可能 `false` でアウトラインコンテナの描画を無効化。詳細は以下を参照： ```ts interface Outline { /** * アウトラインに表示する見出しレベル * 単一の数値なら、そのレベルのみ表示 * タプルなら最小レベルと最大レベル * `'deep'` は `[2, 6]` と同じ（`

` 〜 `

` を表示） * * @default 2 */ level?: number | [number, number] | 'deep' /** * アウトラインに表示するタイトル * * @default 'On this page' */ label?: string } ``` ## socialLinks - 型: `SocialLink[]` ナビゲーションにアイコン付きのソーシャルリンクを表示します。 ```ts export default { themeConfig: { socialLinks: [ // simple-icons (https://simpleicons.org/) の任意のアイコンを指定可能 { icon: 'github', link: 'https://github.com/vuejs/vitepress' }, { icon: 'twitter', link: '...' }, // SVG 文字列を渡してカスタムアイコンも可 { icon: { svg: 'Dribbble' }, link: '...', // アクセシビリティ向けにカスタムラベルも指定可（推奨） ariaLabel: 'cool link' } ] } } ``` ```ts interface SocialLink { icon: string | { svg: string } link: string ariaLabel?: string } ``` ## footer - 型: `Footer` - ページごとに [frontmatter](./frontmatter-config#footer) で上書き可能 フッター設定。メッセージや著作権表示を追加できますが、ページにサイドバーがある場合はデザイン上表示されません。 ```ts export default { themeConfig: { footer: { message: 'Released under the MIT License.', copyright: 'Copyright © 2019-present Evan You' } } } ``` ```ts export interface Footer { message?: string copyright?: string } ``` ## editLink - 型: `EditLink` - ページごとに [frontmatter](./frontmatter-config#editlink) で上書き可能 「このページを編集」リンクを表示します（GitHub/GitLab など）。詳細は [デフォルトテーマ: 編集リンク](./default-theme-edit-link) を参照。 ```ts export default { themeConfig: { editLink: { pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', text: 'Edit this page on GitHub' } } } ``` ```ts export interface EditLink { pattern: string text?: string } ``` ## lastUpdated - 型: `LastUpdatedOptions` 最終更新の文言と日付フォーマットをカスタマイズします。 ```ts export default { themeConfig: { lastUpdated: { text: 'Updated at', formatOptions: { dateStyle: 'full', timeStyle: 'medium' } } } } ``` ```ts export interface LastUpdatedOptions { /** * @default 'Last updated' */ text?: string /** * @default * { dateStyle: 'short', timeStyle: 'short' } */ formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean } } ``` ## algolia - 型: `AlgoliaSearch` [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch) によるサイト内検索の設定。[デフォルトテーマ: 検索](./default-theme-search) を参照。 ```ts export interface AlgoliaSearchOptions extends DocSearchProps { locales?: Record> } ``` 完全なオプションは[こちら](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts)。 ## carbonAds {#carbon-ads} - 型: `CarbonAdsOptions` [Carbon Ads](https://www.carbonads.net/) を表示します。 ```ts export default { themeConfig: { carbonAds: { code: 'your-carbon-code', placement: 'your-carbon-placement' } } } ``` ```ts export interface CarbonAdsOptions { code: string placement: string } ``` 詳細は [デフォルトテーマ: Carbon Ads](./default-theme-carbon-ads) を参照。 ## docFooter - 型: `DocFooter` 前／次リンクの上に表示される文言をカスタマイズします。英語以外のドキュメントで便利。前／次リンク自体をグローバルに無効化することも可能。ページごとに切り替えたい場合は [frontmatter](./default-theme-prev-next-links) を使用します。 ```ts export default { themeConfig: { docFooter: { prev: 'Pagina prior', next: 'Proxima pagina' } } } ``` ```ts 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](../guide/i18n) を使う場合に有効です。 ## skipToContentLabel - 型: `string` - 既定値: `Skip to content` コンテンツへスキップリンクのラベルをカスタマイズします。キーボード操作時に表示されます。 ## externalLinkIcon - 型: `boolean` - 既定値: `false` Markdown 内の外部リンクの横に外部リンクアイコンを表示するかどうか。 ## `useLayout` レイアウト関連のデータを返します。返り値の型は次のとおりです。 ```ts interface { isHome: ComputedRef sidebar: Readonly> sidebarGroups: ComputedRef hasSidebar: ComputedRef isSidebarEnabled: ComputedRef hasAside: ComputedRef leftAside: ComputedRef headers: Readonly> hasLocalNav: ComputedRef } ``` **例:** ```vue ```