Docuusauus 시작

Docuusauus 소개

문서 사이트를 만드는 도구입니다.

Mardown으로 문서 쓰기→Docuusauurus로 정적 HTML 생성→호스트로 사용.

각 버전의 문서, 국제화, 검색, 어둠 모델과 주제 맞춤형에 대응한다.

는 리액트를 기반으로 제작됐다.

페이스북이 만든 OSS.

경쟁 툴은 다음과 같습니다.

GitBook

honkit

MkDocs

docsify

Docuusauus 시험
설치 및 시작
Node.js가 설치된 환경에서 다음 명령을 실행합니다.

npx @docusaurus/init@latest init my-website classic

my-website는 코드를 생성하기 때문에 개발 서버를 시작합니다.

cd my-website
npx docusaurus start

시작 후 웹 사이트가 브라우저에 표시됩니다.

제작 페이지
Docuusauus의 규격은 src/pages에서 파일을 만들면 파일이 페이지가 된다는 것이다.파일과 URL의 관계는 다음과 같습니다.

src/pages/index.js -> localhost:3000/

src/pages/foo.md -> localhost:3000/foo

src/pages/foo/bar.js -> localhost:3000/foo/bar

React 구성 요소로 페이지 만들기
React 구성 요소로 페이지를 만들어 보세요.src/pages/my-react-page.js에서 파일을 제작하는데 내용은 다음과 같다.

import React from 'react';
import Layout from '@theme/Layout';

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

파일을 저장한 후 http://localhost:3000/my-react-page에 액세스합니다.그래서 방금 만든 페이지를 보여 주었습니다.

Mardown으로 페이지 만들기
다음에 Mardown으로 쌀가루를 만들어 보세요.src/pages/my-markdown-page.md에서 다음과 같은 내용을 가진 파일을 만듭니다.

# My Markdown page

This is a Markdown page

제작된 페이지를 열 수 있습니다http://localhost:3000/my-markdown-page.

문서 페이지 만들기
문서 페이지는 위의 일반 페이지와 달리 다음과 같은 특징을 가집니다.

사이드바(디렉토리)에 표시

전면 및 후면 페이지 탐색

가로 흔들기 가능

Mardown으로 문서 페이지 만들기docs/hello.md에 다음 내용의 파일을 만듭니다.

# Hello

This is my **first Docusaurus document**!

이 페이지는 http://localhost:3000/docs/hello를 액세스합니다.

사이드바 사용자 정의
frontmatter를 설정하면 사이드바에 표시된 페이지 제목을 임의로 변경할 수 있습니다.

---
sidebar_label: 'Hi!'
sidebar_position: 3
---

# Hello

This is my **first Docusaurus document**!