【HUGO】作成したWebページを多言語対応する
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
前回は新規プロジェクトを作成し、Firebaseにデプロイするところまでやりました。
今回は作成したWebページを多言語対応する方法についてまとめました。
プロジェクトを作成
前回と同じ手順で新規プロジェクトを作成し、テンプレートをthemesディレクトリにクローンします。
新規プロジェクトを作成
hello-hugoという名前のプロジェクトを作成します。
~hugo_localize> hugo new site hello-hugo Congratulations! Your new Hugo site is created in /hugo_localize/hello-hugo. Just a few more steps and you\'re ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
テンプレート(Theme)をクローン＆config.tomlで設定
作成したプロジェクトのthemesディレクトリへテンプレートをクローンします。
~/hugo_localize> cd hello-hugo/themes ~/h/themes> git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke Cloning into 'themes/ananke'... remote: Enumerating objects: 15, done. remote: Counting objects: 100% (15/15), done. remote: Compressing objects: 100% (14/14), done. remote: Total 1402 (delta 3), reused 5 (delta 1), pack-reused 1387 Receiving objects: 100% (1402/1402), 4.15 MiB | 2.99 MiB/s, done. Resolving deltas: 100% (753/753), done. // Themeを設定 ~/h/themes> echo 'theme = "ananke"' >> config.toml
_index.mdを作成
Homeページをcontents下に作成します。
contentsディレクトリに_index.mdファイルを作成して
内容を以下のように設定してください。
--- description: "日本むかし話" --- # もも太郎 昔あるところに、 おじいさんとおばあさんが住んでいました。 ある日、おばあさんが川で洗濯をしていると、川上から、大きな（巨大な）ももが、どんぶらこっこ、どんぶらこっこと流れてきました。 おばあさんは、ももを家に持って帰ると、 おじいさんと食べようとわってみました。 すると、おどろいたことに、 元気な男の子がももから現われました。 おじいさんとおばあさんは、 「ももから生まれたから、桃太郎と名づけよう。」と言いました。
反映されているかブラウザ上で確認します。
言語に関する設定をまだ何もしていないのでデフォルトで"EN"となっています。
hugo server -D
| EN
+------------------+----+
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 20 ms
Watching for changes in /hugo_localize/hello-hugo/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /hugo_localize/hello-hugo/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
このプロジェクトを多言語対応してゆきます。
config.tomlで設定
config.tomlに設定を追加します。
baseURL = "http://example.org/"
title = "My New Hugo Site"
theme = "ananke"
DefaultContentLanguage = "ja"
[languages]
[languages.en]
languageName = "English"
weight = 10
title = "Japanese Old Tales"
[languages.ja]
languageName = "Japanese"
weight = 20
title = "日本むかし話"
英語ページを作成
先ほど作成した_index.mdの英語版を作成します。
名前は_index.en.mdで保存します。
--- description: "The Peach Boy" --- # The Peach Boy Once upon a time, there lived an old couple in a small village. One day the old wife was washing her clothes in the river when a huge peach came tumbling down the stream. The old woman brought the peach home and cut it up to share with her husband. To their great surprise, a healthy baby boy came right out of the peach! The old couple said, “Let’s name him Momotaro (Peach-boy) as he was born from a peach.”
日本語ページのファイル名を変更
先ほど_index.mdの名前で作成した日本語のファイルを
_index.ja.mdへ変更してください。
ブラウザで確認
先ほどのコマンドをもう一度叩いてみます。 日本語ページに加え英語ページのリソースが追加されているのが確認できます。
hugo server -D
| EN | JA
+------------------+----+----+
Pages | 7 | 7
Paginator pages | 0 | 0
Non-page files | 0 | 0
Static files | 3 | 3
Processed images | 0 | 0
Aliases | 1 | 0
Sitemaps | 2 | 1
Cleaned | 0 | 0
右端部分に英語ページが表示されているのがわかりますね。
このテンプレートは自動的にメニューに追加してくれる仕組みになっているようですが、 仕様によっては自分で追加する必要があります。
config.tomlのDefaultContentLanguageでデフォルトの言語を設定することができます。
今回は日本語をデフォルトに設定したので日本語ページが表示されました。
英語ページはこのように表示されます。
