Skip to content

How to define languages

alessandro contini edited this page Oct 4, 2017 · 5 revisions

The website languages are defined in the file _config.yml in the root folder of the gh-pages branch.

Define the homepage of all languages used in the website

In this snippet of code you can set the path to the homepage of all the various languages that you want to translate the website to:

# multilingual stuff
index:
  en:
  it: it/index.html

In this specific case: * English will be the main language and will point to the index.html file that already exists in the root of any jekyll based website * Italian will be the second language, and the translated italian homepage index.html will live inside a folder called /it/

The naming of languages will follow the i18n standard, for a complete of the language abbreviations please refer to this link

Define the default language

You can set the website default language with the following string of code

default_lang: "en"

The default language and the language of the index.html in the root folder needs to be the same!

Translate pages, aka define the language in all the pages of the website

It is also needed to define the language in all of the pages of the website that have a translation, the frontmatter of the files will come handy to do that.

Take the homepage as an example, the English index.html in the root directory will show the following frontmatter at the top of the code

---
layout: home
title: Home
published: true
ref: index
lang: en
---

While the Italian index.html that lives inside the /it/ folder will show the following frontmatter at the top of the code instead

---
layout: home
title: Home
published: true
ref: index
lang: it
---

Please pay attention to the ref: and lang: tags

  • lang: it means that this page is in Italian
  • ref: index means that this page is the translation of whatever other page will be found in the website with the ref: index tag (in our case we have only one other page with that tag, the English one, but we could have multiple)

The same concept applies to all other pages, see the About page for instance:

  • English About page at /about/index.md
---
layout: default
title: About
published: true
ref: about
lang: en
---
  • Italian About page at /it/about/index.md
---
layout: default
title: About
published: true
ref: about
lang: it
---

Language folder

Any of the languages, apart from the default language, need to have a language folder where all the translated pages and posts live.

For instance, the Italian language will have its own /it/ folder with the following content

it
|
├── _posts
|      └── example-post.md
├── about
|      └── index.md
├── blog
|      └── index.html
├── categories
|      └── example-category.html
├── pages
|      └── example-page.html
├── 404.html
└── index.html

The files above represent the basic ones you will need to translate from the default language to have a translated website.

Clone this wiki locally