From 01b692c702c448fab171f2632e54f090fe12ce35 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Fri, 21 Jul 2023 00:56:24 +0900 Subject: i18n(ja): Add manual-setup.mdx (#367) --- docs/astro.config.mjs | 2 +- docs/src/content/docs/ja/manual-setup.mdx | 125 ++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/ja/manual-setup.mdx diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 07db3457..1773ae82 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -77,7 +77,7 @@ export default defineConfig({ translations: { // de: 'Manual Setup', // es: 'Manual Setup', - // ja: 'Manual Setup', + ja: '手動セットアップ', // fr: 'Manual Setup', // it: 'Manual Setup', }, diff --git a/docs/src/content/docs/ja/manual-setup.mdx b/docs/src/content/docs/ja/manual-setup.mdx new file mode 100644 index 00000000..2c8a769a --- /dev/null +++ b/docs/src/content/docs/ja/manual-setup.mdx @@ -0,0 +1,125 @@ +--- +title: 手動セットアップ +description: 既存のAstroプロジェクトにStarlightを追加するために、Starlightを手動で設定する方法を学びます。 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +[入門](/ja/getting-started/#新しいプロジェクトを作成する)で述べたように、新しいStarlightサイトを作成する最も簡単な方法は、`create astro`を使用することです。このガイドでは、既存のAstroプロジェクトにStarlightを追加する方法について説明します。 + +## Starlightをセットアップする + +このガイドを進めるには、既存のAstroプロジェクトが必要です。 + +### Starlightインテグレーションの追加 + +Starlightは[Astroのインテグレーション](https://docs.astro.build/ja/guides/integrations-guide/)です。プロジェクトのルートディレクトリで`astro add`コマンドを実行してサイトに追加します。 + + + + ```sh + npx astro add starlight + ``` + + + + ```sh + pnpm astro add starlight + ``` + + + ```sh + yarn astro add starlight + ``` + + + + +これにより、必要な依存関係がインストールされ、Astro設定ファイルの`integrations`配列にStarlightが追加されます。 + +### インテグレーションの設定 + +Starlightインテグレーションの設定は、`astro.config.mjs`ファイルでおこないます。 + +まずは`title`を追加してみましょう。 + +```js {7-9} +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: '私の楽しいドキュメントサイト', + }), + ], +}); +``` + +他の利用可能なオプションについては、[Starlightの設定リファレンス](/ja/reference/configuration/)を参照してください。 + +### コンテンツコレクションの設定 + +StarlightはAstroの[コンテンツコレクション](https://docs.astro.build/ja/guides/content-collections/)の上に構築されています。この設定は`src/content/config.ts`ファイルでおこないます。 + +コンテンツの設定ファイルを作成または更新し、Starlightの`docsSchema`を使用する`docs`コレクションを追加します。 + +```js ins={3,6} +// src/content/config.ts +import { defineCollection } from 'astro:content'; +import { docsSchema } from '@astrojs/starlight/schema'; + +export const collections = { + docs: defineCollection({ schema: docsSchema() }), +}; +``` + +### コンテンツの追加 + +以上でStarlightの設定は完了し、コンテンツを追加する準備が整いました! + +`src/content/docs/`ディレクトリを作成し、`index.md`ファイルを追加します。これが新しいサイトのホームページになります。 + +```md +--- +# src/content/docs/index.md +title: 私のドキュメント +description: Starlightで作成されたこのドキュメントサイトで、私のプロジェクトについてもっと学びましょう。 +--- + +ようこそ私のプロジェクトへ! +``` + +Starlightはファイルベースのルーティングを使用してます。そのため、`src/content/docs/`にあるMarkdown、MDX、Markdocファイルはすべて、サイトのページへと変換されます。フロントマターのメタデータ(上記の例では`title`と`description`フィールド)により、各ページの表示方法を変更できます。利用可能なオプションについては、[フロントマターのリファレンス](/ja/reference/frontmatter/)を参照してください。 + +## 既存サイトのためのヒント + +既存のAstroプロジェクトがある場合は、Starlightを使用して、サイトにドキュメントセクションを迅速に追加できます。 + +### サブパスへのStarlightの追加 + +Starlightのすべてのページをサブパスに追加するには、ドキュメントのコンテンツを`src/content/docs/`のサブディレクトリに配置します。 + +たとえば、Starlightのページがすべて`/guides/`で始まる場合は、コンテンツを`src/content/docs/guides/`ディレクトリに追加します。 + +import FileTree from '../../../components/file-tree.astro'; + + + +- src/ + - content/ + - docs/ + - **guides/** + - guide.md + - index.md + - pages/ +- astro.config.mjs + + + +将来的には、`src/content/docs/`内にネストされたディレクトリを必要としないよう、このユースケースに対するサポートを改善する予定です。 + +### StarlightとSSR + +現在、StarlightはAstroのサーバーアダプタを使用した[SSRデプロイ](https://docs.astro.build/ja/guides/server-side-rendering/)をサポートしていません。近いうちにサポートできるようにしたいと考えています。 -- cgit