[Hugo] Hugoplate テーマでの多言語化

Hitoshi Arakawa | 2024/05/10 Fri 04:04

Hugo に Hugoplate テーマをインストールしたことを書いた。

Hugo に Hugoplate テーマをインストールする | 荒川仁志 公式サイト
https://www.hitoshiarakawa.com/blogs/2024/2024-05-09_installing-hugoplate-theme-on-hugo/

さらにサイトを多言語化することにした。英語と日本語の表示に切り替えられるようにする。

Hugoplate テーマはもともと多言語に対応しているテーマなので、設定を少しいじるだけでいい感じに多言語化できる。

環境：
・macOS Ventura 13.5（英語環境）
・Hugo v0.119.0
・Hugo テーマ：Hugoplate

今回は日本語をデフォルトの言語として英語に切り替えるような仕様にする。

（１）{プロジェクト名}/hugo.toml を以下のように編集する。

変更前：
defaultContentLanguage = 'en'

変更後：
defaultContentLanguage = 'ja'

defaultContentLanguageInSubdir は true にすることで日本語が {ドメイン}/ja/、英語が {ドメイン}/en/ のようになる。しかし、日本語でわざわざ /ja/ を付けたくなければ false のままでいい（英語に切り替えたときのみ /en/ が付く）。

また、以下を追記する。

[languages]
  [languages.ja]
    languageName = "日本語"
    title = "{日本語のサイト名}"
    contentDir = 'content/japanese'
  [languages.en]
    languageName = "English"
    title = "{英語のサイト名}"
    contentDir = 'content/english'
    summaryLength = 30

これで自動的にサイト右上に言語切り替えのドロップダウンメニューが追加される。

なお英語で summaryLength = 30 と指定しているのは、日本語ブログのリスト表示でのサマリーの文字数指定とは別に、英語のサマリーの単語数を指定するためだ。

（２）１で追加された言語切り替えメニューは英語が「En」、日本語が「日本語」となっている。僕はこれを「English」「Japanese | 日本語」にしたい。

そのためには {プロジェクト名}/themes/hugoplate/config/_default/languages.toml を以下のように編集する。

[ja]
languageName = "Japanese | 日本語"
languageCode = "ja"
contentDir = "content/japanese"
weight = 1

[en]
languageName = "English"
languageCode = "en-us"
contentDir = "content/english"
weight = 2

（３）日本語ページと英語ページでトップのメニューの表示を変えるには以下のファイルを同一ディレクトリーにコピーし、menus.ja.toml と名前を変更する。

{プロジェクト名}/config/_default/menus.en.toml

menus.ja.toml を編集することで日本語ページのメニューをカスタマイズできる。

（４）Hugoplate テーマではサンプルサイトの作成時に以下のディレクトリが作成される。

{プロジェクト名}/content/english

ここに英語のコンテンツを入れる。

日本語のコンテンツは以下のディレクトリを新規作成してそこに作成していけばいい。

{プロジェクト名}/content/japanese

日本語のトップページは english/_index.md をコピーしてきて編集することでカスタマイズできる。僕は１で defaultContentLanguageInSubdir を false にしたためか、各コンテンツへのリンクへは言語を示す en などは書かなくてよかった。

（５）Tag、Category、Read more などの細かいパーツの翻訳は、以下のファイルをコピーして ja.yaml と名前を変更。そのファイルを編集して文言を日本語に変えればいい。

{プロジェクト名}/i18n/en.yaml

参考：
Multilingual mode | Hugo
https://gohugo.io/content-management/multilingual/

【HUGO】作成したWebページを多言語対応する | DevelopersIO
https://dev.classmethod.jp/articles/hugo-multilingual-mode/

Hugoで多言語サイトを作る - korinVR.com
https://korinvr.com/blog/2018/02/04/

hugoサイトの多言語化 | ユニコーンリサーチ
https://www.unicorn.limited/jp/rd/hugo/20220516-hugo-m17n

バスカヴィル家の犬 【新訳版】 シャーロック・ホームズ・シリーズ (創元推理文庫) | アーサー・コナン・ドイル, 深町 眞理子 | 英米の小説・文芸 | Kindleストア | Amazon
https://amzn.to/4bsGeVU