Jekyll Multilingual Site: From Logical Statements to Table-Driven Methods

Technology engineering module Technology engineering module Follow Jun 19, 2019 · 4 minutes read
Jekyll Multilingual Site: From Logical Statements to Table-Driven Methods

In previous article, we point out that a static site consists mainly of three parts. In this article, we will further discuss the application scenarios of logic statements and table-driven methods in the process of building internationalized sites by using the built-in Liquid language.

Github pages use Jekyll to build static sites, and officially do not provide multi-language support. Although there are many ways to generate Jekyll sites locally, such as using plugins, etc., Github Pages works in safe mode in which most of the Jekyll plugins can not work, and a feasible solution is to modify the html files to provide users with different interfaces.

In this regard, Anthony Granger and DJ Walker has given good guidance and I suggest you read it carefully. I think it is necessary to continue further discussion on the different treatment options for the pages and articles they give in the articles.

1. Logic for multilingual static sites

Due to the lack of a database, multi-language of static sites can only be provided through different pages, which requires us to provide (at least) two sets of pages. Different web pages are represented by different URLs on the client side, so the core logic of multi-language is that the user jumps to the content page of the corresponding language by clicking the language button on. Take this site as an example, at least the following two points are required:

  1. Page, that is, pages in other languages, such as: ->
  2. Content, that is, localization of page content, such as: in index.html -> in zh/index.html

Of course we can write all the pages by hand, but such an old scheme is basically no one used. Our goal now is to automate this task with Jekyll:

1.1 Page

For the first point, we provide a set of language pages by creating a new folder in the root directory. A brief review of what we are talking about in Basic Structure of Static Websites:

The HTML pages in Jekyll can be roughly divided into four categories: articles, basic pages, layouts, components, where articles and basic pages are displayed directly on the user terminal. We use the different layout (1.1) references to distinguish the first two, the article belongs to the daily updated user content (1.3), and the basic page (1.1) constitutes the basic structure of the website. In addition, any page (including other components) can reference component (1.1). (Note: 1.1-HTML/CSS/JS; 1.2-Configuration File; 1.3- User Content.).

Therefore, in the newly created folder, we need to give the language copy of the article and the basic page to provide the user with a page with a different URL address. For layouts and components that are not directly exposed to the client, we usually do not create multi-language copies.

Finally, we need to set two new metadata in each article and basic page: the language of this page (such as lang: zh), the content of this page (such as i18n-link: jekyll-i18n).

1.2 Content

After getting the multi-language page, we can localize the content, including content filtering, text and links.

  • Content Filtering: Only articles in this language are displayed on the page;
  • Text and links: Text in this language, and its links point to other pages in the same language.

There are currently two processing options, one is manual modification (only for pages with duplicates, ie articles and basic pages), and the other is for all pages that rely on the Liquid language to automatically set content. Regarding the former, we will not say more. The following focuses on how to use the Liquid language to automatically set related content.

2. Logical language and table-driven methods

The Liquid language 1 has a variety of syntaxes, and we usually use looping statements when defining content on a page. Since text and links in multi-language sites mainly involve different options, here we mainly discuss the selection statement:

The “if…else…” logical language:


{% if pang.lang == "en" %}
    The page language is English.
{% else %}
    The page language is Chinese.
{% endif %}

The table-driven methods:


The page language is {{ site.translate['lang'][page.lang] }}.

# _config.yml
    en: "English"
    zh: "Chinese"

In both cases, the results we get are The page language is English.. It can be seen that it is more convenient to use a logical language in a simple scenario, and the advantage of the table-driven approach is that the logic and data are separated, making future modifications more convenient.

3. Summary

Overall, the way to build a multilingual Jekyll site is:

  1. Create a language folder with a copy of the article and the basic pages;
  2. Add metadata to the above pages: page language code, page content code;
  3. Article page: Manually localizing user content;
  4. Basic page, layout, component: Prefer to use the table-driven method in the Liquid language (instead of “if…else…” logic statement);
  5. For content filtering, use the Liquid logic statement.

Above, we have given suggestions for the operation of establishing the Jekyll Internationalization Site.

  1. Basic syntax of Liquid: 

Bian Wenbo - Newsletter
Get the latest news right in your inbox. I never spam!
Technology engineering module
Written by Technology engineering module Follow
Moore's Law needs to double every 18 months? As AI, I only need to double it for 3.5 months! What is the tool?