|
|
|
@ -8,23 +8,23 @@ outline: deep
|
|
|
|
|
|
|
|
|
|
|
|
VitePress はファイルベースのルーティングを採用しており、生成される HTML はソースの Markdown ファイルのディレクトリ構造に対応します。例えば、次のディレクトリ構造があるとします：
|
|
|
|
VitePress はファイルベースのルーティングを採用しており、生成される HTML はソースの Markdown ファイルのディレクトリ構造に対応します。例えば、次のディレクトリ構造があるとします：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
├─ guide
|
|
|
|
├─ guide
|
|
|
|
│ ├─ getting-started.md
|
|
|
|
│ ├─ getting-started.md
|
|
|
|
│ └─ index.md
|
|
|
|
│ └─ index.md
|
|
|
|
├─ index.md
|
|
|
|
├─ index.md
|
|
|
|
└─ prologue.md
|
|
|
|
└─ prologue.md
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
生成される HTML は次のとおりです：
|
|
|
|
生成される HTML は次のとおりです：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
index.md --> /index.html （/ でアクセス可能）
|
|
|
|
index.md --> /index.html （/ でアクセス可能）
|
|
|
|
prologue.md --> /prologue.html
|
|
|
|
prologue.md --> /prologue.html
|
|
|
|
guide/index.md --> /guide/index.html （/guide/ でアクセス可能）
|
|
|
|
guide/index.md --> /guide/index.html （/guide/ でアクセス可能）
|
|
|
|
guide/getting-started.md --> /guide/getting-started.html
|
|
|
|
guide/getting-started.md --> /guide/getting-started.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
生成された HTML は、静的ファイルを配信できる任意の Web サーバーでホストできます。
|
|
|
|
生成された HTML は、静的ファイルを配信できる任意の Web サーバーでホストできます。
|
|
|
|
|
|
|
|
|
|
|
|
@ -38,25 +38,25 @@ VitePress プロジェクトのファイル構成には重要な概念が 2 つ
|
|
|
|
|
|
|
|
|
|
|
|
コマンドラインから `vitepress dev` や `vitepress build` を実行すると、VitePress は現在の作業ディレクトリをプロジェクトルートとして使用します。サブディレクトリをルートとして指定したい場合は、コマンドに相対パスを渡します。例えば、VitePress プロジェクトが `./docs` にある場合、`vitepress dev docs` を実行します：
|
|
|
|
コマンドラインから `vitepress dev` や `vitepress build` を実行すると、VitePress は現在の作業ディレクトリをプロジェクトルートとして使用します。サブディレクトリをルートとして指定したい場合は、コマンドに相対パスを渡します。例えば、VitePress プロジェクトが `./docs` にある場合、`vitepress dev docs` を実行します：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
├─ docs # プロジェクトルート
|
|
|
|
├─ docs # プロジェクトルート
|
|
|
|
│ ├─ .vitepress # 設定ディレクトリ
|
|
|
|
│ ├─ .vitepress # 設定ディレクトリ
|
|
|
|
│ ├─ getting-started.md
|
|
|
|
│ ├─ getting-started.md
|
|
|
|
│ └─ index.md
|
|
|
|
│ └─ index.md
|
|
|
|
└─ ...
|
|
|
|
└─ ...
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
```sh
|
|
|
|
vitepress dev docs
|
|
|
|
vitepress dev docs
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
これにより、ソースから HTML へのマッピングは次のようになります：
|
|
|
|
これにより、ソースから HTML へのマッピングは次のようになります：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
docs/index.md --> /index.html （/ でアクセス可能）
|
|
|
|
docs/index.md --> /index.html （/ でアクセス可能）
|
|
|
|
docs/getting-started.md --> /getting-started.html
|
|
|
|
docs/getting-started.md --> /getting-started.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### ソースディレクトリ {#source-directory}
|
|
|
|
### ソースディレクトリ {#source-directory}
|
|
|
|
|
|
|
|
|
|
|
|
@ -64,34 +64,34 @@ VitePress プロジェクトのファイル構成には重要な概念が 2 つ
|
|
|
|
|
|
|
|
|
|
|
|
`srcDir` はプロジェクトルートからの相対パスで解決されます。例えば `srcDir: 'src'` の場合、ファイル構成は次のようになります：
|
|
|
|
`srcDir` はプロジェクトルートからの相対パスで解決されます。例えば `srcDir: 'src'` の場合、ファイル構成は次のようになります：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
. # プロジェクトルート
|
|
|
|
. # プロジェクトルート
|
|
|
|
├─ .vitepress # 設定ディレクトリ
|
|
|
|
├─ .vitepress # 設定ディレクトリ
|
|
|
|
└─ src # ソースディレクトリ
|
|
|
|
└─ src # ソースディレクトリ
|
|
|
|
├─ getting-started.md
|
|
|
|
├─ getting-started.md
|
|
|
|
└─ index.md
|
|
|
|
└─ index.md
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
ソースから HTML へのマッピングは次のとおりです：
|
|
|
|
ソースから HTML へのマッピングは次のとおりです：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
src/index.md --> /index.html （/ でアクセス可能）
|
|
|
|
src/index.md --> /index.html （/ でアクセス可能）
|
|
|
|
src/getting-started.md --> /getting-started.html
|
|
|
|
src/getting-started.md --> /getting-started.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## ページ間リンク {#linking-between-pages}
|
|
|
|
## ページ間リンク {#linking-between-pages}
|
|
|
|
|
|
|
|
|
|
|
|
ページ間のリンクには、絶対パスと相対パスのどちらも使用できます。`.md` と `.html` の拡張子はどちらも機能しますが、最終的な URL を設定に応じて VitePress が生成できるよう、**拡張子は省略する** のがベストプラクティスです。
|
|
|
|
ページ間のリンクには、絶対パスと相対パスのどちらも使用できます。`.md` と `.html` の拡張子はどちらも機能しますが、最終的な URL を設定に応じて VitePress が生成できるよう、**拡張子は省略する** のがベストプラクティスです。
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
<!-- 良い例 -->
|
|
|
|
<!-- 良い例 -->
|
|
|
|
[はじめに](./getting-started)
|
|
|
|
[はじめに](./getting-started)
|
|
|
|
[はじめに](../guide/getting-started)
|
|
|
|
[はじめに](../guide/getting-started)
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 悪い例 -->
|
|
|
|
<!-- 悪い例 -->
|
|
|
|
[はじめに](./getting-started.md)
|
|
|
|
[はじめに](./getting-started.md)
|
|
|
|
[はじめに](./getting-started.html)
|
|
|
|
[はじめに](./getting-started.html)
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
画像などのアセットへのリンクについては、[アセットの取り扱い](./asset-handling) を参照してください。
|
|
|
|
画像などのアセットへのリンクについては、[アセットの取り扱い](./asset-handling) を参照してください。
|
|
|
|
|
|
|
|
|
|
|
|
@ -101,13 +101,13 @@ VitePress プロジェクトのファイル構成には重要な概念が 2 つ
|
|
|
|
|
|
|
|
|
|
|
|
**入力**
|
|
|
|
**入力**
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
[pure.html へのリンク](/pure.html){target="_self"}
|
|
|
|
[pure.html へのリンク](/pure.html){target="_self"}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**出力**
|
|
|
|
**出力**
|
|
|
|
|
|
|
|
|
|
|
|
[pure.html へのリンク](/pure.html){target="_self"}
|
|
|
|
[pure.html へのリンク](/pure.html){target="_self"}
|
|
|
|
|
|
|
|
|
|
|
|
::: tip 注意
|
|
|
|
::: tip 注意
|
|
|
|
|
|
|
|
|
|
|
|
@ -115,9 +115,9 @@ Markdown のリンクでは、`base` が自動的に URL の先頭に付与さ
|
|
|
|
|
|
|
|
|
|
|
|
あるいは、アンカータグの構文を直接使うこともできます：
|
|
|
|
あるいは、アンカータグの構文を直接使うこともできます：
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
<a href="/pure.html" target="_self">pure.html へのリンク</a>
|
|
|
|
<a href="/pure.html" target="_self">pure.html へのリンク</a>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
:::
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
## クリーン URL の生成 {#generating-clean-urls}
|
|
|
|
## クリーン URL の生成 {#generating-clean-urls}
|
|
|
|
@ -140,83 +140,83 @@ VitePress でクリーン URL を提供するには、サーバー側のサポ
|
|
|
|
|
|
|
|
|
|
|
|
もしサーバーをそのように設定できない場合は、次のようなディレクトリ構造に手動でする必要があります：
|
|
|
|
もしサーバーをそのように設定できない場合は、次のようなディレクトリ構造に手動でする必要があります：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
├─ getting-started
|
|
|
|
├─ getting-started
|
|
|
|
│ └─ index.md
|
|
|
|
│ └─ index.md
|
|
|
|
├─ installation
|
|
|
|
├─ installation
|
|
|
|
│ └─ index.md
|
|
|
|
│ └─ index.md
|
|
|
|
└─ index.md
|
|
|
|
└─ index.md
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## ルートのリライト {#route-rewrites}
|
|
|
|
## ルートのリライト {#route-rewrites}
|
|
|
|
|
|
|
|
|
|
|
|
ソースディレクトリ構造と生成ページのマッピングをカスタマイズできます。これは複雑なプロジェクト構成で有用です。例えば、複数パッケージを持つモノレポで、ソースファイルと並べてドキュメントを配置したい場合：
|
|
|
|
ソースディレクトリ構造と生成ページのマッピングをカスタマイズできます。これは複雑なプロジェクト構成で有用です。例えば、複数パッケージを持つモノレポで、ソースファイルと並べてドキュメントを配置したい場合：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
└─ packages
|
|
|
|
└─ packages
|
|
|
|
├─ pkg-a
|
|
|
|
├─ pkg-a
|
|
|
|
│ └─ src
|
|
|
|
│ └─ src
|
|
|
|
│ ├─ foo.md
|
|
|
|
│ ├─ foo.md
|
|
|
|
│ └─ index.md
|
|
|
|
│ └─ index.md
|
|
|
|
└─ pkg-b
|
|
|
|
└─ pkg-b
|
|
|
|
└─ src
|
|
|
|
└─ src
|
|
|
|
├─ bar.md
|
|
|
|
├─ bar.md
|
|
|
|
└─ index.md
|
|
|
|
└─ index.md
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
生成したいページが次のような場合：
|
|
|
|
生成したいページが次のような場合：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
packages/pkg-a/src/index.md --> /pkg-a/index.html
|
|
|
|
packages/pkg-a/src/index.md --> /pkg-a/index.html
|
|
|
|
packages/pkg-a/src/foo.md --> /pkg-a/foo.html
|
|
|
|
packages/pkg-a/src/foo.md --> /pkg-a/foo.html
|
|
|
|
packages/pkg-b/src/index.md --> /pkg-b/index.html
|
|
|
|
packages/pkg-b/src/index.md --> /pkg-b/index.html
|
|
|
|
packages/pkg-b/src/bar.md --> /pkg-b/bar.html
|
|
|
|
packages/pkg-b/src/bar.md --> /pkg-b/bar.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[`rewrites`](../reference/site-config#rewrites) オプションを次のように設定します：
|
|
|
|
[`rewrites`](../reference/site-config#rewrites) オプションを次のように設定します：
|
|
|
|
|
|
|
|
|
|
|
|
```ts [.vitepress/config.js]
|
|
|
|
```ts [.vitepress/config.js]
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
rewrites: {
|
|
|
|
rewrites: {
|
|
|
|
'packages/pkg-a/src/index.md': 'pkg-a/index.md',
|
|
|
|
'packages/pkg-a/src/index.md': 'pkg-a/index.md',
|
|
|
|
'packages/pkg-a/src/foo.md': 'pkg-a/foo.md',
|
|
|
|
'packages/pkg-a/src/foo.md': 'pkg-a/foo.md',
|
|
|
|
'packages/pkg-b/src/index.md': 'pkg-b/index.md',
|
|
|
|
'packages/pkg-b/src/index.md': 'pkg-b/index.md',
|
|
|
|
'packages/pkg-b/src/bar.md': 'pkg-b/bar.md'
|
|
|
|
'packages/pkg-b/src/bar.md': 'pkg-b/bar.md'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
`rewrites` は動的なルートパラメータにも対応しています。上記の例で多くのパッケージがある場合、同じ構造なら次のように簡略化できます：
|
|
|
|
`rewrites` は動的なルートパラメータにも対応しています。上記の例で多くのパッケージがある場合、同じ構造なら次のように簡略化できます：
|
|
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
```ts
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
rewrites: {
|
|
|
|
rewrites: {
|
|
|
|
'packages/:pkg/src/:slug*': ':pkg/:slug*'
|
|
|
|
'packages/:pkg/src/:slug*': ':pkg/:slug*'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
リライトのパスは `path-to-regexp` パッケージでコンパイルされます。高度な構文は[ドキュメント](https://github.com/pillarjs/path-to-regexp/tree/6.x#parameters)を参照してください。
|
|
|
|
リライトのパスは `path-to-regexp` パッケージでコンパイルされます。高度な構文は[ドキュメント](https://github.com/pillarjs/path-to-regexp/tree/6.x#parameters)を参照してください。
|
|
|
|
|
|
|
|
|
|
|
|
`rewrites` は、元のパスを受け取って新しいパスを返す **関数** として定義することもできます：
|
|
|
|
`rewrites` は、元のパスを受け取って新しいパスを返す **関数** として定義することもできます：
|
|
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
```ts
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
rewrites(id) {
|
|
|
|
rewrites(id) {
|
|
|
|
return id.replace(/^packages\/([^/]+)\/src\//, '$1/')
|
|
|
|
return id.replace(/^packages\/([^/]+)\/src\//, '$1/')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
::: warning リライト時の相対リンク
|
|
|
|
::: warning リライト時の相対リンク
|
|
|
|
|
|
|
|
|
|
|
|
リライトを有効にした場合、**相対リンクはリライト後のパスに基づいて** 記述してください。例えば、`packages/pkg-a/src/pkg-a-code.md` から `packages/pkg-b/src/pkg-b-code.md` への相対リンクを作るには、次のように書きます：
|
|
|
|
リライトを有効にした場合、**相対リンクはリライト後のパスに基づいて** 記述してください。例えば、`packages/pkg-a/src/pkg-a-code.md` から `packages/pkg-b/src/pkg-b-code.md` への相対リンクを作るには、次のように書きます：
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
[PKG B へのリンク](../pkg-b/pkg-b-code)
|
|
|
|
[PKG B へのリンク](../pkg-b/pkg-b-code)
|
|
|
|
```
|
|
|
|
```
|
|
|
|
:::
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
## 動的ルート {#dynamic-routes}
|
|
|
|
## 動的ルート {#dynamic-routes}
|
|
|
|
@ -227,37 +227,37 @@ VitePress でクリーン URL を提供するには、サーバー側のサポ
|
|
|
|
|
|
|
|
|
|
|
|
VitePress は静的サイトジェネレーターなので、生成可能なページパスはビルド時に確定している必要があります。したがって、動的ルートページには **パスローダーファイル** が **必須** です。`packages/[pkg].md` に対しては `packages/[pkg].paths.js`（`.ts` も可）が必要です：
|
|
|
|
VitePress は静的サイトジェネレーターなので、生成可能なページパスはビルド時に確定している必要があります。したがって、動的ルートページには **パスローダーファイル** が **必須** です。`packages/[pkg].md` に対しては `packages/[pkg].paths.js`（`.ts` も可）が必要です：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
└─ packages
|
|
|
|
└─ packages
|
|
|
|
├─ [pkg].md # ルートテンプレート
|
|
|
|
├─ [pkg].md # ルートテンプレート
|
|
|
|
└─ [pkg].paths.js # ルートのパスローダー
|
|
|
|
└─ [pkg].paths.js # ルートのパスローダー
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
パスローダーは、`paths` メソッドを持つオブジェクトをデフォルトエクスポートします。`paths` は `params` プロパティを持つオブジェクトの配列を返します。各オブジェクトが 1 ページに対応します。
|
|
|
|
パスローダーは、`paths` メソッドを持つオブジェクトをデフォルトエクスポートします。`paths` は `params` プロパティを持つオブジェクトの配列を返します。各オブジェクトが 1 ページに対応します。
|
|
|
|
|
|
|
|
|
|
|
|
例えば次の `paths` 配列を返すと：
|
|
|
|
例えば次の `paths` 配列を返すと：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
// packages/[pkg].paths.js
|
|
|
|
// packages/[pkg].paths.js
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
paths() {
|
|
|
|
paths() {
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
{ params: { pkg: 'foo' }},
|
|
|
|
{ params: { pkg: 'foo' } },
|
|
|
|
{ params: { pkg: 'bar' }}
|
|
|
|
{ params: { pkg: 'bar' } }
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
生成される HTML は次のようになります：
|
|
|
|
生成される HTML は次のようになります：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
└─ packages
|
|
|
|
└─ packages
|
|
|
|
├─ foo.html
|
|
|
|
├─ foo.html
|
|
|
|
└─ bar.html
|
|
|
|
└─ bar.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 複数パラメータ {#multiple-params}
|
|
|
|
### 複数パラメータ {#multiple-params}
|
|
|
|
|
|
|
|
|
|
|
|
@ -265,36 +265,36 @@ VitePress は静的サイトジェネレーターなので、生成可能なペ
|
|
|
|
|
|
|
|
|
|
|
|
**ファイル構成**
|
|
|
|
**ファイル構成**
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
└─ packages
|
|
|
|
└─ packages
|
|
|
|
├─ [pkg]-[version].md
|
|
|
|
├─ [pkg]-[version].md
|
|
|
|
└─ [pkg]-[version].paths.js
|
|
|
|
└─ [pkg]-[version].paths.js
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**パスローダー**
|
|
|
|
**パスローダー**
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
paths: () => [
|
|
|
|
paths: () => [
|
|
|
|
{ params: { pkg: 'foo', version: '1.0.0' }},
|
|
|
|
{ params: { pkg: 'foo', version: '1.0.0' } },
|
|
|
|
{ params: { pkg: 'foo', version: '2.0.0' }},
|
|
|
|
{ params: { pkg: 'foo', version: '2.0.0' } },
|
|
|
|
{ params: { pkg: 'bar', version: '1.0.0' }},
|
|
|
|
{ params: { pkg: 'bar', version: '1.0.0' } },
|
|
|
|
{ params: { pkg: 'bar', version: '2.0.0' }}
|
|
|
|
{ params: { pkg: 'bar', version: '2.0.0' } }
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**出力**
|
|
|
|
**出力**
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
.
|
|
|
|
.
|
|
|
|
└─ packages
|
|
|
|
└─ packages
|
|
|
|
├─ foo-1.0.0.html
|
|
|
|
├─ foo-1.0.0.html
|
|
|
|
├─ foo-2.0.0.html
|
|
|
|
├─ foo-2.0.0.html
|
|
|
|
├─ bar-1.0.0.html
|
|
|
|
├─ bar-1.0.0.html
|
|
|
|
└─ bar-2.0.0.html
|
|
|
|
└─ bar-2.0.0.html
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### パスを動的に生成する {#dynamically-generating-paths}
|
|
|
|
### パスを動的に生成する {#dynamically-generating-paths}
|
|
|
|
|
|
|
|
|
|
|
|
@ -302,60 +302,60 @@ VitePress は静的サイトジェネレーターなので、生成可能なペ
|
|
|
|
|
|
|
|
|
|
|
|
ローカルファイルから生成する例：
|
|
|
|
ローカルファイルから生成する例：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
import fs from 'fs'
|
|
|
|
import fs from 'fs'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
paths() {
|
|
|
|
paths() {
|
|
|
|
return fs
|
|
|
|
return fs
|
|
|
|
.readdirSync('packages')
|
|
|
|
.readdirSync('packages')
|
|
|
|
.map((pkg) => {
|
|
|
|
.map((pkg) => {
|
|
|
|
return { params: { pkg } }
|
|
|
|
return { params: { pkg } }
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
リモートデータから生成する例：
|
|
|
|
リモートデータから生成する例：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
async paths() {
|
|
|
|
async paths() {
|
|
|
|
const pkgs = await (await fetch('https://my-api.com/packages')).json()
|
|
|
|
const pkgs = await (await fetch('https://my-api.com/packages')).json()
|
|
|
|
|
|
|
|
|
|
|
|
return pkgs.map((pkg) => {
|
|
|
|
return pkgs.map((pkg) => {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
params: {
|
|
|
|
params: {
|
|
|
|
pkg: pkg.name,
|
|
|
|
pkg: pkg.name,
|
|
|
|
version: pkg.version
|
|
|
|
version: pkg.version
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### ページ内でパラメータにアクセスする {#accessing-params-in-page}
|
|
|
|
### ページ内でパラメータにアクセスする {#accessing-params-in-page}
|
|
|
|
|
|
|
|
|
|
|
|
各ページへ追加データを渡すために、パラメータを利用できます。Markdown のルートファイルでは、Vue 式内で `$params` グローバルプロパティから現在ページのパラメータにアクセスできます：
|
|
|
|
各ページへ追加データを渡すために、パラメータを利用できます。Markdown のルートファイルでは、Vue 式内で `$params` グローバルプロパティから現在ページのパラメータにアクセスできます：
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
- パッケージ名: {{ $params.pkg }}
|
|
|
|
- パッケージ名: {{ $params.pkg }}
|
|
|
|
- バージョン: {{ $params.version }}
|
|
|
|
- バージョン: {{ $params.version }}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[`useData`](../reference/runtime-api#usedata) ランタイム API からも、現在ページのパラメータにアクセスできます（Markdown と Vue コンポーネントの両方で利用可能）：
|
|
|
|
[`useData`](../reference/runtime-api#usedata) ランタイム API からも、現在ページのパラメータにアクセスできます（Markdown と Vue コンポーネントの両方で利用可能）：
|
|
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
```vue
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
import { useData } from 'vitepress'
|
|
|
|
import { useData } from 'vitepress'
|
|
|
|
|
|
|
|
|
|
|
|
// params は Vue の ref
|
|
|
|
// params は Vue の ref
|
|
|
|
const { params } = useData()
|
|
|
|
const { params } = useData()
|
|
|
|
|
|
|
|
|
|
|
|
console.log(params.value)
|
|
|
|
console.log(params.value)
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 生コンテンツのレンダリング {#rendering-raw-content}
|
|
|
|
### 生コンテンツのレンダリング {#rendering-raw-content}
|
|
|
|
|
|
|
|
|
|
|
|
@ -363,23 +363,23 @@ VitePress は静的サイトジェネレーターなので、生成可能なペ
|
|
|
|
|
|
|
|
|
|
|
|
代わりに、各パスオブジェクトの `content` プロパティでコンテンツを渡せます：
|
|
|
|
代わりに、各パスオブジェクトの `content` プロパティでコンテンツを渡せます：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
async paths() {
|
|
|
|
async paths() {
|
|
|
|
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
|
|
|
|
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
|
|
|
|
|
|
|
|
|
|
|
|
return posts.map((post) => {
|
|
|
|
return posts.map((post) => {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
params: { id: post.id },
|
|
|
|
params: { id: post.id },
|
|
|
|
content: post.content // 生の Markdown または HTML
|
|
|
|
content: post.content // 生の Markdown または HTML
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
そのうえで、Markdown ファイル内で次の特別な構文を使って、そのコンテンツを埋め込みます：
|
|
|
|
そのうえで、Markdown ファイル内で次の特別な構文を使って、そのコンテンツを埋め込みます：
|
|
|
|
|
|
|
|
|
|
|
|
```md
|
|
|
|
```md
|
|
|
|
<!-- @content -->
|
|
|
|
<!-- @content -->
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
Divyansh Singh
7 months ago