From 24e1ed7410ab44495c2cf94036ce5c7989e16b08 Mon Sep 17 00:00:00 2001 From: Kenzo-Wada Date: Fri, 10 Oct 2025 01:47:09 +0900 Subject: [PATCH] chore(i18n): added title tags to guide docs --- docs/ja/guide/asset-handling.md | 8 +-- docs/ja/guide/cms.md | 6 +-- docs/ja/guide/custom-theme.md | 13 ++--- docs/ja/guide/data-loading.md | 14 +++--- docs/ja/guide/deploy.md | 39 +++++++------- docs/ja/guide/extending-default-theme.md | 16 +++--- docs/ja/guide/frontmatter.md | 8 +-- docs/ja/guide/getting-started.md | 20 ++++---- docs/ja/guide/i18n.md | 6 +-- docs/ja/guide/markdown.md | 56 ++++++++++----------- docs/ja/guide/migration-from-vitepress-0.md | 23 --------- docs/ja/guide/migration-from-vuepress.md | 33 ------------ docs/ja/guide/mpa-mode.md | 2 +- docs/ja/guide/routing.md | 30 +++++------ docs/ja/guide/sitemap-generation.md | 6 +-- docs/ja/guide/ssr-compat.md | 10 ++-- docs/ja/guide/using-vue.md | 28 +++++------ docs/ja/guide/what-is-vitepress.md | 10 ++-- 18 files changed, 140 insertions(+), 188 deletions(-) delete mode 100644 docs/ja/guide/migration-from-vitepress-0.md delete mode 100644 docs/ja/guide/migration-from-vuepress.md diff --git a/docs/ja/guide/asset-handling.md b/docs/ja/guide/asset-handling.md index 38e9b3ea..694318c4 100644 --- a/docs/ja/guide/asset-handling.md +++ b/docs/ja/guide/asset-handling.md @@ -1,6 +1,6 @@ -# アセットの取り扱い +# アセットの取り扱い {#asset-handling} -## 静的アセットの参照 +## 静的アセットの参照 {#referencing-static-assets} すべての Markdown ファイルは Vue コンポーネントにコンパイルされ、[Vite](https://vitejs.dev/guide/assets.html) によって処理されます。Markdown 内では、相対 URL を使ってアセットを参照することが **推奨されます**。 @@ -20,7 +20,7 @@ Markdown ファイル内のリンクで参照された PDF やその他のドキ すべての **静的な** パス参照（絶対パスを含む）は、作業ディレクトリの構造を基準にする必要があります。 -## Public ディレクトリ +## Public ディレクトリ {#the-public-directory} Markdown やテーマコンポーネントで直接参照されない静的アセットを提供する必要がある場合や、特定のファイルをオリジナルのファイル名のまま提供したい場合があります。 例えば `robots.txt`、favicon、PWA 用アイコンなどです。 @@ -31,7 +31,7 @@ Markdown やテーマコンポーネントで直接参照されない静的ア なお、`public` 内のファイルはルート絶対パスで参照する必要があります。例えば `public/icon.png` は常に `/icon.png` として参照しなければなりません。 -## ベース URL +## ベース URL {#base-url} サイトをルート以外の URL にデプロイする場合、`.vitepress/config.js` で `base` オプションを設定する必要があります。 例えば `https://foo.github.io/bar/` にデプロイする場合、`base` は `'/bar/'` と設定します（必ずスラッシュで開始・終了する必要があります）。 diff --git a/docs/ja/guide/cms.md b/docs/ja/guide/cms.md index f1316944..191312df 100644 --- a/docs/ja/guide/cms.md +++ b/docs/ja/guide/cms.md @@ -2,9 +2,9 @@ outline: deep --- -# CMS との接続 +# CMS との接続 {#connecting-to-a-cms} -## 全体のワークフロー +## 全体のワークフロー {#general-workflow} VitePress を CMS と接続する際は、主に [動的ルーティング](./routing#dynamic-routes) を中心に考えることになります。先にその仕組みを理解しておいてください。 @@ -51,6 +51,6 @@ CMS ごとに動作が異なるため、ここでは各自の環境に合わせ ``` -## 連携ガイドの募集 +## 連携ガイドの募集 {#integration-guides} 特定の CMS と VitePress の連携ガイドを書かれた方は、下部の「Edit this page」リンクからぜひ投稿してください！ diff --git a/docs/ja/guide/custom-theme.md b/docs/ja/guide/custom-theme.md index eec1a1e3..0095ca8a 100644 --- a/docs/ja/guide/custom-theme.md +++ b/docs/ja/guide/custom-theme.md @@ -1,6 +1,6 @@ -# カスタムテーマを使う +# カスタムテーマを使う {#using-a-custom-theme} -## テーマの解決 +## テーマの解決 {#theme-resolving} カスタムテーマを有効にするには、`.vitepress/theme/index.js` または `.vitepress/theme/index.ts` ファイル（「テーマエントリファイル」）を作成します。 @@ -17,7 +17,7 @@ VitePress はテーマエントリファイルを検出すると、常にデフォルトテーマではなくカスタムテーマを使用します。ただし、[デフォルトテーマを拡張](./extending-default-theme) してその上で高度なカスタマイズを行うことも可能です。 -## テーマインターフェース +## テーマインターフェース {#theme-interface} VitePress のカスタムテーマは次のインターフェースを持つオブジェクトとして定義されます。 @@ -67,7 +67,7 @@ enhanceApp({ app, router, siteData }) { レイアウトコンポーネントの内部は通常の Vite + Vue 3 アプリケーションと同じように動作します。なお、テーマは [SSR 対応](./ssr-compat) である必要があります。 -## レイアウトの構築 +## レイアウトの構築 {#building-a-layout} 最も基本的なレイアウトコンポーネントには [``](../reference/runtime-api#content) コンポーネントを含める必要があります。 @@ -150,7 +150,7 @@ const { page, frontmatter } = useData() 利用可能なすべての機能は [Runtime API リファレンス](../reference/runtime-api) を参照してください。さらに [ビルド時データ読み込み](./data-loading) を活用すれば、ブログ記事一覧ページのようなデータ駆動型のレイアウトも実現できます。 -## カスタムテーマの配布 +## カスタムテーマの配布 {#distributing-a-custom-theme} 最も簡単な配布方法は [GitHub のテンプレートリポジトリ](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) として提供することです。 @@ -162,7 +162,8 @@ npm パッケージとして配布する場合は、次の手順を踏みます 4. 設定ファイルやフロントマターを通じて、テーマ設定オプションを文書化する。 5. テーマの利用方法を明確に説明する（以下を参照）。 -## カスタムテーマの利用 +## カスタムテーマの利用 {#consuming-a-custom-theme} + 外部テーマを利用するには、カスタムテーマエントリからインポートして再エクスポートします。 diff --git a/docs/ja/guide/data-loading.md b/docs/ja/guide/data-loading.md index 97107869..469999d7 100644 --- a/docs/ja/guide/data-loading.md +++ b/docs/ja/guide/data-loading.md @@ -1,10 +1,10 @@ -# ビルド時のデータの読み込み +# ビルド時のデータの読み込み {#build-time-data-loading} VitePress には **データローダー (data loaders)** という機能があり、任意のデータを読み込み、ページやコンポーネントからインポートすることができます。データの読み込みは **ビルド時のみ** 実行され、最終的な JavaScript バンドルには JSON としてシリアライズされたデータが含まれます。 データローダーはリモートデータの取得や、ローカルファイルに基づいたメタデータの生成に利用できます。たとえば、ローカルの API ページをすべて解析して API エントリのインデックスを自動生成するといったことが可能です。 -## 基本的な使い方 +## 基本的な使い方 {#basic-usage} データローダーファイルは `.data.js` または `.data.ts` で終わる必要があります。ファイルは `load()` メソッドを持つオブジェクトをデフォルトエクスポートします。 @@ -51,7 +51,7 @@ export default { } ``` -## ローカルファイルからのデータ +## ローカルファイルからのデータ {#data-from-local-files} ローカルファイルに基づいたデータを生成する必要がある場合は、データローダー内で `watch` オプションを使用し、ファイルの変更をホットリロードに反映させることが推奨されます。 @@ -123,7 +123,7 @@ import { data as posts } from './posts.data.js' ``` -### オプション +### オプション {#options} デフォルトデータが要件に合わない場合は、オプションで変換処理を追加できます。 @@ -177,7 +177,8 @@ interface ContentOptions { } ``` -## 型付きデータローダー +## 型付きデータローダー {#typed-data-loaders} + TypeScript を使用する場合は、ローダーと `data` エクスポートを型付けできます。 @@ -199,7 +200,8 @@ export default defineLoader({ }) ``` -## 設定情報の取得 +## 設定情報の取得 {#configuration} + ローダー内で設定情報を取得するには次のようにします。 diff --git a/docs/ja/guide/deploy.md b/docs/ja/guide/deploy.md index 95cc030a..38029e9c 100644 --- a/docs/ja/guide/deploy.md +++ b/docs/ja/guide/deploy.md @@ -2,7 +2,8 @@ outline: deep --- -# VitePress サイトをデプロイする +# VitePress サイトをデプロイする {#deploy-your-vitepress-site} + 以下のガイドは、次の前提に基づいています。 @@ -19,7 +20,8 @@ outline: deep } ``` -## ローカルでビルドしてテストする +## ローカルでビルドしてテストする {#build-and-test-locally} + 1. 次のコマンドでドキュメントをビルドします。 @@ -47,13 +49,15 @@ outline: deep これで `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 キャッシュヘッダー {#http-cache-headers} + 本番サーバーの HTTP ヘッダーを制御できる場合は、`cache-control` ヘッダーを設定して、再訪時のパフォーマンスを向上させましょう。 @@ -103,9 +107,10 @@ Cache-Control: max-age=31536000,immutable ::: -## プラットフォーム別ガイド +## プラットフォーム別ガイド {#platform-guides} + -### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render +### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render {#netlify-vercel-cloudflare-pages-aws-amplify-render} 新しいプロジェクトを作成し、ダッシュボードで次の設定に変更します。 @@ -117,7 +122,7 @@ Cache-Control: max-age=31536000,immutable HTML の _Auto Minify_ のようなオプションを有効にしないでください。Vue にとって意味のあるコメントが出力から削除され、削除されるとハイドレーションの不整合エラーが発生する可能性があります。 ::: -### GitHub Pages +### GitHub Pages {#github-pages} 1. プロジェクトの `.github/workflows` ディレクトリに `deploy.yml` を作成し、以下の内容を記述します。 @@ -198,7 +203,7 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ 3. 変更を `main` ブランチにプッシュし、GitHub Actions の完了を待ちます。設定に応じて、サイトは `https://.github.io/[repository]/` または `https:///` にデプロイされます。以後、`main` へのプッシュごとに自動デプロイされます。 -### GitLab Pages +### GitLab Pages {#gitlab-pages} 1. VitePress の設定で `outDir` を `../public` に設定します。`https://.gitlab.io//` にデプロイする場合は `base` を `'//'` に設定します。カスタムドメイン、ユーザー／グループページ、または GitLab の「Use unique domain」を有効にしている場合は `base` は不要です。 @@ -221,7 +226,7 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ - main ``` -### Azure Static Web Apps +### Azure Static Web Apps {#azure-static-web-apps} 1. [公式ドキュメント](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration) に従います。 @@ -231,7 +236,7 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ - **`output_location`**: `docs/.vitepress/dist` - **`app_build_command`**: `npm run docs:build` -### Firebase +### Firebase {#firebase} 1. プロジェクトのルートに `firebase.json` と `.firebaserc` を作成します。 @@ -262,7 +267,7 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ firebase deploy ``` -### Surge +### Surge {#surge} 1. `npm run docs:build` の後、次のコマンドでデプロイします。 @@ -270,7 +275,7 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ npx surge docs/.vitepress/dist ``` -### Heroku +### Heroku {#heroku} 1. [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static) のドキュメントとガイドに従います。 @@ -282,23 +287,23 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ } ``` -### Edgio +### Edgio {#edgio} [Creating and Deploying a VitePress App To Edgio](https://docs.edg.io/guides/vitepress) を参照してください。 -### Kinsta Static Site Hosting +### Kinsta Static Site Hosting {#kinsta-static-site-hosting} [VitePress](https://kinsta.com/static-site-hosting/) を [こちらの手順](https://kinsta.com/docs/vitepress-static-site-example/) に従ってデプロイできます。 -### Stormkit +### Stormkit {#stormkit} [VitePress プロジェクトを Stormkit にデプロイ](https://stormkit.io/blog/how-to-deploy-vitepress) する手順を参照してください。 -### CloudRay +### CloudRay {#cloudray} [CloudRay](https://cloudray.io/) でのデプロイ方法は [こちらの手順](https://cloudray.io/articles/how-to-deploy-vitepress-site) を参照してください。 -### Nginx +### Nginx {#nginx} 以下は Nginx サーバーブロックの設定例です。一般的なテキスト系アセットの gzip 圧縮、VitePress サイトの静的ファイル配信における適切なキャッシュヘッダー、そして `cleanUrls: true` のハンドリングを含みます。 diff --git a/docs/ja/guide/extending-default-theme.md b/docs/ja/guide/extending-default-theme.md index 8381bb11..6047ac91 100644 --- a/docs/ja/guide/extending-default-theme.md +++ b/docs/ja/guide/extending-default-theme.md @@ -2,7 +2,7 @@ outline: deep --- -# デフォルトテーマの拡張 +# デフォルトテーマの拡張 {#extending-the-default-theme} VitePress のデフォルトテーマはドキュメント向けに最適化されており、カスタマイズ可能です。利用できるオプションの一覧は [デフォルトテーマの概要](../reference/default-theme-config) を参照してください。 @@ -18,7 +18,7 @@ VitePress のデフォルトテーマはドキュメント向けに最適化さ 先に [カスタムテーマの使用](./custom-theme) を読み、カスタムテーマの仕組みを理解してから進めてください。 ::: -## CSS のカスタマイズ +## CSS のカスタマイズ {#customizing-css} デフォルトテーマの CSS は、ルートレベルの CSS 変数をオーバーライドすることでカスタマイズできます。 @@ -39,7 +39,7 @@ export default DefaultTheme 上書き可能な [デフォルトテーマの CSS 変数](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) を参照してください。 -## フォントを変更する +## フォントを変更する {#using-different-fonts} VitePress はデフォルトフォントとして [Inter](https://rsms.me/inter/) を使用し、ビルド出力にフォントを含めます。プロダクションでは自動でプリロードもされます。しかし、別のメインフォントを使いたい場合には望ましくないことがあります。 @@ -89,7 +89,7 @@ export default { } ``` -## グローバルコンポーネントの登録 +## グローバルコンポーネントの登録 {#registering-global-components} ```js [.vitepress/theme/index.js] import DefaultTheme from 'vitepress/theme' @@ -121,7 +121,7 @@ export default { Vite を使っているため、Vite の [glob import 機能](https://vitejs.dev/guide/features.html#glob-import) を利用してディレクトリ内のコンポーネントを自動登録することもできます。 -## レイアウトスロット +## レイアウトスロット {#layout-slots} デフォルトテーマの `` コンポーネントには、ページ内の特定の位置にコンテンツを挿入するためのスロットがいくつか用意されています。以下は、アウトラインの前にコンポーネントを挿入する例です。 @@ -212,7 +212,7 @@ export default { ## View Transitions API の利用 -### 外観切り替え時（ライト/ダーク） +### 外観切り替え時（ライト/ダーク） {#on-appearance-toggle} カラーモード切り替え時にカスタムトランジションを提供するよう、デフォルトテーマを拡張できます。例: @@ -301,11 +301,11 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => { 詳細は [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) を参照してください。 -### ルート遷移時 +### ルート遷移時 {#on-route-change} 近日公開。 -## 内部コンポーネントの置き換え +## 内部コンポーネントの置き換え {#overriding-internal-components} Vite の [エイリアス](https://vitejs.dev/config/shared-options.html#resolve-alias) を使って、デフォルトテーマのコンポーネントを独自のものに置き換えられます。 diff --git a/docs/ja/guide/frontmatter.md b/docs/ja/guide/frontmatter.md index 3350e879..0c5ddcb5 100644 --- a/docs/ja/guide/frontmatter.md +++ b/docs/ja/guide/frontmatter.md @@ -1,6 +1,6 @@ -# フロントマター +# フロントマター {#frontmatter} -## 使い方 +## 使い方 {#usage} VitePress はすべての Markdown ファイルで YAML フロントマターをサポートしており、[gray-matter](https://github.com/jonschlinkert/gray-matter) で解析します。フロントマターは Markdown ファイルの先頭（` ``` -### 生コンテンツのレンダリング +### 生コンテンツのレンダリング {#rendering-raw-content} ページに渡したパラメータはクライアント JavaScript のペイロードにシリアライズされます。そのため、リモート CMS から取得した生の Markdown や HTML など、重いデータをパラメータに含めるのは避けてください。 diff --git a/docs/ja/guide/sitemap-generation.md b/docs/ja/guide/sitemap-generation.md index dd5dbf38..db44942c 100644 --- a/docs/ja/guide/sitemap-generation.md +++ b/docs/ja/guide/sitemap-generation.md @@ -1,4 +1,4 @@ -# サイトマップ生成 +# サイトマップ生成 {#sitemap-generation} VitePress には、サイト用の `sitemap.xml` を生成する機能が標準で用意されています。有効化するには、`.vitepress/config.js` に次を追加します。 @@ -12,7 +12,7 @@ VitePress には、サイト用の `sitemap.xml` を生成する機能が標準 `siteamp.xml` に `` タグを含めるには、[`lastUpdated`](../reference/default-theme-last-updated) オプションを有効にします。 -## オプション +## オプション {#options} サイトマップ生成は [`sitemap`](https://www.npmjs.com/package/sitemap) モジュールで行われます。設定ファイルの `sitemap` に、このモジュールがサポートする任意のオプションを渡せます。指定した値はそのまま `SitemapStream` コンストラクタに渡されます。詳しくは [`sitemap` のドキュメント](https://www.npmjs.com/package/sitemap#options-you-can-pass) を参照してください。例： @@ -36,7 +36,7 @@ VitePress には、サイト用の `sitemap.xml` を生成する機能が標準 } ``` -## `transformItems` フック +## `transformItems` フック {#transformitems-hook} `siteamp.xml` に書き出す直前にサイトマップ項目を加工するには、`sitemap.transformItems` フックを使います。このフックはサイトマップ項目の配列を受け取り、配列を返す必要があります。例： diff --git a/docs/ja/guide/ssr-compat.md b/docs/ja/guide/ssr-compat.md index 3e566a8d..d756d6d1 100644 --- a/docs/ja/guide/ssr-compat.md +++ b/docs/ja/guide/ssr-compat.md @@ -2,13 +2,13 @@ outline: deep --- -# SSR 互換性 +# SSR 互換性 {#ssr-compatibility} VitePress は本番ビルド時に、Node.js 上で Vue のサーバーサイドレンダリング（SSR）機能を使ってアプリを事前レンダリングします。つまり、テーマコンポーネント内のすべてのカスタムコードは SSR 互換性の対象になります。 [公式 Vue ドキュメントの SSR セクション](https://vuejs.org/guide/scaling-up/ssr.html)では、SSR とは何か、SSR と SSG の関係、そして SSR に優しいコードを書く際の一般的な注意点が解説されています。経験則としては、**ブラウザ / DOM API へのアクセスは Vue コンポーネントの `beforeMount` または `mounted` フック内に限定** するのが安全です。 -## `` +## `` {#clientonly} SSR に適さないコンポーネント（例：カスタムディレクティブを含むなど）を使用・デモする場合は、組み込みの `` コンポーネントでラップできます。 @@ -18,11 +18,11 @@ SSR に適さないコンポーネント（例：カスタムディレクティ ``` -## インポート時に Browser API にアクセスするライブラリ +## インポート時に Browser API にアクセスするライブラリ {#libraries-that-access-browser-api-on-import} 一部のコンポーネントやライブラリは **インポート時に** ブラウザ API にアクセスします。インポート時にブラウザ環境を前提とするコードを使うには、動的インポートが必要です。 -### mounted フック内でのインポート +### mounted フック内でのインポート {#importing-in-mounted-hook} ```vue ``` -### 条件付きインポート +### 条件付きインポート {#conditional-import} [`import.meta.env.SSR`](https://vitejs.dev/guide/env-and-mode.html#env-variables) フラグ（Vite の環境変数の一部）を使って、依存関係を条件付きでインポートすることもできます。 diff --git a/docs/ja/guide/using-vue.md b/docs/ja/guide/using-vue.md index 80c8ac21..65f2383e 100644 --- a/docs/ja/guide/using-vue.md +++ b/docs/ja/guide/using-vue.md @@ -1,4 +1,4 @@ -# Markdown で Vue を使う +# MarkdownでVueを使う {#using-vue-in-markdown} VitePress では、各 Markdown ファイルはまず HTML にコンパイルされ、その後 [Vue の単一ファイルコンポーネント（SFC）](https://vuejs.org/guide/scaling-up/sfc.html) として処理されます。つまり、Markdown 内で Vue のあらゆる機能が使えます。動的テンプレート、Vue コンポーネントの利用、`