autorenew

Astro i18n Starter

初期設定

プロジェクトの作成

npm create astro@latest -- --template psephopaiktes/astro-i18n-starter

設定

1. /src/locales.ts の設定

まず、言語設定ファイルを更新します。

DEFAULT_LOCALE_SETTING にデフォルトのロケールを設定し、LOCALES_SETTING に希望するロケールのリストを設定します。これは Starlightの設定に準拠しています。

// サイトのデフォルトロケールを設定します。
export const DEFAULT_LOCALE_SETTING: string = "en";

export const LOCALES_SETTING: LocaleSetting = {
  // サポートするロケールを追加または削除します。
  en: {
    label: "English",
    lang: "en-US", // 任意
  },
  ja: {
    label: "日本語",
  },
  "zh-cn": {
    label: "简体中文",
    lang: "zh-CN",
  },
  ar: {
    label: "العربية",
    dir: "rtl", // 任意
  },
};

言語コードに関する情報は以下のリンクを参照してください。

lang - HTML: HyperText Markup Language | MDN

2. astro.config.mjs の設定

siteにあなたのサイトのURLを設定します。

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';
import { DEFAULT_LOCALE_SETTING, LOCALES_SETTING } from './src/locales';

export default defineConfig({
- site: 'https://astro-i18n-starter.pages.dev',
+ site: 'https://your-site.com',
  i18n: {
  defaultLocale: DEFAULT_LOCALE_SETTING,
  locales: Object.keys(LOCALES_SETTING),
  routing: {
    prefixDefaultLocale: true,
    redirectToDefaultLocale: false,
  },
  },
...

Astro の詳細な設定オプションについては公式ドキュメントを参照してください。

注: prefixDefaultLocale と redirectToDefaultLocale の設定を変更することは推奨されません。Astro i18n Starter ではクライアントサイドのJavascriptでリダイレクトを管理しており、URLにlocaleが含まれていない場合はデフォルトのlocaleにリダイレクトします。例えば、/setup/ は /en/setup/ にリダイレクトされます。

ディレクトリ構造

Astroのディレクトリ構造に準拠します。

src/
├── assets/
│   └── en/, ja/ ...
├── blog/
│   └── en/, ja/ ...
├── components/
│   └── i18n/
├── layouts/
├── pages/
│   ├── [lang]/
│   ├── en/, ja/ ...
│   ├── 404.astro
│   └── index.astro
├── styles/
├── content.config.ts
├── consts.ts
├── i18n.ts
└── locales.ts

src/components/i18n

多言語対応サイトで使用するUIコンポーネントのディレクトリです

src/pages

src/consts.ts

プロジェクト内でimportして使用できる定数データのファイルです。使用しないこともできます。

src/i18n.ts

Astro i18n Starter で使用している関数などの定義ファイルです。基本的に編集する必要はありません。