Abdulmomen's Blog مدونة عبدالمؤمن

Multilingual Blogging with Hexo

Before your start, you should have a basic understanding of Hexo. Please see Hexo setup, usage and Internationalization (i18n).

We’ll assume you want to write in English (en) and Arabic (ar) posts.

First of all, we’ll modify your current _config.yml file

_config.yml

The _config.yml of your blog should contain the language attributes, like

language:
- en
- ar
locale: en
i18n:
type: [page, post]
generator: [index, archive, category, tag]
permalink_defaults:
lang: en
i18n_dir: :lang

locale: en or locale: ar for example, determines the langauge of your blog. Now we should have the theme language files defined.

i18n theme localizations

To do this, inside your current themes directory, you should have the languages of your site in the languages directory.

.
├── themes
| └── theme-name
| | └── languages
| | | └── en.yml
| | | └── ar.yml

If you don’t find the target language you want, for example, the Arabic language is not found, you can duplicate the en.yml file to ar.yml and translate its words.

At the time of this writing, this blog uses Rexo theme, that has support for left-to-right (LTR) and right-to-left (RTL) writings.

Creating multilingual posts

Let’s suppose we want to write a new English article about Kotlin lambdas,
hexo new 'Kotlin lambdas' --lang en
this will creates a new post of the English version at _posts/en/Kotlin-lambdas.md

and then
hexo new 'Kotlin lambdas' --lang ar
that creates the Arabic version in _posts/ar/Kotlin lambdas.md,

and so the files structure will be like this

.
├── source
| └── _posts
| | └── en
| | | └── Kotlin-lambdas.md
| | └── ar
| | | └── Kotlin-lambdas.md

Mixed left-to-right (LTR) and right-to-left (RTL) wirtings

Unlike English, the Arabic language is written from right-to-left (RTL language). So, writing Arabic content inside English one will make the Arabic flows in the same as the English direction, which is wrong.

There are two tag plugins that foce RTL or LTR direction used when writing.

hexo-tag-rtl

You can use it to force RTL layout direction when used in a mixed with LTR (i.e., English).

If you have an English text and you want to add Arabic inside of it:

{% rtl %}
مقتطفات من بعض الحكم
{% endrtl %}

“A small leak will sink a great ship.” - Benjamin Franklin

{% rtl %}
"لو أنك عشتَ في الماضي و تصرفت كأنك في الماضي ، سوف يكون صعباً على المُستقبلِ أن يراكَ." - Body of Lies
{% endrtl %}

hexo-tag-ltr

Is the inverse to the above one.

Now, if you have an Arabic text and you want to write English inside:

مقتطفات من بعض الحكم

{% ltr %}
“A small leak will sink a great ship.” - Benjamin Franklin
{% endltr %}

"لو أنك عشتَ في الماضي و تصرفت كأنك في الماضي ، سوف يكون صعباً على المُستقبلِ أن يراكَ." - Body of Lies

And that is it!

You can see the blog source code in order to understand how writing mixed RTL and LTR languages is done.

If you found anything unclear or there are discrepancies, please let me know about it in the comments 😇