Hugoで多言語サイトを作る

2018年02月04日

(2020-01-25) Hugo 0.63.1で動作するように更新しました。

本サイトは静的サイトジェネレーターのHugoを使用して生成しています。

Hugoは多言語サイトの生成が可能です。たとえばpage.mdというMarkdownファイルに対して、page.[lang].md(たとえばpage.en.md)を作ると、各言語サイトの生成に使用されます。layoutファイルについても同様に言語ごとの切り替えが可能です。

もともとは単一サイトの /[lang]/ ディレクトリ以下に各言語ページが生成されるというような仕様だったのですが、Hugo 0.31より(たとえば.comと.co.jpのような)ドメインの異なる複数のサイトを想定した生成ができるようになりました。

実際に本サイト(framesynthesis.jp)および本サイトの英語サイト(framesynthesis.com)で使用しているconfig.tomlファイルの抜粋です。

defaultContentLanguage = "ja"

staticDir = "static"

[languages]
[languages.ja]
baseURL = "https://framesynthesis.jp/"
title = "フレームシンセシス"
dateFormat = "2006年01月02日"

[languages.en]
baseURL = "https://framesynthesis.com/"
title = "FrameSynthesis"
dateFormat = "Jan. 2, 2006"

staticDir1 = "static_en"

ビルドすると、public/jaディレクトリに日本語サイトが、public/enディレクトリに英語サイトが生成されます。

基本的な設定

基本的な設定としては、言語ごとの[languages.*]にそれぞれbaseURLを設定します。baseURLはすべての言語に設定する必要があります。

デフォルト言語

config.tomlファイルのdefaultContentLanguageでデフォルト言語を設定します。

たとえばdefaultContentLanguageにjaを設定すると、[ページ名].mdファイルが[ページ名].ja.mdと同じ扱いになります。

言語ごとのレイアウト

言語ごとに使用されるlayoutファイルの詳細がこちらで解説されています。

partialsについては.en等で振り分けられないようです。layoutファイルの時点で分けるか、layoutファイルの中の条件式で切り替える必要がありそうです。

staticディレクトリ

言語ごとに使用するstaticディレクトリを変更できます。仕様の詳細はこちらで解説されています。

ルートで staticDir = “static” 設定して、例えば[languages.en]に staticDir1 = “static_en” を記述すると、staticディレクトリのほかにstatic_enディレクトリも静的ファイルのソースとして参照します。同一ファイルがあればstatic_enフォルダのほうが優先されます。staticフォルダに格納した画像ファイルを英語サイトでは別の画像ファイルで上書きするといったことが可能です。

言語ごとに文字列を変更するには

i18nディレクトリに以下のように定義ファイルを作成して、{{ i18n “about” }}のように呼び出すと言語ごとの文字列に置換できます。

i18n/en.tomlファイル

[about]
other = "About Us"

i18n/ja.tomlファイル

[about]
other = "このサイトについて"

言語ごとに日付表記を変更するには

{{ .Date.Format .Site.Params.dateFormat }}

などとしてパラメータでフォーマットを参照するのがよさそうです(上のconfig.tomlの抜粋で言語ごとにdateFormatパラメータを設定しています)。

言語判定

{{ if eq .Site.Language.Lang "en" }} ... {{ end }}

で判定するのがよさそうです。partialsやshortcodesでも使用できます。

(書いた人: こりん

ブログトップへ