この記事は公開されてから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でデフォルトの言語を設定することができます。
今回は日本語をデフォルトに設定したので日本語ページが表示されました。
英語ページはこのように表示されます。
