多言語対応テンプレート内での変数の使い方

メモ:  Category:hugo

Hugo では、多言語に対応したサイトを構築することもできるので実装方法について見ていきます。

多言語に対応するには、コンフィグファイルへの設定と、ファイル名に言語を指定したコンテンツファイル(article.[lang].md)やテンプレートファイルを用意します。

設定ファイル config.toml を多言語にする

多言語に対応するには、対応する言語の設定を config.toml に設定します。例えば、日本語と英語に対応したい場合 languages セクションの配下に次のように各言語のセクションを作成します。

baseURL = "https://example.org/"
theme = "hugo-paper"

[languages]
  [languages.ja]
    title = "ぶるーのーと"
    weight = 1

  [languages.en]
    title = "bnote"
    weight = 2

コンテンツファイルの対応

記事等のコンテンツファイルを用意したい言語毎に作成します。その際、ファイル名に言語情報を付加し複数用意します。

_index.ja.md    <- 日本語用
_index.en.md    <- 英語用

hugo コマンドを使ってサイトを生成してみると次のように出力され、言語が追加されていることが確認できます。

多言語対応の確認

生成されたファイルは、 public/ja ディレクトリに日本語サイト、 public/en ディレクトリに英語サイトが出力されます。

デフォルトの言語設定

hugo では、言語設定をしない場合デフォルトの言語が英語となります。例えば、次のようにデフォルトの言語を指定しないで英語の言語設定を行わないと次のようなエラーになります。(日本語とスペイン語の設定のみ)

baseURL = "https://example.org/"
theme = "hugo-paper"

[languages]
  [languages.ja]
    title = "ぶるーのーと"
    weight = 1

  [languages.es]
    title = "nota azul"
    weight = 2
Error: site config value "en" for defaultContentLanguage does not match any language definition

サイトのデフォルト言語を設定するには defaultContentLanguage に言語を設定します。

baseURL = "https://example.org/"
defaultContentLanguage = "ja"
theme = "hugo-paper"

[languages]
  [languages.ja]
    title = "ぶるーのーと"
    weight = 1

  [languages.es]
    title = "nota azul"
    weight = 2

デフォルトの言語を設定すると、コンテンツファイルの[ページ名].mdファイルは[ページ名].ja.mdと同じ扱いになります。

言語の区別をディレクトリで行う

言語毎のコンテンツの区別をファイル名で行っていましたが、ディレクトリを使って分けることもできます。次のように config.toml ファイルに contentDir パラメータを設定します。

baseURL = "https://example.org/"
defaultContentLanguage = "ja"
theme = "hugo-paper"

[languages]
  [languages.ja]
    title = "ぶるーのーと"
    weight = 1
    contentDir = "content/japanese"

  [languages.en]
    title = "bnota"
    weight = 2
    contentDir = "content/english"

コンテンツ側は、次のようなディレクトリ構造で作成していきます。

content
    ├── japanese
    │   └── about.md
    ├── english
        └── about.md

他にも言語別にドメインを分ける等、様々な設定ができるようです。

bluenote by BBB