Skip to main content

Internationalization - i18n

Configure your site​

Modify thedocusaurus.config.js file to incorporate i18n support for the Spanish language, based on your preference.

docusaurus.config.jsjs
module.exports = {
   i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    localeConfigs: {
      en: {label: 'en'},
      es: {label: 'es'},
    }
  },
};

Internationalization(`18n) | Docusaurus

Theme Config​

Add a navigation bar item of the localeDropdown type, allowing users to choose their preferred language:

docusaurus.config.tsts
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'left',
        },
      ],
    },
  },
};

Docusaurus, on its platform, includes an automatic translation feature that can be assessed through the following example:

pnpm run start -- --locale es

This tool provides preset translations for generic theme labels, such as "Next" and "Previous" in relation to pagination. You can explore the default translations through the provided link.

Translate​

The docusaurus write-translation command will statically analyze all React code files used in your site, extract calls to these APIs, and aggregate them in the code.json file

npm run write-translations -- --locale es
website/i18n
     └── es
         ├── code.json                        
         ├── docusaurus-plugin-content-blog
         │   └── options.json
         ├── docusaurus-plugin-content-docs
         │   └── current.json
         └── docusaurus-theme-classic
             ├── footer.json
             └── navbar.json

To make modifications to the Docusaurus-theme-classic, you need to focus on the footer and navbar sections within the message area.

Config your ID​

  • The Translate component allows you to create multilingual Docusaurus websites, enabling translation of strings in your React components.
import Translate from '@docusaurus/Translate';
  • Wrap the text you want to translate with the Translate component:
src/pages/index.tsts
function HomepageHeader() {
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <div className='row'>
          <div className='col col--6 justified'>
          <h1 className="hero__title">
            <Translate id="homepage.welcome"> Welcome to my Cloud Journey</Translate>
          </h1>
          <p>
            <Translate id="homepage.tags">#Cloud, #Innovation, #Technology, #OpenSource</Translate>
          </p>
          </div>
          <div className='col col--6 justified'>
              <img src="./svg/cloud.svg" />
            </div>
          </div>
        </div>
    </header>
  );
}

code.json​

  • Add the translation strings to the respective ID
/i18n/es/code.jsonjson
{
  "homepage.welcome": {
    "message": "Bienvenido a mi proyecto Cloud Journey",
    "description": "The title of website"
  },
  "homepage.tags": {
    "message": "#Nube, #Innovación, #Tecnología, #CódigoAbierto",
    "description": "A list of key topics displayed on the homepage as a slogan, highlighting the main themes of the website"
  },
}

Markdown files​

You can translate docs, blog and pages only whit this command`

cp -r docs/** i18n/es/docusaurus-plugin-content-docs/current
cp -r blog/** i18n/es/docusaurus-plugin-content-blog
cp -r src/pages/** i18n/es/docusaurus-plugin-content-pages

When editing your docs, blog, and pages files in Docusaurus, it is important to only modify the title, as the same ID and slug configuration is shared across these files.

docs/projects/docusaurus/internationalization.mdmd
---
id: docusaurus-internationalization 
slug: /docusaurus-internationalization 
title: Internationalization - i18n 
---
i18n/es/docusaurus-plugin-content-docs/current/projects/docusaurus/internationalization.mdmd
---
id: docusaurus-internationalization 
slug: /docusaurus-internationalization 
title: Internacionalización - i18n // -- Edit
---
0%