도큐사우루스 문서 사이트 만들기 - 6. 다국어 처리

이제 다국어 처리를 위한 부분을 넣어 보자. 머 한글만 해도 되지만 기본으로 영어로 잡혀있고, 한글로 바뀌면 한글 자료로 나오도록 구성을 해 보려 한다.

 

먼저, 설치 부터 운영까지의 내용을 살펴보고 오면 좋겠다.

2024.01.02 - [디지털노마드] - 도큐사우루스 문서 사이트 만들기 - 1. 소개

2024.01.03 - [디지털노마드] - 도큐사우루스 문서 사이트 만들기 - 2. 설치 혹은 GitHub Fork로 복사

2024.01.03 - [디지털노마드] - 도큐사우루스 문서 사이트 만들기 - 3. GitHub Actions 빌드 및 브랜치 생성

2024.01.03 - [디지털노마드] - 도큐사우루스 문서 사이트 만들기 - 4. GitHub Pages 배포 자동화

2024.01.03 - [디지털노마드] - 도큐사우루스 문서 사이트 만들기 - 5. GitHub Pages 도메인 연동하기

 

Configure your site

docusaurus.config.js 파일을 열어서 원하는 국가 코드를 추가해야 한다. 정식 매뉴얼에서는 프랑스어를 추가하는 예를 보여준다.

Use the site i18n configuration to declare the i18n locales:

docusaurus.config.js

export default {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'fa'],
    localeConfigs: {
      en: {
        htmlLang: 'en-GB',
      },
      // You can omit a locale (e.g. fr) if you don't need to override the defaults
      fa: {
        direction: 'rtl',
      },
    },
  },
};

 

로케일 이름은 번역된 파일 위치와 번역된 로케일 base URL에 사용됩니다. 모든 로케일 빌드 시 기본 로케일만 base URL에서 이름이 생략됩니다.

예제에서 보는 봐야 같이 왼쪽 에서 오른쪽이 보통 나라의 기본인데, 반대인 경우에는 direction: 'rtl' 옵션을 줘야 한다.

한국어 추가

그냥 ko 를 넣었더니 왠걸 다른나라 언어가 나온다.

한국은 ko-kr

  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko-kr'],
  }

 

테마 설정 변경

이제 테마에서 설정을 변경하면 된다.

Add a navbar item of type localeDropdown so that users can select the locale they want:

docusaurus.config.js

export default {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'left',
        },
      ],
    },
  },
};

 

아래와 같이 언어를 선택하는 드롭다운 메뉴가 나온다.

다국어지원 테마 변경

 

다국어 폴더 생성하기

다음 명령어로 해당 언어에 대한 기본 폴더를 자동으로 생성하게 해둔다.

먼저,
```
$ yarn run write-translations -- --locale ko-kr
```
사용자 페이지 추가

 

그럼 i11n 이라는 폴더에 머 기본적인 내용이 추가가 된다.

 

그리고, 블로그, 페이지, 문서 다 아래 명령어로 기본 데이터를 복사한다.

사용자 페이지 추가

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

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

# src/pages
mkdir -p i18n/ko-kr/docusaurus-plugin-content-pages
cp -r src/pages/**.md i18n/ko-kr/docusaurus-plugin-content-pages
cp -r src/pages/**.mdx i18n/ko-kr/docusaurus-plugin-content-pages
```

 

해당 폴더에 가서 해당 언어로 변환한 문서를 넣으면 다국어 지원이 일단락 된다.

 

지금까지 도큐사우루스에서 다국어, 특히 한국어 페이지를 추가하는 방법을 살펴봤다. 도움이 되는 글이길 :)