Skip to main content

Docusarus i18n setting

This page explains how to set the i18n korean page setting.

I followed this page.

docusaurus.config.js​

site language​

docusaurus.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko'],
  },
};

topbar language button​

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

start site​

caution

You can not test all the language at once. It means that you can not test all the language with yarn run start or npm run start. So you need to test with below command.

npm run start -- --locale ko

translate api usage​

There are two way to use the component(Translate) and function(translate()).

sample code
import Translate, {translate} from '@docusaurus/Translate';

<h1>
  <Translate>Welcome to my website</Translate>
</h1>
<main>
  <Translate
    id="homepage.visitMyBlog"
    description="The homepage message to ask the user to visit my blog"
    values={{blog: <Link to="https://docusaurus.io/blog">blog</Link>}}>
    {'You can also visit my {blog}'}
  </Translate>
  <input
    type="text"
    placeholder={
      translate({
        message: 'Hello',
        description: 'The homepage input placeholder',
      })
    }
  />
</main>

translate command​

npm run write-translations -- --locale ko
i18n/ko/code.json
{
  "Welcome to my website": {
    "message": "Welcome to my website",
    "description": "The homepage welcome message"
  },
  "Hello": {
    "message": "Hello",
    "description": "The homepage input placeholder"
  }
}
i18n/ko/docusaurus-theme-classic/navbar.json
{
  "title": {
    "message": "My Site",
    "description": "The title in the navbar"
  },
  "item.label.Docs": {
    "message": "Docs",
    "description": "Navbar item with label Docs"
  },
  "item.label.Blog": {
    "message": "Blog",
    "description": "Navbar item with label Blog"
  },
  "item.label.GitHub": {
    "message": "GitHub",
    "description": "Navbar item with label GitHub"
  }
}

Translate the message attribute in the JSON files of i18n/ko, and your site layout and homepage should now be translated.

copy files for new language​

copy docs files​

note

you can skip mkdir if you have already made folder.

mkdir -p i18n/ko/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/ko/docusaurus-plugin-content-docs/current

copy blog files​

note

you can skip mkdir if you have already made folder.

mkdir -p i18n/ko/docusaurus-plugin-content-blog
cp -r blog/** i18n/ko/docusaurus-plugin-content-blog

build & deploy site​

You can now deploy the build folder to the static hosting solution of your choice.

npm run build