Documentation

Multiple languages translation in Docusaurus

Photo by Andrea Rodriguez on Unsplash

Docusaurus is a very convenient framework for building websites when it comes to documentation or blogging. Often in times, we need to have multiple translation support due to a wide range of audience.

Docusaurus now has version 2, but it is still alpha, so there is some functionality like translation is not well supported.

In this post, to demonstrate how to apply translation in Docusaurus, we will use version 1.

First we need to go over how Docusaurus apply translation. It comes with Crowdin support.

Crowdin Homepage

We need to create a new account and a project in crowdin. In order to work with Docusaurus, we need to get the Project_ID and API_Token from crowdin.

For project_id, navigate to https://crowdin.com/project/your_project_name/settings#api.

For api_token, navigate to https://crowdin.com/settings#api-key to generate the token.

For example we want to translate our documentation site to Vietnamese, the crowdin.yaml file would look like below

In order to translate, we need to upload the documentation of our project to crowdin by

CROWDIN_DOCUSAURUS_PROJECT_ID=$PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=$API_KEY crowdin upload

To download

CROWDIN_DOCUSAURUS_PROJECT_ID=$PROJECT_ID CROWDIN_DOCUSAURUS_API_KEY=$API_KEY crowdin download

To enable the language displayed in the page, create language.js in website folder in our repository

const languages = [
{
enabled: true,
name: 'English',
tag: 'en',
},
{
enabled: true,
name: 'Tiếng Việt',
tag: 'vi',
},
];

const onlyEnglish = [
{
enabled: true,
name: 'English',
tag: 'en',
},
];

And let’s build the documentation by

npm start

The documentation will look like this ( from official page of docusaurus 1)

https://docusaurus.io/.

Hope it helps

!!PEACE !!

REFERENCE

A passionate automation engineer who strongly believes in “A man can do anything he wants if he puts in the work”.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store