A client asked us to convert their site from Japanese to add English translations for most pages, and Hugo made it easy to get the basic site working. I thought I’d mention it here in case someone was working through the same task.
This assumes a simple site with only two languages. If there’s a better way to go about this, I’d love to hear it.
First, I set up config.toml
per Multilingual Mode in the docs. The relevant bits for now:
baseURL = "http://thesite.jp"
defaultContentLanguage = "ja"
…
[languages]
[languages.ja]
languageName = "日本語"
title = "私達のサイト"
weight = 1
[languages.en]
languageName = "English"
title = "Our Site"
weight = 2
This ensures Japanese pages will be under http://thesite.jp
while English ones will be under http://thesite.jp/en/
. Japanese is the default, here.
Next I translated a couple of pages, simply copying, say, about.md
to about.en.md
. Inside the frontmatter of the English one, I translated the title. Then I added a little English content in the body, for testing.
---
date: 2018-02-01T00:00:27+09:00
draft: false
tags:
- about
title: About Us
description: About us, blah blah.
menu:
main:
name: About Us
url: /about/
weight: 20
footer:
name: About Us
url: /about/
weight: 20
---
# About Us
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. …
I did not have to change the menu url’s from /about/
to /about/en/
, because I’ll use absLangURL
later, which gets the right path for the current language.
Next, I wanted my nav to have a language switcher, so I changed my partial like this:
{{ "<!-- ENTERING partial nav-main.html -->" | safeHTML }}
<nav class="classa classb">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<a class="classc classd {{if $currentPage.IsMenuCurrent "main" . }} highlighted{{else}} nothighlighted{{end}}" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{ end }}
{{ if .IsTranslated }}
{{ range .Translations }}
<a class="classe" href="{{ .Permalink }}">{{ .Site.Language.Params.languageName }}</a>
{{ end }}
{{ else }}
{{ $currentLang := .Site.Language.Lang }}
{{ if eq $currentLang "en" }}
<a class="classe" href="/">日本語</a>
{{ else }}
<a class="classe" href="/en/">English</a>
{{ end }}
{{ end }}
</nav>
{{ "<!-- LEAVING partial nav-main.html -->" | safeHTML }}
The first bit is just making links from anything attached to the main
menu, per the docs. Then to add the language switcher link, I check if there’s a translation on the page, and if there is, range over the translations (remember, there’s a max of one other translation in this site), and put its link and the language name from config.toml
in the <a>
tag in the nav.
Notice the href="{{ .URL | absLangURL }}"
. This gets the right url for whatever language you’re on. Slick.
If there’s no translation, which is likely going to be the case from time to time, then I wanted to simply point the visitor at the top of the site. To do this I did a check of the current language, and just created a hard coded href
to link to home for either language.
I have a feeling there’s a cooler way of doing it but, I’m tired now. The above works, anyway.