autorenew

Astro i18n Starter

その他の機能

Components

src/components/i18n/ 内には多言語サイトを生成する上で便利なUIコンポーネントをいくつか用意しています。必要に応じて内容をカスタムしたり、importしてご利用ください。

LocaleSelect.astro

利用言語を切り替えるためのセレクトUIです。

LocaleSelectSingle.astro

利用言語を切り替えるためのリンクUIです。言語を2つしかサポートしない場合にご利用ください。

LocalesHomeList.astro

各言語のトップページへのリンクを、<li>タグのリストで返します。

LocaleSuggest.astro

ユーザーがブラウザの言語と違うURLにアクセスした場合に、ブラウザの言語へのリンクを最上部に表示するUIです。

例えば、英語設定のブラウザで /ja/[slug] というURLにアクセスした場合、 /en/[slug] へのリンクを提案します。

いちど閉じると設定がlocalhostに保存され、再表示されません。

LocaleHtmlHead.astro

localeごとの <head> タグ設定を記述できます。サンプルでは各言語のNoto Fontを読み込んでCSSを反映しています。

NotTranslateCaution.astro

あるページを特定の言語でしか用意できない場合に、ユーザーに警告を表示できます。

Monolingualページがサンプルです。英語以外の言語でこのページを表示すると、ユーザーに警告UIを表示します。

サンプルでは警告UIのテキストは、/src/const.ts内に設定しています。

404

Astro i18n Starter の404ページは2つのファイルから構成されています。404ページのデザインをカスタムしたい場合、基本的に src/pages/[lang]/404.astro だけを編集すればOKです。

src/pages/404.astro

このファイルは以下を生成します。

/404.html

多くのデプロイサービスはページが見つからない場合、まずこのファイルを見つけて使用します。

https://docs.astro.build/en/basics/astro-pages/#custom-404-error-page

Astro i18n Starter でこのファイルにアクセスされた場合、ユーザーのシステム言語などに対応して、以下の404ページにリダイレクトします。

詳細なリダイレクト条件 以下の条件分岐によりリダイレクトを行います。詳しくはソースコードをご確認ください。

  1. URLが/ja/...のようにlangを含む場合
  2. localStorage.selectedLang にlangを含む場合
    • localStorage.selectedLang はユーザーがUI上で言語を選択したタイミングで保存されます。
  3. リンク元のページが/ja/...のようにlangを含む場合

src/pages/[lang]/404.astro

このファイルは以下を動的に生成します。

  • /en/404/index.html
  • /ja/404/index.html
  • …

history.replaceState() 処理により、ブラウザにはユーザーがリダイレクト前にアクセスしたURLのpathnameが表示されます。

CSS Tips

言語ごとにCSSを分けたい場合

以下のように記述することで、CSSだけで定義を分けることができます。

:lang(en) {
  /* 英語のスタイル */
}
:lang(ar) {
  /* アラビア語のスタイル */
}

ただしこの場合、すべての言語のCSSを同時に読み込むことになるため、リソースの無駄になります。

.astroファイルの中であれば以下のように書いたり、もしくはLocaleHtmlHead.astroの中で定義を分けることを検討してください。

---
import { type Lang } from "@/i18n";
const locale = Astro.currentLocale as Lang;
---

{
    locale === "en" ? (
        <style>
            /* 英語のスタイル */
        </style>
    )
    : locale === "ar" ? (
        <style>
            /* アラビア語のスタイル */
        </style>
    )
    : null
}

アラビア語のletter-spacing

見出しなどデザインによっては文字間隔を調整したい場合があります。ただし、そのような場合でもアラビア語だけは間隔を開けるべきではありません。

Right-to-left Styling

そのためAstro i18n Starterでは、src/styles/base.cssの中に以下が定義されていることに注意してください。

:lang(ar) {
  * { letter-spacing: 0 !important; }
}

アイコンのRTL

RTL言語では、矢印などのアイコンは反転する必要があります。

Right to left | Apple Developer Documentation

Astro i18n StarterではMaterial Iconを使用しており、src/styles/base.cssの中に以下が定義されています。

[class^="material-icons"]:dir(rtl).dir {
  scale: -1 1;
}

以下のように.dirクラスをつけることで、RTL言語の表示ではアイコンが反転されます。

<span class="material-icons-sharp dir">arrow_forward</span>

実際の表示: arrow_forward open_in_new