autorenew

Astro i18n Starter

初期設定

プロジェクトの作成

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

設定

1. astro.config.mjs の設定

astroの設定ファイルにdefaultLocaleとlocalesを設定します。

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  site: 'https://astro-i18n-starter.pages.dev',
  integrations: [mdx(), sitemap()],
  i18n: {
+   defaultLocale: 'ja',
+   locales: ['en', 'ja', 'zh-cn', 'ar'],
    routing: {
      prefixDefaultLocale: true,
      redirectToDefaultLocale: false,
    },
  },
  markdown: {
    shikiConfig: {
      theme: 'one-dark-pro',
    },
  },
});

astroの詳細な設定方法については公式ドキュメントを参考にしてください。

Configuration Reference | Docs

Internationalization (i18n) Routing | Docs

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

2. /src/locales.ts の設定

同様にして Astro i18n Starter の設定ファイルを更新します。

DEFAULT_LOCALE_SETTINGに先ほど設定したデフォルトロケールを、LOCALES_SETTINGには作成したいロケールのリストを設定します。こちらはStarlightのlocales設定 に準拠しています。

export const DEFAULT_LOCALE_SETTING = "en";

export const LOCALES_SETTING: LocaleSetting = {
  "en": {
    "label": "English"
  },
  "ja": {
    "label": "日本語"
  },
  "zh-cn": {
    "label": "简体中文",
    "lang": "zh-CN"
  },
  "ar": {
    "label": "العربية",
    "dir": "rtl"
  },
};

interface LocaleSetting {
  [key: Lowercase<string>]: {
    label: string;
    lang?: string;
    dir?: 'rtl' | 'ltr';
  };
 }

langコードについてはこちらをご確認ください。

lang - HTML: HyperText Markup Language | MDN

ディレクトリ構造

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

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

src/components/i18n

多言語対応サイトで使用するUIコンポーネントのフォルダです。

src/pages

src/consts.ts

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

src/i18n.ts

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