世界へ発信！サイトの多言語化 (i18n)

Hugoは標準で強力な多言語（Multilingual）機能を持っています。
今回は、「ボタンやメニューなどの共通部分」 を多言語化する方法を学びます。

0. なぜ i18n が必要なの？

「日本語と英語で記事ファイル (.md) を分けてるなら、そこに直接英語を書けばいいのでは？」と思いますよね。
その通りです！ 記事の本文は、それぞれのファイルに好きな言語で書けばOKです。

では、なぜ i18n（国際化）機能 が必要なのでしょうか？
それは、「共通部分（テンプレート部分）」 のためです。

「トップへ戻る」「記事一覧」といったボタンやメニュー。
これらは 1つのHTMLファイル (baseof.html 等) を共有している ため、ファイル分けでは対応できません。

例えば、single.html に <a href="/">トップへ戻る</a> と書くと、英語ページでも「トップへ戻る」と表示されてしまいます。
そこで i18n を使い、「日本語なら『トップへ戻る』、英語なら『Back to Top』と出してね」という命令を埋め込むのです。

1. 設定ファイルの変更

まず、hugo.toml に、このサイトがどんな言語に対応するのかを登録します。

defaultContentLanguage = 'ja'

[languages]
  [languages.ja]
    languageName = '日本語'
    weight = 1
  [languages.en]
    languageName = 'English'
    weight = 2

2. 辞書ファイル (`i18n/`) の用意

次に、翻訳の「辞書」を作ります。i18n フォルダに置きます。

i18n/ja.yaml (日本語辞書)

hello:
  other: "こんにちは"
welcome_message:
  other: "Hugoの世界へようこそ！"

i18n/en.yaml (英語辞書)

hello:
  other: "Hello"
welcome_message:
  other: "Welcome to the world of Hugo!"

3. テンプレートでの使い方

準備ができたら、HTMLテンプレート（layouts/ 内のファイル）で以下のように書きます。

{{ T "hello" }}

これだけで、ユーザーが見ている言語に合わせて、自動的に言葉が切り替わります！
メニューやボタンの文字など、サイトの「ガワ」の部分はこうして翻訳します。

4. 実際の表示

では、実際に試してみましょう。
多言語機能は、「その言語の記事ファイル (.en.md) があるかどうか」 で切り替わります。

手順1: 日本語での表示確認

今、あなたが見ているこの記事は日本語 (24-multilingual.md) です。
ここに {{ T "hello" }} を埋め込んでみます。

実行結果: " こんにちは "

ちゃんと「こんにちは」と出ましたか？

手順2: 英語での表示確認

次に、この記事の「英語版」を作って、表示が変わるか確認します。
content/posts/ フォルダの中に、24-multilingual.en.md というファイルを作ってください（中身はコピーでOK）。

作成したら、以下のURLにアクセスしてみましょう。
👉 http://localhost:1313/en/posts/multilingual/

日本語版: こんにちは (“こんにちは”)
英語版: こんにちは (“Hello”)

同じコード ({{ T "hello" }}) なのに、表示される言葉が変わりましたね！
これが i18n の魔法です。

この機能を活用すれば、メニューの「ホーム / Home」や「記事一覧 / Articles」といったテキストを、言語ごとに自動で出し分けることができます。
グローバルなサイト作りも、Hugoなら怖くありません！🌏