HUGO

Single-Domain Bilingual Site 20180205

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. :slight_smile: The above works, anyway.

Hello Rick,

I am also looking for a solution to this question. I don’t know how I do I program the language switch. Did you also implement a switch on the side, so that also manually can switch the language? I am thankful for every hint.

I have this content in my config.toml

# Language configuration
defaultContentLanguage = "en"

[languages]
    [languages.en]
        title = "Company"
        languageName = "English"
        languageCode = "en-us"
        linkedin = "en"
        weight = 1 

    [languages.de]
        title = "Unternehmen"
        languageName = "Deutsch"
        languageCode = "de-de"
        linkedin = "de"
        weight = 1 

In the directories /de and /en the content for the language pages.

here the frontmater for the english site:

---
title: "Imprint"
date: 2017-12-05T14:45:43+01:00
draft: false
menu:
  footer:
     name: Imprint
     url: /en/imprint/
     weight: 1
---

here the frontamter for the german site:

---
title: "Impressum"
date: 2018-01-14T15:08:33+01:00
draft: false
menu:
  footer:
     name: Impressum
     url: /de/impressum/
     weight: 1
---

@Joerg, uh, what I wrote works. You can use the code I wrote in a sidebar. I happen to be styling <a> tags inside a <nav> tag but, you could put the template code in whatever structure you need, like <li> tags.

Thank you Rick,

Your code snippet works fine. Thank you. I have in the folder /content/de all files named impressum.de.md. In /en/imprint.en.md. When I open the browser I see http://localhost:1313/homepage/ an empty page. When I klick the home button http://localhost:1313/homepage/en/home/ I see the english home site. When I klick the language switch to the Language Deutsch http://localhost:1313/homepage/de/. When I klick the start button http://localhost:1313/homepage/de/start/ I see 404 page not found.

Here the frontmater for start.de.md

---
title: "Start"
date: 2018-02-03T18:05:27+01:00
draft: false
menu:
  main:
     name: Start
     url: /de/start/
     weight: 1
---

The frontmater home.en.md

---
title: "Home"
date: 2017-12-11T05:20:45+01:00
draft: false
menu:
  main:
     name: Home
     url: /en/home/
     weight: 1
---

config.toml

[languages]
    [languages.en]
        title = ""
        languageName = "English"
        languageCode = "en-us"
        linkedin = "en"
        weight = 1

    [languages.de]
        title = ""
        languageName = "Deutsch"
        languageCode = "de-de"
        linkedin = "de"
        weight = 1