Multilingual

Hugo Narrow supports the multilingual sites, with a toggle button available in the navigation bar for language switching.

Currently, Hugo Narrow supports the following languages:

ar: Arabic
de: German
en: English
es: Spanish
fr: French
it: Italian
ja: Japanese
ko: Korean
pt: Portuguese
ru: Russian
vi: Vietnamese
zh-cn: Simplified Chinese
zh-tw: Traditional Chinese

Note

The translation is generated by AI. Feel free to open an issue or submit a PR if you wish to add to or refine the translation.

To set up a multilingual site, you first need to configure the default language in the site configuration.

hugo.yaml

defaultContentLanguage: zh-cn

Create the translation configuration file

languages.yaml

en:
  languageCode: en-US
  languageName: "English"
  weight: 1

zh-cn:
  languageCode: zh-CN
  languageName: "简体中文"
  weight: 2

ja:
  languageCode: ja-JP
  languageName: "日本語"
  weight: 3

fr:
  languageCode: fr-FR
  languageName: "Français"
  weight: 4

Hugo supports two primary approaches to organizing multilingual files: file name translation and directory translation. Each approach has its own advantages and applicable scenarios.

Translation by File Name

If you have an article named content/posts/my-first-post.md, you can specify a language suffix before the file extension to create content/posts/my-first-post.zh-cn.md as its Simplified Chinese translation.

content/
├── posts/
│   ├── my-first-post.md
│   ├── my-first-post.zh-cn.md
│   ├── my-first-post.ja.md
│   └── my-first-post.fr.md
├── about/
│   ├── _index.md
│   ├── _index.zh-cn.md
│   ├── _index.ja.md
│   └── _index.fr.md
└── _index.md

Translation by Content Directory

Translation by content directory need to specify the content directory of translation:

languages.yaml

languages:
  en:
    contentDir: content/english
    languageName: English
    weight: 10
  zh-CN:
    contentDir: content/zh-CN
    languageName: 简体中文
    weight: 20

content/
├── en/
│   ├── posts/
│   │   └── my-first-post.md
│   ├── about/
│   │   └── _index.md
│   └── _index.md
├── zh-cn/
│   ├── posts/
│   │   └── my-first-post.md
│   ├── about/
│   │   └── _index.md
│   └── _index.md
├── ja/
│   ├── posts/
│   │   └── my-first-post.md
│   ├── about/
│   │   └── _index.md
│   └── _index.md
└── fr/
    ├── posts/
    │   └── my-first-post.md
    ├── about/
    │   └── _index.md
    └── _index.md

Note

By this way, the content directory has more level, see Hugo Documatation for more deatils.

Menus Features