이번 시간에는 도큐사우루스에 대해 알아볼건대요,
시작하기 전에 좋아요와 구독 알림설정 눌러주시고
그럼 다음 시간에 도큐사우루스에 대해 알아볼게요.

그건 무슨 공룡인데

docusarus 홈페이지 링크

이렇게 생긴 블로그 혹은 문서 템플릿을

pnpm create docusaurus <project-name> classic -- --typescript

이렇게 입력하면 자동으로 만들어주는 도구입니다.
(npx여도 되고 yarn이어도 되는데 이번 시간에는 pnpm으로 할겁니다.)

이거 왜 씀

개좋음 써보셈

기능 뭐뭐 있음

• markdown 혹은 mdx로 작성할 수 있고 오른쪽에 목차 나옴
• 왼쪽에 있는 메뉴들은 접고 펼칠 수 있게 만들 수 있음
• i18n(국제화) 기능 있음
• 버전 기능 있음
• 다크모드 기본으로 있음
• 등등 필요하면 검색해보셈

만드는 방법

pnpm create docusaurus <project-name> classic -- --typescript

다크모드 쓰는 방법

일단 기본적으로 테마가 저렇게 들어있습니다.
docusaurus.config.js 파일 안에

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  // ...
  
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        // ...
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],
  
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // ...
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
  // ...
};

이렇게 하면 오른쪽 위에 테마 아이콘이 나오고 누르면 햇님 달님 번갈아가며 나옵니다.

i18n 넣는 방법

pnpm docusaurus write-translations --locale ko

위의 커멘드를 입력해서 언어를 추가합니다.
그럼 /i18n/ko 폴더가 생기는데, 문서를 번역하는걸 예로 들자면

/i18n/ko/docusaurus-plugin-content-docs/current 경로 안에 /docs 와 동일한 문서들을 넣어주고 번역본을 넣으면 됩니다.
그런데 이렇게만 해서는 언어를 고르는 셀렉트가 나오지 않습니다.

언어 고르는 셀렉트 넣는 방법

docusaurus.config.js 파일 안에 config.themeConfig.navbar.items 에 localeDropdown 을 추가하고,
config.i18n 을 추가하면 나옵니다.

const config = {
  // ...
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        // ...
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        // ...
        items: [
          // ...
          {
            type: 'localeDropdown',
            position: 'right',
            dropdownItemsAfter: [
              {
                to: 'https://your-link',
                label: 'Help us translate',
              },
            ],
          },
          // ...
        ],
      },
      footer: {
        // ...
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),

  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko'],
    localeConfigs: {
      en: {
        label: 'English',
        direction: 'ltr',
        htmlLang: 'en-US',
      },
      ko: {
        label: '한국어',
        direction: 'ltr',
        htmlLang: 'ko-KR',
      },
    },
  },
};

써보세요

제가 애먹었던 부분은 다 썼습니다.
여러분도 써보세요. 엄청 편하고 좋아요.