Aoki Hiroki

AOKI HIROKI

console.log('🍙');

Hugo Future Imperfect Slimの多言語対応設定

Hugo Future Imperfect Slimの多言語対応設定についての記録

aoki hiroki

4 minute read



Introduction

Hugoサイトを多言語対応した際の記録を残す。

Hugo Future Imperfect Slimにはデフォルトで英語・フランス語・ポルトガル語の設定が存在するが、日本語用の設定を増やしてフランス語・ポルトガル語の設定を削除する手順を説明する。

最後に、デフォルト言語を英語から日本語に変更する手順についても説明する。



Procedure



Add a toml file

日本語用のi18n(※)のtomlファイルを作成する。

設定の変更は任意。フランス語・ポルトガル語のtomlファイルは消してもよい。

※ internationalizationの略。読み方はアイエイティーンエヌ。

$ cp themes/hugo-future-imperfect-slim/i18n/en.toml themes/hugo-future-imperfect-slim/i18n/jp.toml



Update the config.toml

config.tomlを開き、フランス語・ポルトガル語の設定をコメントアウトか削除し、日本語の設定を追加する。

デフォルトの設定は下記のようになっている。


.
.
.

[Languages]
  # Each language has its own menu.
  [Languages.en]
    languageCode        = "en"
    LanguageName        = "English"
    weight              = 1

  [Languages.jp]
    languageCode        = "fr"
    LanguageName        = "Français"
    title               = "Hugo Future Imperfect Slim in fr"
    description         = ""
    weight              = 2

    [[Languages.fr.menu.main]]
      name              = "Accueil"
      url               = "/"
      identifier        = "fas fa-home"
      weight            = 1

    [[Languages.fr.menu.main]]
      name              = "About"
      url               = "/about/"
      identifier        = "far fa-id-card"
      weight            = 2

    [[Languages.fr.menu.main]]
      name              = "Blog"
      url               = "/blog/"
      identifier        = "far fa-newspaper"
      weight            = 3

    [[Languages.fr.menu.main]]
      name              = "Catégories"
      url               = "/categories/"
      identifier        = "fas fa-sitemap"
      weight            = 5

    [[Languages.fr.menu.main]]
      name              = "Contact"
      url               = "/contact/"
      identifier        = "far fa-envelope"
      weight            = 6

  [Languages.pl]
    languageCode        = "pl"
    LanguageName        = "Polskie"
    title               = "Hugo przyszłość niedoskonała"
    description         = "Motyw HTML5 UP, przeniesiony przez Julio Pescadora i wzbogacony przez Patricka Collinsa. Wielojęzyczny przez StatnMap. Zasilany przez Hugo."
    weight              = 2

    [[Languages.pl.menu.main]]
      name              = "Home"
      url               = "/"
      identifier        = "fas fa-home"
      weight            = 1

    [[Languages.pl.menu.main]]
      name              = "O mnie"
      url               = "/about/"
      identifier        = "far fa-id-card"
      weight            = 2

    [[Languages.pl.menu.main]]
      name              = "Blog"
      url               = "/blog/"
      identifier        = "far fa-newspaper"
      weight            = 3

    [[Languages.pl.menu.main]]
      name              = "Kategorie"
      url               = "/categories/"
      identifier        = "fas fa-sitemap"
      weight            = 5

    [[Languages.pl.menu.main]]
      name              = "Kontakt"
      url               = "/contact/"
      identifier        = "far fa-envelope"
      weight            = 6

.
.
.

日本語の設定を追加し、フランス語・ポルトガル語の設定をコメントアウトする。

$ vi config.toml

.
.
.

[Languages]
  # Each language has its own menu.
  [Languages.en]
    languageCode        = "en"
    LanguageName        = "English"
    weight              = 1

  [Languages.jp]
    languageCode        = "jp"
    LanguageName        = "Japanese"
    title               = "" # dislpay in the browser tab
    description         = ""
    weight              = 2

#    [[Languages.fr.menu.main]]
#      name              = "Accueil"
#      url               = "/"
#      identifier        = "fas fa-home"
#      weight            = 1

