3年前にブログの多言語化対応を実はしていた話

ブログ再構築の記事の続きです。

ブログの再構築を Jekyll + Netlify + Github で行った話 | acotie.me

注意

今回の記事は3年前にこのブログ上で実際に作ったことで、すでに多言語化対応済みで公開している状態でしたがまとめたいと思います。

なぜ作りたいのか？

• 英語の勉強のために英語で文章が書きたいと思ったこと
• 当時外資系企業に在籍しており海外の方と知り合う機会が多かったため英語化をしたいと思った

使用ライブラリ

Jekyllに対して拡張できる複数ライブラリを試して、私はこのpolyglotというライブラリを使うことにしました。 untra/polyglot: :abc: Multilingual and i18n support tool for Jekyll Blogs

候補ライブラリ

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

追加するまで

polyglotのREADMEの通りにすすめていきます

untra/polyglot: installation の通り、

Gemfile の group :jekyll_plugins に gem "jekyll-polyglot"を追加

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

  gem "jekyll-polyglot"
end

_config.yml のpluginsに以下を追加する

1
2
plugins:
- jekyll-polyglot

Configurationを参考に _config.yml に以下の設定を追加する

languages には対応したい言語の配列を追加し、 exclude_from_localization にはテンプレートを元に除外したいフォルダ、ファイルを指定します。

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

使い方

Jekyllで記事を作る場合、ブログ記事は _posts フォルダ内にMarkdownファイルを追加をします。例として、以下のようなイメージです。(ファイル名は How To Use Itより引用)

• 旧: _posts/2010-03-01-salad-recipes.md
• 新: _posts/2010-03-01-salad-recipes-en.md

新の _posts/2010-03-01-salad-recipes-en.mdを作成した場合、通常は 日付+タイトル.mdだったものの最後に *-en.md 多言語対応したい言語のi18nを追加します。

これをすれば、実際の _posts/2010-03-01-salad-recipes-en.md の記事の内容に下記を追加する。

permalink: /salad-recipes と lang: en は必要です。

例 _posts/2010-03-01-salad-recipes-en.md

1
2
permalink: /salad-recipes
lang: en

さらに拡張する

Translation permalink information in pageセクション内の以下のサンプルコードを元に、テンプレートに組み込みます。

テンプレートの _layouts/post-sidebar.htmlに追加して記事のスイッチ部分を作っていく。

_layouts/post-sidebar.html

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

記事の投稿内にメニューの言語切り替えする ` ja | en ` のスイッチャーができました！