diff --git a/docs/en/reference/default-theme-search.md b/docs/en/reference/default-theme-search.md index 8221bb4ad..d9e00a1d6 100644 --- a/docs/en/reference/default-theme-search.md +++ b/docs/en/reference/default-theme-search.md @@ -179,7 +179,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/en/reference/runtime-api.md b/docs/en/reference/runtime-api.md index d55165f50..ca1f39874 100644 --- a/docs/en/reference/runtime-api.md +++ b/docs/en/reference/runtime-api.md @@ -49,7 +49,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/es/reference/default-theme-search.md b/docs/es/reference/default-theme-search.md index 986a3a402..e2034ba27 100644 --- a/docs/es/reference/default-theme-search.md +++ b/docs/es/reference/default-theme-search.md @@ -174,7 +174,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/es/reference/runtime-api.md b/docs/es/reference/runtime-api.md index 1446df4c1..012e8d7c0 100644 --- a/docs/es/reference/runtime-api.md +++ b/docs/es/reference/runtime-api.md @@ -45,7 +45,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/fa/reference/default-theme-search.md b/docs/fa/reference/default-theme-search.md index 256c23788..dad447fad 100644 --- a/docs/fa/reference/default-theme-search.md +++ b/docs/fa/reference/default-theme-search.md @@ -174,7 +174,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/fa/reference/runtime-api.md b/docs/fa/reference/runtime-api.md index 67e076cdc..ba74ff18b 100644 --- a/docs/fa/reference/runtime-api.md +++ b/docs/fa/reference/runtime-api.md @@ -49,7 +49,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/ja/guide/cms.md b/docs/ja/guide/cms.md index 191312df2..9e3ceb06a 100644 --- a/docs/ja/guide/cms.md +++ b/docs/ja/guide/cms.md @@ -12,44 +12,44 @@ CMS ごとに動作が異なるため、ここでは各自の環境に合わせ 1. CMS が認証を必要とする場合は、API トークンを格納するための `.env` を作成し、次のように読み込みます。 - ```js - // posts/[id].paths.js - import { loadEnv } from 'vitepress' + ```js + // posts/[id].paths.js + import { loadEnv } from 'vitepress' - const env = loadEnv('', process.cwd()) - ``` + const env = loadEnv('', process.cwd()) + ``` 2. CMS から必要なデータを取得し、適切なパスデータの形式に整形します。 - ```js - export default { - async paths() { - // 必要に応じて各 CMS のクライアントライブラリを使用 - const data = await (await fetch('https://my-cms-api', { - headers: { - // 必要ならトークン - } - })).json() - - return data.map(entry => { - return { - params: { id: entry.id, /* title, authors, date など */ }, - content: entry.content - } - }) - } - } - ``` + ```js + export default { + async paths() { + // 必要に応じて各 CMS のクライアントライブラリを使用 + const data = await (await fetch('https://my-cms-api', { + headers: { + // 必要ならトークン + } + })).json() + + return data.map((entry) => { + return { + params: { id: entry.id, /* title, authors, date など */ }, + content: entry.content + } + }) + } + } + ``` 3. ページ内でコンテンツをレンダリングします。 - ```md - # {{ $params.title }} + ```md + # {{ $params.title }} - - {{ $params.date }} に {{ $params.author }} が作成 + - {{ $params.date }} に {{ $params.author }} が作成 - - ``` + + ``` ## 連携ガイドの募集 {#integration-guides} diff --git a/docs/ja/guide/custom-theme.md b/docs/ja/guide/custom-theme.md index 0095ca8a1..9f11bba04 100644 --- a/docs/ja/guide/custom-theme.md +++ b/docs/ja/guide/custom-theme.md @@ -23,43 +23,42 @@ VitePress のカスタムテーマは次のインターフェースを持つオ ```ts interface Theme { -/** - * すべてのページに適用されるルートレイアウトコンポーネント - * @required - */ -Layout: Component -/** - * Vue アプリインスタンスを拡張 - * @optional - */ -enhanceApp?: (ctx: EnhanceAppContext) => Awaitable -/** - * 別のテーマを拡張し、そのテーマの `enhanceApp` を先に実行 - * @optional - */ -extends?: Theme + /** + * すべてのページに適用されるルートレイアウトコンポーネント + * @required + */ + Layout: Component + /** + * Vue アプリインスタンスを拡張 + * @optional + */ + enhanceApp?: (ctx: EnhanceAppContext) => Awaitable + /** + * 別のテーマを拡張し、そのテーマの `enhanceApp` を先に実行 + * @optional + */ + extends?: Theme } interface EnhanceAppContext { -app: App // Vue アプリインスタンス -router: Router // VitePress のルーターインスタンス -siteData: Ref // サイト全体のメタデータ + app: App // Vue アプリインスタンス + router: Router // VitePress のルーターインスタンス + siteData: Ref // サイト全体のメタデータ } ``` テーマエントリファイルでは、このテーマをデフォルトエクスポートとして公開します。 ```js [.vitepress/theme/index.js] - // テーマエントリでは Vue ファイルを直接インポートできます // VitePress は @vitejs/plugin-vue をあらかじめ設定済みです import Layout from './Layout.vue' export default { -Layout, -enhanceApp({ app, router, siteData }) { - // ... -} + Layout, + enhanceApp({ app, router, siteData }) { + // ... + } } ``` @@ -73,10 +72,10 @@ enhanceApp({ app, router, siteData }) { ```vue [.vitepress/theme/Layout.vue] ``` @@ -100,11 +99,11 @@ const { page } = useData() [`useData()`](../reference/runtime-api#usedata) ヘルパーを使うと、条件によってレイアウトを切り替えるために必要なすべてのランタイムデータを取得できます。アクセスできるデータのひとつにフロントマターがあります。これを利用すると、ページごとにレイアウトを制御できます。例えば、ユーザーが特別なホームページレイアウトを使いたい場合は以下のように記述します。 - ```md +```md --- layout: home --- - ``` +``` テーマ側を次のように調整します。 @@ -164,7 +163,6 @@ npm パッケージとして配布する場合は、次の手順を踏みます ## カスタムテーマの利用 {#consuming-a-custom-theme} - 外部テーマを利用するには、カスタムテーマエントリからインポートして再エクスポートします。 ```js [.vitepress/theme/index.js] @@ -179,10 +177,10 @@ export default Theme import Theme from 'awesome-vitepress-theme' export default { -extends: Theme, -enhanceApp(ctx) { - // ... -} + extends: Theme, + enhanceApp(ctx) { + // ... + } } ``` @@ -192,8 +190,8 @@ enhanceApp(ctx) { import baseConfig from 'awesome-vitepress-theme/config' export default { -// 必要に応じてテーマの基本設定を拡張 -extends: baseConfig + // 必要に応じてテーマの基本設定を拡張 + extends: baseConfig } ``` @@ -205,9 +203,9 @@ import { defineConfigWithTheme } from 'vitepress' import type { ThemeConfig } from 'awesome-vitepress-theme' export default defineConfigWithTheme({ -extends: baseConfig, -themeConfig: { - // 型は `ThemeConfig` -} + extends: baseConfig, + themeConfig: { + // 型は `ThemeConfig` + } }) ``` diff --git a/docs/ja/guide/data-loading.md b/docs/ja/guide/data-loading.md index 469999d72..def21ad6a 100644 --- a/docs/ja/guide/data-loading.md +++ b/docs/ja/guide/data-loading.md @@ -10,12 +10,12 @@ VitePress には **データローダー (data loaders)** という機能があ ```js [example.data.js] export default { -load() { - return { - hello: 'world' + load() { + return { + hello: 'world' + } } } -} ``` ローダーモジュールは Node.js 上でのみ評価されるため、Node API や npm 依存関係を自由に利用できます。 @@ -179,7 +179,6 @@ interface ContentOptions { ## 型付きデータローダー {#typed-data-loaders} - TypeScript を使用する場合は、ローダーと `data` エクスポートを型付けできます。 ```ts @@ -202,7 +201,6 @@ export default defineLoader({ ## 設定情報の取得 {#configuration} - ローダー内で設定情報を取得するには次のようにします。 ```ts diff --git a/docs/ja/guide/deploy.md b/docs/ja/guide/deploy.md index b709c4d68..b3415105d 100644 --- a/docs/ja/guide/deploy.md +++ b/docs/ja/guide/deploy.md @@ -4,7 +4,6 @@ outline: deep # VitePress サイトをデプロイする {#deploy-your-vitepress-site} - 以下のガイドは、次の前提に基づいています。 - VitePress のサイトはプロジェクトの `docs` ディレクトリ内にある。 @@ -12,17 +11,16 @@ outline: deep - VitePress はプロジェクトのローカル依存としてインストールされており、`package.json` に次のスクリプトが設定されている。 ```json [package.json] - { - "scripts": { - "docs:build": "vitepress build docs", - "docs:preview": "vitepress preview docs" - } - } +{ + "scripts": { + "docs:build": "vitepress build docs", + "docs:preview": "vitepress preview docs" + } +} ``` ## ローカルでビルドしてテストする {#build-and-test-locally} - 1. 次のコマンドでドキュメントをビルドします。 ```sh @@ -35,30 +33,28 @@ outline: deep $ npm run docs:preview ``` - `preview` コマンドはローカルの静的 Web サーバーを起動し、出力ディレクトリ `.vitepress/dist` を `http://localhost:4173` で配信します。プロダクションへプッシュする前に見た目を確認できます。 + `preview` コマンドはローカルの静的 Web サーバーを起動し、出力ディレクトリ `.vitepress/dist` を `http://localhost:4173` で配信します。プロダクションへプッシュする前に見た目を確認できます。 3. `--port` 引数でサーバーのポートを設定できます。 ```json - { - "scripts": { - "docs:preview": "vitepress preview docs --port 8080" - } - } + { + "scripts": { + "docs:preview": "vitepress preview docs --port 8080" + } + } ``` - これで `docs:preview` は `http://localhost:8080` でサーバーを起動します。 + これで `docs:preview` は `http://localhost:8080` でサーバーを起動します。 ## 公開ベースパスの設定 {#setting-a-public-base-path} - デフォルトでは、サイトはドメインのルートパス(`/`)にデプロイされることを想定しています。サイトをサブパス、例:`https://mywebsite.com/blog/` で配信する場合は、VitePress の設定で [`base`](../reference/site-config#base) オプションを `'/blog/'` に設定してください。 **例:** GitHub(または GitLab)Pages に `user.github.io/repo/` としてデプロイするなら、`base` を `/repo/` に設定します。 ## HTTP キャッシュヘッダー {#http-cache-headers} - 本番サーバーの HTTP ヘッダーを制御できる場合は、`cache-control` ヘッダーを設定して、再訪時のパフォーマンスを向上させましょう。 本番ビルドでは静的アセット(JavaScript、CSS、`public` 以外のインポートアセット)にハッシュ付きファイル名が使用されます。ブラウザの開発者ツールのネットワークタブで本番プレビューを確認すると、`app.4f283b18.js` のようなファイルが見られます。 @@ -86,19 +82,19 @@ Cache-Control: max-age=31536000,immutable ::: details `vercel.json` による Vercel 設定例 ```json - { - "headers": [ - { - "source": "/assets/(.*)", - "headers": [ - { - "key": "Cache-Control", - "value": "max-age=31536000, immutable" - } - ] - } - ] - } +{ + "headers": [ + { + "source": "/assets/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "max-age=31536000, immutable" + } + ] + } + ] +} ``` 注:`vercel.json` は **リポジトリのルート** に配置してください。 @@ -109,7 +105,6 @@ Cache-Control: max-age=31536000,immutable ## プラットフォーム別ガイド {#platform-guides} - ### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render {#netlify-vercel-cloudflare-pages-aws-amplify-render} 新しいプロジェクトを作成し、ダッシュボードで次の設定に変更します。 @@ -127,77 +122,77 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ 1. プロジェクトの `.github/workflows` ディレクトリに `deploy.yml` を作成し、以下の内容を記述します。 ```yaml [.github/workflows/deploy.yml] - # Sample workflow for building and deploying a VitePress site to GitHub Pages - # - name: Deploy VitePress site to Pages - - on: - # Runs on pushes targeting the `main` branch. Change this to `master` if you're - # using the `master` branch as the default branch. - push: - branches: [main] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: - - # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages - permissions: - contents: read - pages: write - id-token: write - - # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. - # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. - concurrency: - group: pages - cancel-in-progress: false - - jobs: - # Build job - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v5 - with: - fetch-depth: 0 # Not needed if lastUpdated is not enabled - # - uses: pnpm/action-setup@v4 # Uncomment this block if you're using pnpm - # with: - # version: 9 # Not needed if you've set "packageManager" in package.json - # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun - - name: Setup Node - uses: actions/setup-node@v6 - with: - node-version: 24 - cache: npm # or pnpm / yarn - - name: Setup Pages - uses: actions/configure-pages@v4 - - name: Install dependencies - run: npm ci # or pnpm install / yarn install / bun install - - name: Build with VitePress - run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: docs/.vitepress/dist - - # Deployment job - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - needs: build - runs-on: ubuntu-latest - name: Deploy - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 + # Sample workflow for building and deploying a VitePress site to GitHub Pages + # + name: Deploy VitePress site to Pages + + on: + # Runs on pushes targeting the `main` branch. Change this to `master` if you're + # using the `master` branch as the default branch. + push: + branches: [main] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + + # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages + permissions: + contents: read + pages: write + id-token: write + + # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. + # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. + concurrency: + group: pages + cancel-in-progress: false + + jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v5 + with: + fetch-depth: 0 # Not needed if lastUpdated is not enabled + # - uses: pnpm/action-setup@v4 # Uncomment this block if you're using pnpm + # with: + # version: 9 # Not needed if you've set "packageManager" in package.json + # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun + - name: Setup Node + uses: actions/setup-node@v6 + with: + node-version: 24 + cache: npm # or pnpm / yarn + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Install dependencies + run: npm ci # or pnpm install / yarn install / bun install + - name: Build with VitePress + run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/.vitepress/dist + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 ``` - ::: warning - VitePress の `base` オプションが正しく設定されていることを確認してください。詳細は [公開ベースパスの設定](#公開ベースパスの設定) を参照してください。 - ::: + ::: warning + VitePress の `base` オプションが正しく設定されていることを確認してください。詳細は [公開ベースパスの設定](#公開ベースパスの設定) を参照してください。 + ::: 2. リポジトリ設定の「Pages」メニューで、「Build and deployment > Source」を「GitHub Actions」に設定します。 @@ -210,20 +205,20 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ 2. プロジェクトのルートに `.gitlab-ci.yml` を作成して、以下を追加します。これにより、コンテンツを更新するたびにサイトがビルド・デプロイされます。 ```yaml [.gitlab-ci.yml] - image: node:18 - pages: - cache: - paths: - - node_modules/ - script: - # - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled - - npm install - - npm run docs:build - artifacts: - paths: - - public - only: - - main + image: node:18 + pages: + cache: + paths: + - node_modules/ + script: + # - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled + - npm install + - npm run docs:build + artifacts: + paths: + - public + only: + - main ``` ### Azure Static Web Apps {#azure-static-web-apps} @@ -231,7 +226,6 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ 1. [公式ドキュメント](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration) に従います。 2. 設定ファイルで次の値を指定します(`api_location` のように不要なものは削除)。 - - **`app_location`**: `/` - **`output_location`**: `docs/.vitepress/dist` - **`app_build_command`**: `npm run docs:build` @@ -243,22 +237,22 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ `firebase.json`: ```json [firebase.json] - { - "hosting": { - "public": "docs/.vitepress/dist", - "ignore": [] - } - } + { + "hosting": { + "public": "docs/.vitepress/dist", + "ignore": [] + } + } ``` `.firebaserc`: ```json [.firebaserc] - { - "projects": { - "default": "" - } - } + { + "projects": { + "default": "" + } + } ``` 2. `npm run docs:build` の後、次のコマンドでデプロイします。 @@ -282,9 +276,9 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ 2. プロジェクトのルートに `static.json` を作成し、以下を記述します。 ```json [static.json] - { - "root": "docs/.vitepress/dist" - } + { + "root": "docs/.vitepress/dist" + } ``` ### Edgio {#edgio} diff --git a/docs/ja/guide/extending-default-theme.md b/docs/ja/guide/extending-default-theme.md index 6047ac916..fc5ce184f 100644 --- a/docs/ja/guide/extending-default-theme.md +++ b/docs/ja/guide/extending-default-theme.md @@ -70,7 +70,9 @@ export default DefaultTheme export default { transformHead({ assets }) { // 使うフォントに合わせて正規表現を調整 - const myFontFile = assets.find(file => /font-name\.[\w-]+\.woff2/.test(file)) + const myFontFile = assets.find((file) => + /font-name\.[\w-]+\.woff2/.test(file) + ) if (myFontFile) { return [ [ diff --git a/docs/ja/guide/frontmatter.md b/docs/ja/guide/frontmatter.md index 0c5ddcb58..46c52e85f 100644 --- a/docs/ja/guide/frontmatter.md +++ b/docs/ja/guide/frontmatter.md @@ -5,10 +5,10 @@ VitePress はすべての Markdown ファイルで YAML フロントマターをサポートしており、[gray-matter](https://github.com/jonschlinkert/gray-matter) で解析します。フロントマターは Markdown ファイルの先頭(` - - # Hello - ``` +```md + + +# Hello +``` ` - ``` +console.log(params.value) + +``` ### 生コンテンツのレンダリング {#rendering-raw-content} @@ -363,23 +363,23 @@ VitePress は静的サイトジェネレーターなので、生成可能なペ 代わりに、各パスオブジェクトの `content` プロパティでコンテンツを渡せます: - ```js - export default { - async paths() { - const posts = await (await fetch('https://my-cms.com/blog-posts')).json() - - return posts.map((post) => { - return { - params: { id: post.id }, - content: post.content // 生の Markdown または HTML - } - }) - } - } - ``` +```js +export default { + async paths() { + const posts = await (await fetch('https://my-cms.com/blog-posts')).json() + + return posts.map((post) => { + return { + params: { id: post.id }, + content: post.content // 生の Markdown または HTML + } + }) + } +} +``` そのうえで、Markdown ファイル内で次の特別な構文を使って、そのコンテンツを埋め込みます: - ```md - - ``` +```md + +``` diff --git a/docs/ja/guide/sitemap-generation.md b/docs/ja/guide/sitemap-generation.md index db44942c0..0d2e46457 100644 --- a/docs/ja/guide/sitemap-generation.md +++ b/docs/ja/guide/sitemap-generation.md @@ -2,13 +2,13 @@ VitePress には、サイト用の `sitemap.xml` を生成する機能が標準で用意されています。有効化するには、`.vitepress/config.js` に次を追加します。 - ```ts - export default { - sitemap: { - hostname: 'https://example.com' - } - } - ``` +```ts +export default { + sitemap: { + hostname: 'https://example.com' + } +} +``` `siteamp.xml` に `` タグを含めるには、[`lastUpdated`](../reference/default-theme-last-updated) オプションを有効にします。 @@ -16,43 +16,43 @@ VitePress には、サイト用の `sitemap.xml` を生成する機能が標準 サイトマップ生成は [`sitemap`](https://www.npmjs.com/package/sitemap) モジュールで行われます。設定ファイルの `sitemap` に、このモジュールがサポートする任意のオプションを渡せます。指定した値はそのまま `SitemapStream` コンストラクタに渡されます。詳しくは [`sitemap` のドキュメント](https://www.npmjs.com/package/sitemap#options-you-can-pass) を参照してください。例: - ```ts - export default { - sitemap: { - hostname: 'https://example.com', - lastmodDateOnly: false - } - } - ``` +```ts +export default { + sitemap: { + hostname: 'https://example.com', + lastmodDateOnly: false + } +} +``` 設定で `base` を使っている場合は、`hostname` にもそれを付与してください: - ```ts - export default { - base: '/my-site/', - sitemap: { - hostname: 'https://example.com/my-site/' - } - } - ``` +```ts +export default { + base: '/my-site/', + sitemap: { + hostname: 'https://example.com/my-site/' + } +} +``` ## `transformItems` フック {#transformitems-hook} `siteamp.xml` に書き出す直前にサイトマップ項目を加工するには、`sitemap.transformItems` フックを使います。このフックはサイトマップ項目の配列を受け取り、配列を返す必要があります。例: - ```ts - export default { - sitemap: { - hostname: 'https://example.com', - transformItems: (items) => { - // 既存項目の追加・変更・フィルタリングが可能 - items.push({ - url: '/extra-page', - changefreq: 'monthly', - priority: 0.8 - }) - return items - } - } - } - ``` +```ts +export default { + sitemap: { + hostname: 'https://example.com', + transformItems: (items) => { + // 既存項目の追加・変更・フィルタリングが可能 + items.push({ + url: '/extra-page', + changefreq: 'monthly', + priority: 0.8 + }) + return items + } + } +} +``` diff --git a/docs/ja/guide/ssr-compat.md b/docs/ja/guide/ssr-compat.md index d756d6d14..f72a2aade 100644 --- a/docs/ja/guide/ssr-compat.md +++ b/docs/ja/guide/ssr-compat.md @@ -12,11 +12,11 @@ VitePress は本番ビルド時に、Node.js 上で Vue のサーバーサイド SSR に適さないコンポーネント(例:カスタムディレクティブを含むなど)を使用・デモする場合は、組み込みの `` コンポーネントでラップできます。 - ```md - - - - ``` +```md + + + +``` ## インポート時に Browser API にアクセスするライブラリ {#libraries-that-access-browser-api-on-import} @@ -24,112 +24,112 @@ SSR に適さないコンポーネント(例:カスタムディレクティ ### mounted フック内でのインポート {#importing-in-mounted-hook} - ```vue - - ``` +onMounted(() => { + import('./lib-that-access-window-on-import').then((module) => { + // ここでコードを利用 + }) +}) + +``` ### 条件付きインポート {#conditional-import} [`import.meta.env.SSR`](https://vitejs.dev/guide/env-and-mode.html#env-variables) フラグ(Vite の環境変数の一部)を使って、依存関係を条件付きでインポートすることもできます。 - ```js - if (!import.meta.env.SSR) { - import('./lib-that-access-window-on-import').then((module) => { - // ここでコードを利用 - }) - } - ``` +```js +if (!import.meta.env.SSR) { + import('./lib-that-access-window-on-import').then((module) => { + // ここでコードを利用 + }) +} +``` [`Theme.enhanceApp`](./custom-theme#theme-interface) は非同期にできるため、**インポート時に Browser API に触れる Vue プラグイン** を条件付きでインポート・登録できます。 - ```js [.vitepress/theme/index.js] - /** @type {import('vitepress').Theme} */ - export default { - // ... - async enhanceApp({ app }) { - if (!import.meta.env.SSR) { - const plugin = await import('plugin-that-access-window-on-import') - app.use(plugin.default) - } - } - } - ``` +```js [.vitepress/theme/index.js] +/** @type {import('vitepress').Theme} */ +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin.default) + } + } +} +``` TypeScript を使う場合: - ```ts [.vitepress/theme/index.ts] - import type { Theme } from 'vitepress' +```ts [.vitepress/theme/index.ts] +import type { Theme } from 'vitepress' - export default { - // ... - async enhanceApp({ app }) { - if (!import.meta.env.SSR) { - const plugin = await import('plugin-that-access-window-on-import') - app.use(plugin.default) - } - } - } satisfies Theme - ``` +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin.default) + } + } +} satisfies Theme +``` ### `defineClientComponent` VitePress は、**インポート時に Browser API にアクセスする Vue コンポーネント** を読み込むためのユーティリティを提供します。 - ```vue - +const ClientComp = defineClientComponent(() => { + return import('component-that-access-window-on-import') +}) + - - ``` + +``` ターゲットコンポーネントに props / children / slots を渡すこともできます。 - ```vue - - - - ``` +```vue + + + +``` ターゲットコンポーネントは、ラッパーコンポーネントの mounted フックで初めてインポートされます。 diff --git a/docs/ja/guide/using-vue.md b/docs/ja/guide/using-vue.md index 65f2383e8..d71d245fc 100644 --- a/docs/ja/guide/using-vue.md +++ b/docs/ja/guide/using-vue.md @@ -16,9 +16,9 @@ Vue の使用は SSR 互換である必要があります。詳細と一般的 **入力** - ```md - {{ 1 + 1 }} - ``` +```md +{{ 1 + 1 }} +``` **出力** @@ -30,9 +30,9 @@ Vue の使用は SSR 互換である必要があります。詳細と一般的 **入力** - ```html - {{ i }} - ``` +```html +{{ i }} +``` **出力** @@ -42,30 +42,30 @@ Vue の使用は SSR 互換である必要があります。詳細と一般的 Markdown ファイルのルート直下に置く ` +const count = ref(0) + - ## Markdown コンテンツ +## Markdown コンテンツ - 現在の値: {{ count }} +現在の値: {{ count }} - + - - ``` + +``` ::: warning Markdown での ` - ``` +```vue + +``` ## Teleport の利用 {#using-teleports} @@ -231,15 +231,15 @@ VitePress は CSS プリプロセッサ(`.scss`、`.sass`、`.less`、`.styl` <<< @/components/ModalDemo.vue ::: - ```md - - -
- // ... -
-
-
- ``` +```md + + +
+ // ... +
+
+
+``` +const { hasSidebar } = useLayout() + - - ``` + +``` diff --git a/docs/ja/reference/default-theme-edit-link.md b/docs/ja/reference/default-theme-edit-link.md index 035739442..a5b40dbd6 100644 --- a/docs/ja/reference/default-theme-edit-link.md +++ b/docs/ja/reference/default-theme-edit-link.md @@ -4,57 +4,57 @@ 編集リンクは、GitHub や GitLab などの Git 管理サービスでそのページを編集できるリンクを表示します。有効化するには、設定に `themeConfig.editLink` オプションを追加します。 - ```js - export default { - themeConfig: { - editLink: { - pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path' - } - } - } - ``` +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path' + } + } +} +``` `pattern` オプションはリンクの URL 構造を定義します。`:path` はページパスに置き換えられます。 また、引数に [`PageData`](./runtime-api#usedata) を受け取り、URL 文字列を返す純粋関数を指定することもできます。 - ```js - export default { - themeConfig: { - editLink: { - pattern: ({ filePath }) => { - if (filePath.startsWith('packages/')) { - return `https://github.com/acme/monorepo/edit/main/${filePath}` - } else { - return `https://github.com/acme/monorepo/edit/main/docs/${filePath}` - } - } - } - } - } - ``` +```js +export default { + themeConfig: { + editLink: { + pattern: ({ filePath }) => { + if (filePath.startsWith('packages/')) { + return `https://github.com/acme/monorepo/edit/main/${filePath}` + } else { + return `https://github.com/acme/monorepo/edit/main/docs/${filePath}` + } + } + } + } +} +``` この関数はブラウザでシリアライズされ実行されるため、副作用を持たず、スコープ外のものへアクセスしないでください。 既定では、ドキュメント下部に「Edit this page」というリンクテキストが表示されます。`text` オプションでこの文言をカスタマイズできます。 - ```js - export default { - themeConfig: { - editLink: { - pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', - text: 'GitHub でこのページを編集' - } - } - } - ``` +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + text: 'GitHub でこのページを編集' + } + } +} +``` ## フロントマターでの設定 {#frontmatter-config} ページごとに無効化するには、フロントマターで `editLink` オプションを使用します。 - ```yaml - --- - editLink: false - --- - ``` +```yaml +--- +editLink: false +--- +``` diff --git a/docs/ja/reference/default-theme-home-page.md b/docs/ja/reference/default-theme-home-page.md index e472a4785..011456f81 100644 --- a/docs/ja/reference/default-theme-home-page.md +++ b/docs/ja/reference/default-theme-home-page.md @@ -186,3 +186,4 @@ hero: npm init npx vitepress init ``` +```` diff --git a/docs/ja/reference/default-theme-search.md b/docs/ja/reference/default-theme-search.md index 70837c10a..f77603611 100644 --- a/docs/ja/reference/default-theme-search.md +++ b/docs/ja/reference/default-theme-search.md @@ -179,7 +179,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/ja/reference/runtime-api.md b/docs/ja/reference/runtime-api.md index b73b8503f..afcad68d8 100644 --- a/docs/ja/reference/runtime-api.md +++ b/docs/ja/reference/runtime-api.md @@ -49,7 +49,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/ko/reference/default-theme-search.md b/docs/ko/reference/default-theme-search.md index 739d2dcc3..0ee68e365 100644 --- a/docs/ko/reference/default-theme-search.md +++ b/docs/ko/reference/default-theme-search.md @@ -174,7 +174,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/ko/reference/runtime-api.md b/docs/ko/reference/runtime-api.md index e9a8e5307..ee7a4ba3c 100644 --- a/docs/ko/reference/runtime-api.md +++ b/docs/ko/reference/runtime-api.md @@ -49,7 +49,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/pt/reference/default-theme-search.md b/docs/pt/reference/default-theme-search.md index b83569c91..44c5b8acc 100644 --- a/docs/pt/reference/default-theme-search.md +++ b/docs/pt/reference/default-theme-search.md @@ -174,7 +174,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/pt/reference/runtime-api.md b/docs/pt/reference/runtime-api.md index ed6476ac4..559e2fed5 100644 --- a/docs/pt/reference/runtime-api.md +++ b/docs/pt/reference/runtime-api.md @@ -45,7 +45,7 @@ interface PageData { titleTemplate?: string | boolean description: string relativePath: string - filePath: string, + filePath: string headers: Header[] frontmatter: Record params?: Record diff --git a/docs/ru/reference/default-theme-search.md b/docs/ru/reference/default-theme-search.md index c4ea2b1cd..16bad58d3 100644 --- a/docs/ru/reference/default-theme-search.md +++ b/docs/ru/reference/default-theme-search.md @@ -179,7 +179,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } } diff --git a/docs/zh/reference/default-theme-search.md b/docs/zh/reference/default-theme-search.md index 89d8cb894..a95c907a6 100644 --- a/docs/zh/reference/default-theme-search.md +++ b/docs/zh/reference/default-theme-search.md @@ -174,7 +174,7 @@ export default defineConfig({ async _render(src, env, md) { const html = await md.renderAsync(src, env) if (env.frontmatter?.title) - return await md.renderAsync(`# ${env.frontmatter.title}`) + html + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html return html } }