#    [[Languages.fr.menu.main]]
#      name              = "About"
#      url               = "/about/"
#      identifier        = "far fa-id-card"
#      weight            = 2

#    [[Languages.fr.menu.main]]
#      name              = "Blog"
#      url               = "/blog/"
#      identifier        = "far fa-newspaper"
#      weight            = 3

#    [[Languages.fr.menu.main]]
#      name              = "Catégories"
#      url               = "/categories/"
#      identifier        = "fas fa-sitemap"
#      weight            = 5

#    [[Languages.fr.menu.main]]
#      name              = "Contact"
#      url               = "/contact/"
#      identifier        = "far fa-envelope"
#      weight            = 6

#  [Languages.pl]
#    languageCode        = "pl"
#    LanguageName        = "Polskie"
#    title               = "Hugo przyszłość niedoskonała"
#    description         = "Motyw HTML5 UP, przeniesiony przez Julio Pescadora i wzbogacony przez Patricka Collinsa. Wielojęzyczny przez StatnMap. Zasilany przez Hugo."
#    weight              = 2

#    [[Languages.pl.menu.main]]
#      name              = "Home"
#      url               = "/"
#      identifier        = "fas fa-home"
#      weight            = 1

#    [[Languages.pl.menu.main]]
#      name              = "O mnie"
#      url               = "/about/"
#      identifier        = "far fa-id-card"
#      weight            = 2

#    [[Languages.pl.menu.main]]
#      name              = "Blog"
#      url               = "/blog/"
#      identifier        = "far fa-newspaper"
#      weight            = 3

#    [[Languages.pl.menu.main]]
#      name              = "Kategorie"
#      url               = "/categories/"
#      identifier        = "fas fa-sitemap"
#      weight            = 5

#    [[Languages.pl.menu.main]]
#      name              = "Kontakt"
#      url               = "/contact/"
#      identifier        = "far fa-envelope"
#      weight            = 6

.
.
.

:wq # save



Change priority

日本語をデフォルト言語に変更する。

config.tomlのDefaultContentLanguageと、Languagesを下記のように修正。

$ vi config.toml

baseurl                 = "http://it.aotree.blue/"
DefaultContentLanguage  = "jp" # <- change this value
title                   = "Aoki Hiroki"
theme                   = "hugo-future-imperfect-slim"
preserveTaxonomyNames   = true
paginate                = 3
disqusShortname         = ""
googleAnalytics         = ""
pluralizeListTitles     = false
disableLanguages        = [""]

.
.
.

[Languages]
  # Each language has its own menu.
  [Languages.jp]
    languageCode        = "jp"
    LanguageName        = "Japanese"
    weight              = 1 # <- change this value

  [Languages.en]
    languageCode        = "en"
    LanguageName        = "English"
    title               = "Aoki Hiroki"
    description         = ""
    weight              = 2 # <- change this value

.
.
.

:wq # save



Add a post

このテーマでは、markdownファイルの拡張子の前に国コードを入れることで、現在選択中の言語で表示するコンテンツを制御している。

例えば、article.en.mdは言語enを選択しているときに表示され、article.jp.mdは言語jpを選択しているときに表示される。

例外としてデフォルト言語を選択している場合には、拡張子の前に国コードがないコンテンツも表示される。

例えば、デフォルト言語がjpで言語jpを選択しているときには、article.jp.mdでもarticle.mdでも表示される。

ただし、将来的にデフォルト言語を変えてもいいように、拡張子の前の国コードは付けておいた方が良い。

# コンテンツを追加する手順の例を示す

# 日本語用のコンテンツを作成し、エディタで内容を編集する
$ hugo new blog/host-a-static-web-site-on-aws-s3.jp.md

# 完成した記事を英語用に複製して、エディタで翻訳する
$ cp blog/host-a-static-web-site-on-aws-s3.jp.md blog/host-a-static-web-site-on-aws-s3.en.md

Recent posts

Categories

About

profile and works