Actually Made This Blog Multilingual Three Years Ago

This is a continuation of the blog rebuilding article.

Re-Builded the Blog with Jekyll + Netlify + Github | acotie.me

First

I would like to write this article as memorandum, which was actually created on this blog three years ago and was already published with multilingual implementation already in place.

Why do I want to make it?

• Wanted to write in English to study English.
• I wanted to make it in English because I was working for a foreign company at the time and had many opportunities to get to know people from overseas

Libraries In Used

After trying several libraries that can be extended for Jekyll, I decided to use this library called polyglot. untra/polyglot: :abc: Multilingual and i18n support tool for Jekyll Blogs

Candidate Libraries

• untra/polyglot: :abc: Multilingual and i18n support tool for Jekyll Blogs
• kurtsson/jekyll-multiple-languages-plugin: I18n support for Jekyll and Octopress

Until Added

Follow the instructions in the polyglot README

untra/polyglot: installation

Add gem "jekyll-polyglot" to group :jekyll_plugins in Gemfile

1
2
3
4
5
# If you have any plugins, put them here!
group :jekyll_plugins do

  gem "jekyll-polyglot"
end

Add the following to plugins in _config.yml

1
2
plugins:
- jekyll-polyglot

Add the following settings to _config.yml referring to Configuration

In languages add an array of languages you want to support, and in exclude_from_localization specify the folders and files you want to exclude based on the template.

1
2
3
4
5
6
7
8
# Lang
languages: ["ja", "en"]
default_lang: "ja"
exclude_from_localization: [ "img" , "js", "javascript", "images", "css", "public", "fonts"]
parallel_localization: true
sass:
    sourcemap: never
lang_from_path: true

Usage

When you create a post in Jekyll, you add a Markdown file to your blog post in the _posts folder. As an example, here’s what it looks like (File names are taken from How To Use It)

• Old: _posts/2010-03-01-salad-recipes.md
• New: _posts/2010-03-01-salad-recipes-en.md

If you create a new _posts/2010-03-01-salad-recipes-en.md, add *-en.md i18n for the language you want to support multilinguality to the end of what was normally date+title.md.

If you do this, add the following to the actual _posts/2010-03-01-salad-recipes-en.md article content.

permalink: /salad-recipes and lang: en are required.

Example: _posts/2010-03-01-salad-recipes-en.md

1
2
permalink: /salad-recipes
lang: en

Extend further

Based on the following sample code in the translation permalink information in page section, incorporate it into your template.

Add it to _layouts/post-sidebar.html of the template to create the article switch section.

__layouts/post-sidebar.html

1
2
3
4
5
6
        <! -- Lang Switcher -->
        
        <span style="font-size:1.8rem"><a  ferh="/add-multiple-lang-for-blog" >ja</a> |</span>
        
        <span style="font-size:1.8rem"><a style="font-weight: bold;" ferh="/en/add-multiple-lang-for-blog" >en</a> |</span>
        

I was able to create a switcher like this that the language of the menu within the article post!