From 78d6b630bf309a687ee92a48b86a560ddec273d5 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Mon, 5 Jun 2023 21:32:11 +0900 Subject: components --- docs/src/content/docs/ja/guides/components.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/src/content/docs/ja/guides/components.mdx b/docs/src/content/docs/ja/guides/components.mdx index c2a3f63d..617307c1 100644 --- a/docs/src/content/docs/ja/guides/components.mdx +++ b/docs/src/content/docs/ja/guides/components.mdx @@ -5,9 +5,11 @@ description: StarlightにおけるMDXでのコンポーネントの利用。 コンポーネントにより、UI やスタイリングの一部を一貫性を保って簡単に再利用できます。例として、リンクカードやYouTubeの埋め込みなどが考えられます。Starlightは[MDX](https://mdxjs.com/)ファイルでのコンポーネントの使用をサポートしており、すぐに使える一般的なコンポーネントもいくつか提供しています。 +[コンポーネントの作り方について、詳しくはAstroドキュメントを参照してください](https://docs.astro.build/ja/core-concepts/astro-components/)。 + ## コンポーネントを使う -コンポーネントは、MDXファイルにインポートしてJSXタグとして呼び出すことで使用できます。HTMLタグのように見えますが、`import`文の名前と同じ大文字で始まります。 +コンポーネントは、MDXファイルにインポートしてJSXタグとしてレンダリングすることで使用できます。HTMLタグのように見えますが、`import`文の名前と同じ大文字で始まります。 ```mdx --- @@ -25,11 +27,11 @@ import AnotherComponent from '../../components/AnotherComponent.astro'; ``` -StarlightはAstroの上で動作しているため、どのUIフレームワークで作成されたコンポーネントでもMDXファイルで使用できます。[MDXでのコンポーネントの使用](https://docs.astro.build/ja/guides/markdown-content/#using-components-in-mdx)について、詳しくはAstroドキュメントを参照してください。 +StarlightはAstro製であるため、[サポート対象のUIフレームワーク（React、Preact、Svelte、Vue、Solid、Lit、Alpine）](https://docs.astro.build/ja/core-concepts/framework-components/)で作成されたコンポーネントであればMDXファイルで使用できます。[MDXでのコンポーネントの使用](https://docs.astro.build/ja/guides/markdown-content/#using-components-in-mdx)について、詳しくはAstroドキュメントを参照してください。 ## 組み込みのコンポーネント -Starlightは、一般的なドキュメントのユースケースに対して組み込みのコンポーネントを提供しています。これらのコンポーネントは、`@astrojs/starlight/components`パッケージから利用できます。 +Starlightは、一般的なドキュメントのユースケースに対して組み込みのコンポーネントをいくつか提供しています。これらのコンポーネントは、`@astrojs/starlight/components`パッケージから利用できます。 ### タブ -- cgit From 1b56f62159d46f21c1a98616226526eab010bbd6 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Mon, 5 Jun 2023 22:26:48 +0900 Subject: i18n --- docs/src/content/docs/ja/guides/i18n.mdx | 46 +++++++++++++++++++++++++------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/docs/src/content/docs/ja/guides/i18n.mdx b/docs/src/content/docs/ja/guides/i18n.mdx index e0be28de..036d42cb 100644 --- a/docs/src/content/docs/ja/guides/i18n.mdx +++ b/docs/src/content/docs/ja/guides/i18n.mdx @@ -45,7 +45,7 @@ Starlightは、ルーティング、フォールバックコンテンツ、右 `defaultLocale`はフォールバックコンテンツとUIラベルに使用されるため、コンテンツを最初に書く可能性が最も高い言語、またはすでにコンテンツがある言語を選択してください。 -2. `src/content/docs/`に各言語のディレクトリを作成します。たとえばステップ1で示した構成を仮定すると、次のようになります。 +2. `src/content/docs/`に各言語のディレクトリを作成します。たとえば上で示した構成に対しては、以下のフォルダを作成します。 @@ -58,7 +58,9 @@ Starlightは、ルーティング、フォールバックコンテンツ、右 -3. これで各言語のディレクトリにコンテンツ用のファイルを作成できるようになりました。言語間でページを対応させるために、同じページには同じファイル名を使用します。たとえば、`ar/index.md`と`en/index.md`は、アラビア語版と英語版のホームページをそれぞれ表わします。 +3. これで各言語のディレクトリにコンテンツ用のファイルを追加できるようになりました。言語間でページを関連付けるために、同じページには同じファイル名を使用してください。フォールバックコンテンツや翻訳に関する通知など、Starlightのi18n機能をフル活用しましょう。 + + たとえば、`ar/index.md`と`en/index.md`は、アラビア語版と英語版のホームページをそれぞれ表わします。 ### ルートロケールを使用する @@ -91,7 +93,7 @@ export default defineConfig({ }); ``` -`root`ロケールを使用する場合は、言語専用のフォルダではなく、`src/content/docs/`にその言語のページを直接配置します。たとえば上記の設定を使用した場合、英語と中国語のホームページ用ファイルは次のようになります。 +`root`ロケールを使用する場合は、言語専用のフォルダではなく、`src/content/docs/`にその言語のページを直接保存します。たとえば上記の設定を使用した場合、英語と中国語のホームページ用ファイルは次のようになります。 @@ -106,23 +108,47 @@ export default defineConfig({ #### 単一言語のサイト -サイトの言語が1つだけの場合は、その言語をルートロケールに設定できます。これにより、Starlightのデフォルト言語（英語）を上書きできますが、言語選択機能などの他の国際化機能は有効化されません。 +デフォルトでは、Starlightは単一言語（英語）のサイトです。他の言語で単一言語のサイトを作成するには、その言語を`locales`において`root`に設定します。 + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; +export default defineConfig({ + integrations: [ + starlight({ + title: '私のドキュメント', + locales: { + root: { + label: '简体中文', + lang: 'zh-CN', + }, + }, + }), + ], +}); +``` + +これにより、言語選択機能などの他の国際化機能は有効化せずに、Starlightのデフォルト言語を上書きできます。 ## フォールバックコンテンツ -Starlightは、すべての言語で同等のページが作成されることを想定しています。たとえば`en/about.md`ファイルがある場合、サポートする他の言語もそれぞれ`about.md`を作成する必要があります。 +Starlightは、すべての言語で同等のページが作成されることを想定しています。たとえば`en/about.md`ファイルがある場合、サポートする他の言語でもそれぞれ`about.md`を作成してください。これにより、まだ翻訳されていないページに対して、Starlightが自動的にフォールバックコンテンツを提供できるようになります。 -ある言語の翻訳がまだである場合、Starlightはそのページのコンテンツを（`defaultLocale`で設定する）デフォルト言語で表示します。たとえば、概要（about）ページのフランス語版をまだ作成していない場合、デフォルト言語が英語であれば、`/fr/about`を訪れた人は英語のコンテンツを見ることになります。これにより、まずデフォルト言語にコンテンツを追加し、そして翻訳者が時間を掛けて徐々に翻訳していくことが可能となります。 +ある言語の翻訳がまだである場合、Starlightはそのページのコンテンツを（`defaultLocale`で設定する）デフォルト言語で表示します。たとえば、概要（about）ページのフランス語版をまだ作成していない場合、デフォルト言語が英語であれば、`/fr/about`を訪れた人には未翻訳であるという通知とともに英語のコンテンツが表示されます。これにより、まずデフォルト言語にコンテンツを追加し、そして翻訳者が時間を掛けて徐々に翻訳していくことが可能となります。 ## StarlightのUIを翻訳する -StarlightのデフォルトUIの一部はテキストラベルを必要とします。たとえば、このページの目次には「目次」という日本語の見出しがあります。これらのラベルを可能な限り多くの言語で提供することを目指していますが、現在は英語、ドイツ語、日本語、スペイン語のみをサポートしています。 +Starlightでは、読者が選択した言語でサイト全体を体験できるように、翻訳されたコンテンツファイルをホストするだけでなく、デフォルトUIの文字列（たとえば目次に表示されている「目次」という見出し）も翻訳できるようになっています。 + +英語、ドイツ語、日本語、ポルトガル語、スペイン語の翻訳済みUI文字列がすでに用意されていますが、[デフォルト言語をさらに追加するための貢献](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md)も歓迎します。 `18n`データコレクションを使用すると、サポートしたい言語の翻訳を追加したり、デフォルトのラベルを上書きしたりできます。 1. 設定がまだであれば、`src/content/config.ts`で`i18n`データコレクションを設定します。 ```js + // src/content/config.ts import { defineCollection } from 'astro:content'; import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'; @@ -132,7 +158,7 @@ StarlightのデフォルトUIの一部はテキストラベルを必要としま }; ``` -2. StarlightのUIを翻訳したいロケールごとに、JSONファイルを`src/content/i18n/`に作成します。たとえば、以下ではアラビア語と簡体字中国語の翻訳ファイルを追加しています。 +2. UI文字列を追加で翻訳したいロケールごとに、`src/content/i18n/`にJSONファイルを作成します。たとえば、以下ではアラビア語と簡体字中国語の翻訳ファイルを追加しています。 @@ -144,7 +170,9 @@ StarlightのデフォルトUIの一部はテキストラベルを必要としま -3. 翻訳したいキーに対応する翻訳を、JSONファイルに追加します。英語のデフォルトを参考にしながら翻訳を進めてください。 +3. 翻訳したいキーに対応する翻訳を、JSONファイルに追加します。キーは英語のままとし、値のみを翻訳します（例: `"search.label": "Buscar"`）。 + + 以下は、Starlightが英語版のデフォルトとして使用している文字列です。 ```json { -- cgit