Skip to content

Commit

Permalink
i18n(ja): Update frontmatter.md (#1213)
Browse files Browse the repository at this point in the history 
Co-authored-by: HiDeoo <[email protected]>
  • Loading branch information
@morinokami @HiDeoo
morinokami and HiDeoo authored Dec 2, 2023
1 parent 9608018 commit ead4f55
Showing 1 changed file with 148 additions and 10 deletions.
158 changes: 148 additions & 10 deletions docs/src/content/docs/ja/reference/frontmatter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ description: Starlightがデフォルトでサポートするフロントマタ

Starlightでは、フロントマターに値を設定することで、MarkdownとMDXのページを個別にカスタマイズできます。たとえば通常のページでは、`title`と`description`フィールドを設定します。

```md
```md {3-4}
---
# src/content/docs/example.md
title: このプロジェクトについて
description: 私が取り組んでいるプロジェクトについてもっと知る。
---
Expand Down Expand Up @@ -42,6 +43,7 @@ description: 私が取り組んでいるプロジェクトについてもっと

```md
---
# src/content/docs/example.md
title: 私たちについて
head:
# カスタム<title>タグを使う
Expand All @@ -58,6 +60,7 @@ head:

```md
---
# src/content/docs/example.md
title: 目次にH2のみを表示するページ
tableOfContents:
minHeadingLevel: 2
Expand All @@ -67,6 +70,7 @@ tableOfContents:

```md
---
# src/content/docs/example.md
title: 目次のないページ
tableOfContents: false
---
Expand All @@ -89,6 +93,7 @@ tableOfContents: false

```md
---
# src/content/docs/example.md
title: 私のホームページ
template: splash
hero:
Expand All @@ -108,20 +113,45 @@ hero:
---
```

ライトモードとダークモードで、異なるバージョンのヒーロー画像を表示できます。

```md
---
# src/content/docs/example.md
hero:
image:
alt: キラリと光る、鮮やかなロゴ
dark: ../../assets/logo-dark.png
light: ../../assets/logo-light.png
---
```

#### `HeroConfig`

```ts
interface HeroConfig {
title?: string;
tagline?: string;
image?: {
alt?: string;
// リポジトリ内の画像への相対パス。
file?: string;
// 画像のスロットに使用する生のHTML。
// カスタムの`<img>`タグやインラインの`<svg>`などが使えます。
html?: string;
};
image?:
| {
// リポジトリ内の画像への相対パス。
file: string;
// この画像を支援技術からアクセス可能にするための代替テキスト。
alt?: string;
}
| {
// ダークモードで使用する、リポジトリ内の画像への相対パス。
dark: string;
// ライトモードで使用する、リポジトリ内の画像への相対パス。
light: string;
// この画像を支援技術からアクセス可能にするための代替テキスト。
alt?: string;
}
| {
// 画像のスロットに使用する生のHTML。
// カスタムの`<img>`タグやインラインの`<svg>`などが使えます。
html: string;
};
actions?: Array<{
text: string;
link: string;
Expand All @@ -141,6 +171,7 @@ interface HeroConfig {

```md
---
# src/content/docs/example.md
title: バナーを含むページ
banner:
content: |
Expand All @@ -157,6 +188,7 @@ banner:

```md
---
# src/content/docs/example.md
title: 最終更新日をカスタマイズしたページ
lastUpdated: 2022-08-09
---
Expand All @@ -170,20 +202,23 @@ lastUpdated: 2022-08-09

```md
---
# src/content/docs/example.md
# 前のページへのリンクを非表示にする
prev: false
---
```

```md
---
# src/content/docs/example.md
# 前のページへのリンクテキストを上書きする
prev: チュートリアルを続ける
---
```

```md
---
# src/content/docs/example.md
# 前のページへのリンクとテキストを上書きする
prev:
link: /unrelated-page/
Expand All @@ -199,6 +234,7 @@ prev:

```md
---
# src/content/docs/example.md
# 次のページへのリンクを非表示にする
next: false
---
Expand All @@ -213,17 +249,30 @@ next: false

```md
---
# src/content/docs/example.md
# このページを検索インデックスから外す
pagefind: false
---
```

### `sidebar`

**type:** `{ label?: string; order?: number; hidden?: boolean; badge?: string | BadgeConfig }`
**type:** [`SidebarConfig`](#sidebarconfig)

自動生成されるリンクのグループを使用している際に、[サイドバー](/ja/reference/configuration/#sidebar)にページをどのように表示するかを設定します。

#### `SidebarConfig`

```ts
interface SidebarConfig {
label?: string;
order?: number;
hidden?: boolean;
badge?: string | BadgeConfig;
attrs?: Record<string, string | number | boolean | undefined>;
}
```

#### `label`

**type:** `string`
Expand All @@ -233,6 +282,7 @@ pagefind: false

```md
---
# src/content/docs/example.md
title: このプロジェクトについて
sidebar:
label: 概要
Expand All @@ -247,6 +297,7 @@ sidebar:

```md
---
# src/content/docs/example.md
title: 最初に表示するページ
sidebar:
order: 1
Expand All @@ -262,6 +313,7 @@ sidebar:

```md
---
# src/content/docs/example.md
title: 自動生成されるサイドバーで非表示にするページ
sidebar:
hidden: true
Expand All @@ -276,6 +328,7 @@ sidebar:

```md
---
# src/content/docs/example.md
title: バッジを含むページ
sidebar:
# サイトのアクセントカラーに合わせたデフォルトのバリアントを使用します
Expand All @@ -285,10 +338,95 @@ sidebar:

```md
---
# src/content/docs/example.md
title: バッジを含むページ
sidebar:
badge:
text: 実験的
variant: caution
---
```

#### `attrs`

**type:** `Record<string, string | number | boolean | undefined>`

自動生成されるリンクのグループ内に表示されるサイドバーのページリンクに追加するHTML属性。

```md
---
# src/content/docs/example.md
title: 新しいタブで開くページ
sidebar:
# 新しいタブでページを開きます
attrs:
target: _blank
---
```

## フロントマタースキーマをカスタマイズする

Starlightの`docs`コンテンツコレクションのフロントマタースキーマは、`docsSchema()`ヘルパーを使用して`src/content/config.ts`で設定されています。

```ts {3,6}
// src/content/config.ts
import { defineCollection } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({ schema: docsSchema() }),
};
```

コンテンツコレクションのスキーマについて詳しくは、Astroドキュメントの[「コレクションスキーマの定義」](https://docs.astro.build/ja/guides/content-collections/#コレクションスキーマの定義)を参照してください。

`docsSchema()`は以下のオプションを受け取ります。

### `extend`

**type:** ZodスキーマまたはZodスキーマを返す関数
**default:** `z.object({})`

`docsSchema()`のオプションで`extend`を設定すると、Starlightのスキーマを追加のフィールドで拡張できます。値は[Zodスキーマ](https://docs.astro.build/ja/guides/content-collections/#zodによるデータ型の定義)である必要があります。

次の例では、`description`を必須にするために厳し目の型を指定し、さらにオプションの`category`フィールドを新規追加しています。

```ts {8-13}
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({
schema: docsSchema({
extend: z.object({
// 組み込みのフィールドをオプションから必須に変更します。
description: z.string(),
// 新しいフィールドをスキーマに追加します。
category: z.enum(['tutorial', 'guide', 'reference']).optional(),
}),
}),
}),
};
```

[Astroの`image()`ヘルパー](https://docs.astro.build/ja/guides/images/#コンテンツコレクションと画像)を利用するには、拡張したスキーマを返す関数を使用します。

```ts {8-13}
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
docs: defineCollection({
schema: docsSchema({
extend: ({ image }) => {
return z.object({
// ローカルの画像へと解決されるフィールドを追加します。
cover: image(),
});
},
}),
}),
};
```

0 comments on commit ead4f55

Please sign in to comment.