Skip to content

Commit

Permalink
i18n(ja): Add pages.mdx (#1524)
Browse files Browse the repository at this point in the history
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
  • Loading branch information
morinokami and HiDeoo authored Feb 18, 2024
1 parent 5e1ac73 commit d51b69d
Showing 1 changed file with 142 additions and 0 deletions.
142 changes: 142 additions & 0 deletions docs/src/content/docs/ja/guides/pages.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
---
title: ページ
description: Starligtでドキュメントサイトのページを作成し管理する方法を学びます。
sidebar:
order: 1
---

Starlightは、Markdownのフロントマターにより提供される柔軟なオプションを使用して、コンテンツに基づいてサイトのHTMLページを生成します。さらにStarlightプロジェクトは、[Astroの強力なページ生成ツール](https://docs.astro.build/ja/basics/astro-pages/)に完全にアクセスできます。このガイドでは、Starlightのページ生成の仕組みについて説明します。

## コンテンツページ

### ファイルフォーマット

Starlightは、設定なしでMarkdownとMDXによってコンテンツを作成できます。Markdocのサポートを追加するには、実験的な[AstroのMarkdocインテグレーション](https://docs.astro.build/ja/guides/integrations-guide/markdoc/)をインストールします。

### ページの追加

`.md`または`.mdx`ファイルを`src/content/docs/`に作成することで、サイトに新しいページを追加できます。サブフォルダを使用してファイルを整理し、複数のパスセグメントを作成できます。

たとえば次のファイル構造は、`example.com/hello-world``example.com/reference/faq`にページを生成します。

import FileTree from '~/components/file-tree.astro';

<FileTree>

- src/
- content/
- docs/
- hello-world.md
- reference/
- faq.md

</FileTree>

### 型安全なフロントマター

すべてのStarlightページは、ページの表示方法を制御するためのカスタマイズ可能な[共通のフロントマタープロパティ](/ja/reference/frontmatter/)を共有しています。

```md
---
title: こんにちは、世界!
description: これは私のStarlight製サイトのページです
---
```

何か重要なことを忘れてしまっていても、Starlightがあなたに教えてくれるでしょう。

## カスタムページ

発展的なユースケースとしては、`src/pages/`ディレクトリを作成しておこなうカスタムページの追加があります。`src/pages/`ディレクトリは[Astroのファイルベースルーティング](https://docs.astro.build/ja/basics/astro-pages/#ファイルベースルーティング)を使用しており、他のページフォーマットに加えて`.astro`ファイルをサポートしています。これは、完全にカスタムのレイアウトでページを作成したり、異なるデータソースからページを生成する必要がある場合に役立ちます。

たとえば以下のプロジェクトは、`src/content/docs/`のMarkdownコンテンツと、`src/pages/`のAstroとHTMLルートを混在させています。

<FileTree>

- src/
- content/
- docs/
- hello-world.md
- pages/
- custom.astro
- archived.html

</FileTree>

詳しくは[Astroドキュメントの「ページ」ガイド](https://docs.astro.build/ja/basics/astro-pages/)を参照してください。

### カスタムページでStarlightのデザインを使用する

カスタムページでStarlightのデザインを使用するには、ページコンテンツを`<StarlightPage />`コンポーネントでラップします。これは、コンテンツを動的に生成したいものの、Starlightのデザインも使用したいような場合に役立ちます。

```astro
---
// src/pages/custom-page/example.astro
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import CustomComponent from './CustomComponent.astro';
---
<StarlightPage frontmatter={{ title: '私のカスタムページ' }}>
<p>これはカスタムコンポーネントを用いたカスタムページです:</p>
<CustomComponent />
</StarlightPage>
```

#### Props

`<StarlightPage />`コンポーネントは以下のpropsを受け付けます。

##### `frontmatter`(必須)

**type:** `StarlightPageFrontmatter`

ページの[フロントマタープロパティ](/ja/reference/frontmatter/)を設定します。これは、Markdownページのフロントマターと同様です。[`title`](/ja/reference/frontmatter/#title必須)プロパティは必須ですが、その他のプロパティは任意です。

以下のプロパティはMarkdownのフロントマターと異なります。

- [`slug`](/ja/reference/frontmatter/#slug)プロパティはサポートされておらず、カスタムページのURLに基づいて自動的に設定されます。
- [`editUrl`](/ja/reference/frontmatter/#editurl)オプションは、編集リンクを表示するためのURLが必要です。
- [`sidebar`](/ja/reference/frontmatter/#sidebar)プロパティはサポートされていません。Markdownのフロントマターでは、このオプションは[自動生成されるリンクグループ](/ja/reference/configuration/#sidebar)のカスタマイズを可能にしますが、`<StarlightPage />`コンポーネントを使用するページには適用されません。

{/* ##### `sidebar` */}

{/* **type:** `SidebarEntry[] | undefined` */}
{/* **default:** the sidebar generated based on the [global `sidebar` config](/reference/configuration/#sidebar) */}

{/* Provide a custom site navigation sidebar for this page. */}
{/* If not set, the page will use the default global sidebar. */}

##### `hasSidebar`

**type:** `boolean`
**default:** [`frontmatter.template`](/ja/reference/frontmatter/#template)`'splash'`の場合は`false`、それ以外の場合は`true`

ページにサイドバーを表示するかどうかを制御します。

##### `headings`

**type:** `{ depth: number; slug: string; text: string }[]`
**default:** `[]`

ページのすべての見出しの配列を指定します。指定された場合、Starlightはこれらの見出しからページの目次を生成します。

##### `dir`

**type:** `'ltr' | 'rtl'`
**default:** 現在のロケールの記述方向

ページのコンテンツを記述する方向を設定します。

##### `lang`

**type:** `string`
**default:** 現在のロケールの言語

`en``zh-CN``pt-BR`など、ページのBCP-47言語タグを設定します。

##### `isFallback`

**type:** `boolean`
**default:** `false`

現在の言語に対する翻訳がない結果、ページが[フォールバックコンテンツ](/ja/guides/i18n/#フォールバックコンテンツ)を使用しているかどうかを示します。

0 comments on commit d51b69d

Please sign in to comment.