Aoki Hiroki

AOKI HIROKI

console.log('­čŹÖ');

Multilingural setting for Hugo

Learn how to configure multilingural setting for Hugo

aoki hiroki

5 minute read



Introduction

By Default, Hugo Future Imperfect Slim has English, French, and Portuguese settings. In this article, I’ll explain the procedure to increase the Japanese setting and deleting the French and Portuguese settings.

I’ll also explain the procedure to change the default language from English to Japanese.



Procedure



Add a toml file

Create an i18n(ÔÇ╗) toml file for Japanese.

Change to your preferred setting. You can delete French and Portuguese toml files.

ÔÇ╗ abbreviation of internationalization: how to read is “i eighteen n”

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



Update the config.toml

Open the config.toml, and comment out or remove French and Portuguese settings, and add a Japanese setting.

The default settings are as follows:


.
.
.

[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

.
.
.

Add the Japanese setting and comment out French and Portuguese settings.

$ 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

Change default language to Japanese.

Change the DefaultContentLanguage and [languages] of config.toml as follows:

$ 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

In this theme, country codes in front of the markdown file extension is linked to the language setting.

For example, article.en.md is displayed when the language “en” is selected, article.jp.md is displayed when the language “jp” is selected.

As an exception, when the default language is selected, contents without a country code (e.g. article.md) in front of the markdown file extension is also displayed.

So, when both the default language and the selected language are jp, article.jp.md and article.md are also displayed.

Therefore, it’s better to add a country code in front of the markdown file extension to make it easier to change the default language in the future.

# here is an example of the procedure for adding content

# create content for Japanese and edit it in the editor
$ hugo new blog/host-a-static-web-site-on-aws-s3.jp.md

# copy the completed article for English and translate in the editor
$ 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