Skip to content

Multilingual Jekyll

Li-Wei Yap edited this page Feb 3, 2023 · 6 revisions

Multilingual Jekyll

Tutorials

Multilingual 404 page & Banner with This website is also available in [other language]

With Jekyll we can only define one 404 page for all languages. Because of that, the translations for that page work a bit differently. We add copy in all supported languages to the 404 page’s front matter. Then using JavaScript and the browser’s locale, we guess what language is best shown. The <noscript> fallback simply shows text all languages.

(Source)

FYI, also in the same source:

When you visit the site in a what I assume is the wrong language, you’ll see a banner at the top suggesting you visit it your browser’s language—if that page has been translated. Once you manually navigate to a translation, this banner won’t bother you anymore. It also only appears for the first 3 pages viewed—after that I assume you actually understand the language you’re using.

That behavior is all JavaScript and not specific to Jekyll. It’s straightforward, so if you want to use that, you can just use what you find it the site’s script.js.

Code samples

Questions

  1. How do I get the sidebar to change the language?

Attempts

Translations

I tried the following:

_config.yml:

translations:
    projects:
        de: 'nebenprojekte'
    experience:
        de: 'berufserfahrung'
    credits:
        de: 'quellenangaben'

sidebar.html:

<a href="../de/{{ site.t[page.langref].de }}"><img src="../assets/germany.png" height="30px"></a>

But it doesn't work. 🙁