Is there a good example for overlay localization with Hugo?

support
1

Hello,

I’m working with a large website and trying to learn what a good pattern could be to support “overlay localization” - by that, I mean we have the main content for our site in english (and it gets frequent updates), and we would like to also support translated content (chinese). Ideally I would like to find a example/scheme where if the content was available in chinese it would be provided, but if not available (and chinese was “desired” - not sure if that means URI changes, etc) the english content could be displayed with a note that this page/content has not yet been translated.

The content is broad-reaching and diverse, so not really very appropriate to stuff into strings files for classic localization efforts.

Has anyone enabled dual-language sites with Hugo and have some patterns they are willing to share on how to achieve this kind of “overlay” setup with multiple languages?

2

If you have English as the default language, and add a file with the language suffix where the page has been translated, you can then show/hide a menu link depending upon translation availability.

Like:

page1.md
page1.zh.md
page2.md
page3.md
page4.md
page4.zh.md

In the site I just launched an hour ago, last month was all about using these functions to add English. In my case, all the pages are translated, but, it does work to not have a translated page, I noticed.

3

This is what I have in config.toml, specifying a defaultContentLanguage:

baseURL = "http://thesite.jp"
defaultContentLanguage = "ja"
languageCode = "ja-jp"
enableGitInfo = "true"
enableemoji = "false"

[permalinks]
  post = "/:year/:month/:day/:slug/"
  page = "/:filename/"

[params]
    sitedescription = "blahblah"
    keywords = "blahblah"
    # various defaults …

[taxonomies]
  tag = "tags"

[languages]
[languages.ja]
languageName = "日本語"
title = "XYZ部会"
weight = 1
author = "XYZ部会 事務局"

[languages.en]
languageName = "English"
title = "XYZ Committee"
weight = 2
author = "XYZ Committee Office"
4

You could do something like I did in the menu here, to present a language switch button:

This is simple, and assumes a two-language site but, you might be able to adapt. More languages would need a more sophisticated menu structure.

5

A quick note that Hugo supports translations on many levels (string bundles, layout files, static directories, images and other resources in bundles).

What I suspect this is about is content files

And currently, when you do this in your Chinese translated version of your site:

{{ range .Site.RegularPages }}
..
{{ end }}

You will get only Chinese pages.

This is slightly related to Crosspost a post on multiple languages on multilingual sites · Issue #2529 · gohugoio/hugo · GitHub

What you currently can possibly do is to start from the language you know have all translations, and create a nested loop. But that gets complicated pretty fast (when you have content in Chinese, but not in English).

I have created this issue to create a simpler way:

Please chime in with your thoughts on that issue.

1 Like