Skip to content

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-hans: Simplified Chinese
  • zh-hant: 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.

yaml
defaultContentLanguage: en

Create the translation configuration file

yaml
en:
  locale: en
  label: "English"
  weight: 1
  # Optional: Override the site-level dateFormat in params.yaml by language
  # params:
  #   dateFormat:
  #     long: "January 2, 2006"
  #     medium: "Jan 2, 2006"
  #     short: "01/02"

zh-hans:
  locale: zh-Hans
  label: "简体中文"
  weight: 2
  # Optional: Override the site-level dateFormat in params.yaml by language
  # params:
  #   dateFormat:
  #     long: "2006年1月2日"
  #     medium: "2006-01-02"
  #     short: "01-02"

Translation by File Name

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

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-hans.md as its Simplified Chinese translation.

yaml
content/
├── posts/
│   ├── my-first-post.md
│   ├── my-first-post.zh-hans.md
│   ├── my-first-post.ja.md
│   └── my-first-post.fr.md
├── about/
│   ├── _index.md
│   ├── _index.zh-hans.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:

yaml
languages:
  en:
    contentDir: content/english
    label: English
    weight: 10
  zh-hans:
    contentDir: content/zh-hans
    label: 简体中文
    weight: 20
yaml
content/
├── en/
│   ├── posts/
│   │   └── my-first-post.md
│   ├── about/
│   │   └── _index.md
│   └── _index.md
├── zh-hans/
│   ├── posts/
│   │   └── my-first-post.md
│   ├── about/
│   │   └── _index.md
│   └── _index.md
├── 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.