@@ -23,43 +23,42 @@ VitePress のカスタムテーマは次のインターフェースを持つオ
2323
2424``` ts
2525interface Theme {
26- /**
27- * すべてのページに適用されるルートレイアウトコンポーネント
28- * @required
29- */
30- Layout: Component
31- /**
32- * Vue アプリインスタンスを拡張
33- * @optional
34- */
35- enhanceApp? : (ctx : EnhanceAppContext ) => Awaitable <void >
36- /**
37- * 別のテーマを拡張し、そのテーマの `enhanceApp` を先に実行
38- * @optional
39- */
40- extends? : Theme
26+ /**
27+ * すべてのページに適用されるルートレイアウトコンポーネント
28+ * @required
29+ */
30+ Layout: Component
31+ /**
32+ * Vue アプリインスタンスを拡張
33+ * @optional
34+ */
35+ enhanceApp? : (ctx : EnhanceAppContext ) => Awaitable <void >
36+ /**
37+ * 別のテーマを拡張し、そのテーマの `enhanceApp` を先に実行
38+ * @optional
39+ */
40+ extends? : Theme
4141}
4242
4343interface EnhanceAppContext {
44- app: App // Vue アプリインスタンス
45- router: Router // VitePress のルーターインスタンス
46- siteData: Ref <SiteData > // サイト全体のメタデータ
44+ app: App // Vue アプリインスタンス
45+ router: Router // VitePress のルーターインスタンス
46+ siteData: Ref <SiteData > // サイト全体のメタデータ
4747}
4848```
4949
5050テーマエントリファイルでは、このテーマをデフォルトエクスポートとして公開します。
5151
5252``` js [.vitepress/theme/index.js]
53-
5453// テーマエントリでは Vue ファイルを直接インポートできます
5554// VitePress は @vitejs/plugin-vue をあらかじめ設定済みです
5655import Layout from ' ./Layout.vue'
5756
5857export default {
59- Layout,
60- enhanceApp ({ app, router, siteData }) {
61- // ...
62- }
58+ Layout,
59+ enhanceApp ({ app, router, siteData }) {
60+ // ...
61+ }
6362}
6463```
6564
@@ -73,10 +72,10 @@ enhanceApp({ app, router, siteData }) {
7372
7473``` vue [.vitepress/theme/Layout.vue]
7574<template>
76- <h1>Custom Layout!</h1>
75+ <h1>Custom Layout!</h1>
7776
78- <!-- この部分に markdown コンテンツが描画されます -->
79- <Content />
77+ <!-- この部分に markdown コンテンツが描画されます -->
78+ <Content />
8079</template>
8180```
8281
@@ -100,11 +99,11 @@ const { page } = useData()
10099
101100[ ` useData() ` ] ( ../reference/runtime-api#usedata ) ヘルパーを使うと、条件によってレイアウトを切り替えるために必要なすべてのランタイムデータを取得できます。アクセスできるデータのひとつにフロントマターがあります。これを利用すると、ページごとにレイアウトを制御できます。例えば、ユーザーが特別なホームページレイアウトを使いたい場合は以下のように記述します。
102101
103- ``` md
102+ ``` md
104103---
105104layout: home
106105---
107- ```
106+ ```
108107
109108テーマ側を次のように調整します。
110109
@@ -164,7 +163,6 @@ npm パッケージとして配布する場合は、次の手順を踏みます
164163
165164## カスタムテーマの利用 {#consuming-a-custom-theme}
166165
167-
168166外部テーマを利用するには、カスタムテーマエントリからインポートして再エクスポートします。
169167
170168``` js [.vitepress/theme/index.js]
@@ -179,10 +177,10 @@ export default Theme
179177import Theme from ' awesome-vitepress-theme'
180178
181179export default {
182- extends: Theme,
183- enhanceApp (ctx ) {
184- // ...
185- }
180+ extends: Theme,
181+ enhanceApp (ctx ) {
182+ // ...
183+ }
186184}
187185```
188186
@@ -192,8 +190,8 @@ enhanceApp(ctx) {
192190import baseConfig from ' awesome-vitepress-theme/config'
193191
194192export default {
195- // 必要に応じてテーマの基本設定を拡張
196- extends: baseConfig
193+ // 必要に応じてテーマの基本設定を拡張
194+ extends: baseConfig
197195}
198196```
199197
@@ -205,9 +203,9 @@ import { defineConfigWithTheme } from 'vitepress'
205203import type { ThemeConfig } from ' awesome-vitepress-theme'
206204
207205export default defineConfigWithTheme <ThemeConfig >({
208- extends: baseConfig ,
209- themeConfig: {
210- // 型は `ThemeConfig`
211- }
206+ extends: baseConfig ,
207+ themeConfig: {
208+ // 型は `ThemeConfig`
209+ }
212210})
213211```
0 commit comments