📦 plugin-content-docs

문서 만들기 기능을 제공하는 도큐사우루스의 기본 문서 플러그인입니다.

설치

npm

npm install --save @docusaurus/plugin-content-docs

Yarn

yarn add @docusaurus/plugin-content-docs

pnpm

pnpm add @docusaurus/plugin-content-docs

팁

@docusaurus/preset-classic을 설치한 경우에는 플러그인을 따로 설치할 필요는 없습니다.

여러분은 프리셋 옵션을 사용해 플러그인을 설정할 수 있습니다.

설정

설정할 수 있는 필드

옵션명	타입	기본값	설명
path	string	'docs'	사이트 디렉토리에 상대적인 파일 시스템의 문서 콘텐츠 디렉토리 경로입니다.
editUrl	string | EditUrlFunction	undefined	사이트를 편집하기 위한 Base URL입니다. 최종 URL은 editUrl + relativeDocPath 형태로 처리됩니다. 옵션 사용 시 각 파일에 대한 세밀한 제어를 할 수 있습니다. 해당 필드를 설정하지 않으면 편집 링크가 비활성화됩니다.
editLocalizedFiles	boolean	false	편집 URL은 현지화되지 않은 원본 파일 대신 현지화된 파일을 대상으로 합니다. editUrl이 함수인 경우에는 무시합니다.
editCurrentVersion	boolean	false	편집 URL은 항상 이전 버전 대신 현재 버전 문서를 대상으로 합니다. editUrl이 함수인 경우에는 무시합니다.
routeBasePath	string	'docs'	사이트 문서 섹션에 대한 URL 라우트 트레일링 슬래시를 포함하지 마세요. 기본 경로 없이 문서를 처리할 때에 /를 사용하세요.
tagsBasePath	string	'tags'	사이트 태그 목록 페이지에 대한 URL 라우트 routeBasePath 앞에 추가됩니다.
include	string[]	['**/*.{md,mdx}']	콘텐츠 경로를 기준으로 빌드할 마크다운 파일과 일치하는 glob 패턴 배열입니다.
exclude	string[]	설정 예시를 참조하세요	제외할 마크다운 파일과 일치하는 glob 패턴 배열입니다. include 옵션을 좀 더 세분화하는 역할을 합니다.
sidebarPath	false | string	undefined	사이드바 구성 경로입니다. 사이드바를 비활성화하려면 false를 설정하고 완전히 자동으로 생성된 사이드바를 만들려면 undefined를 설정하세요.
sidebarCollapsible	boolean	true	기본적으로 사이드바 카테고리를 접을 수 있는지 여부를 설정합니다. 접을 수 있는 카테고리 항목을 참조하세요.
sidebarCollapsed	boolean	true	기본적으로 사이드바 카테고리를 접을지 여부를 설정합니다. 기본적으로 펼쳐진 카테고리 항목을 참조하세요.
sidebarItemsGenerator	SidebarGenerator	설정하지 않음	'autogenerated' 타입의 사이드바 항목을 실제 사이드바 항목(문서, 카테고리, 링크 등)으로 교체하는 데 사용되는 기능입니다. 사용자 지정 사이드바 아이템 생성기 항목을 참조하세요.
numberPrefixParser	boolean | PrefixParser	설정하지 않음	파일명에서 숫자 접두사를 추출하는 사용자 지정 구문 분석 방식을 설정합니다. 해당 동작을 비활성화하고 문서를 유지하려면 false를 선택하고 기본 구문 분석을 사용하려면 true를 선택하세요. 숫자 접두사 사용하기 항목을 참조하세요.
docLayoutComponent	string	'@theme/DocPage'	각 문서 페이지의 루트 레이아웃 컴포넌트입니다. 버전 데이터 컨텍스트를 제공하며 문서 전환 시 마운트 해제되지 않습니다.
docItemComponent	string	'@theme/DocItem'	목차, 페이지 영역 등 기본 문서 컨테이너
docTagsListComponent	string	'@theme/DocTagsListPage'	태그 목록 페이지의 루트 컴포넌트
docTagDocListComponent	string	'@theme/DocTagDocListPage'	"태그 X를 포함한 문서" 페이지의 루트 컴포넌트
docCategoryGeneratedIndexComponent	string	'@theme/DocCategoryGeneratedIndexPage'	생성된 카테고리 인덱스 페이지의 루트 컴포넌트
remarkPlugins	any[]	[]	MDX에 전달된 Remark 플러그인
rehypePlugins	any[]	[]	MDX에 전달된 Rehype 플러그인
beforeDefaultRemarkPlugins	any[]	[]	기본 도큐사우루스 Remark 플러그인보다 먼저 MDX에 전달된 사용자 지정 Remark 플러그인
beforeDefaultRehypePlugins	any[]	[]	기본 도큐사우루스 Rehype 플러그인보다 먼저 MDX에 전달된 사용자 지정 Rehype 플러그인
showLastUpdateAuthor	boolean	false	문서를 마지막으로 업데이트한 작성자를 표시할지 여부
showLastUpdateTime	boolean	false	문서를 마지막으로 업데이트한 날짜를 표시할지 여부
breadcrumbs	boolean	true	문서 페이지에서 이동 경로를 활성화 또는 비활성화
disableVersioning	boolean	false	여러 버전이 있더라도 명시적으로 버전 관리를 비활성화합니다. 이렇게 하면 사이트에 현재 버전만 포함됩니다. includeCurrentVersion: false이나 disableVersioning: true 인 경우 오류가 발생합니다.
includeCurrentVersion	boolean	true	문서의 현재 버전을 포함
lastVersion	string	versions.json 파일에서 첫 번째 버전	문서 메뉴바 아이템에 대해 우선적으로 탐색되고 기본적으로 표시되는 버전
onlyIncludeVersions	string[]	사용할 수 있는 모든 버전	사용할 수 있는 모든 버전의 하위 집합만 포함
versions	VersionsConfig	{}	각 버전의 속성을 독립적으로 사용자 지정합니다.

타입

EditUrlFunction

type EditUrlFunction = (params: {
  version: string;
  versionDocsDirPath: string;
  docPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

PrefixParser

type PrefixParser = (filename: string) => {
  filename: string;
  numberPrefix?: number;
};

SidebarGenerator

type SidebarGenerator = (generatorArgs: {
  /** 변환할 "자동 생성" 타입의 사이드바 항목입니다. */
  item: {type: 'autogenerated'; dirName: string};
  /** 사이드바가 속한 버전에 필요한 메타데이터입니다. */
  version: {contentPath: string; versionName: string};
  /** 해당 버전의 모든 문서(필터링하지 않은). */
  docs: {
    id: string;
    title: string;
    frontMatter: DocFrontMatter & Record<string, unknown>;
    source: string;
    sourceDirName: string;
    sidebarPosition?: number | undefined;
  }[];
  /** 플러그인에서 설정한 숫자 접두사 구문분석기입니다. */
  numberPrefixParser: PrefixParser;
  /** 재정의할 수 있는 기본 카테고리 인덱스 일치자입니다. */
  isCategoryIndex: CategoryIndexMatcher;
  /**
   * key는 문서 콘텐츠 디렉토리에 대한 상대 경로이고
   * value는 카테고리 메타데이터 파일의 콘텐츠입니다.
   */
  categoriesMetadata: {[filePath: string]: CategoryMetadata};
  /**
   * 도큐사우루스의 기본 사이드바 생성 로직을
   * 재사용하거나 향상시키는 데 유용합니다.
   */
  defaultSidebarItemsGenerator: SidebarGenerator;
  // 사이드바 항목의 배열을 반환합니다. 단축형을 제외하면
  // sidebars.js에서 선언할 수 있는 것과 같습니다. https://docusaurus.io/docs/sidebar/items 항목을 참고하세요.
}) => Promise<SidebarItem[]>;

type CategoryIndexMatcher = (param: {
  /** 확장자 없는 파일명 */
  fileName: string;
  /**
   * 가장 낮은 수준에서 높은 수준으로 정렬한 디렉토리 목록입니다.
   * 디렉토리 이름이 없으면 디렉토리는 ['.']로 처리합니다.
   */
  directories: string[];
  /** 점을 포함한 확장자 */
  extension: string;
}) => boolean;

VersionsConfig

type VersionConfig = {
  /**
   * 버전의 base 경로는
   * `baseUrl` + `routeBasePath`에 추가됩니다.
   */
  path?: string;
  /** 배지, 드롭다운 등에 사용할 버전 라벨입니다. */
  label?: string;
  /** 해당 버전의 문서 상단에 표시할 배너입니다. */
  banner?: 'none' | 'unreleased' | 'unmaintained';
  /** 각 문서 상단에 버전 라벨이 있는 배지를 표시합니다. */
  badge?: boolean;
  /** 검색엔진이 이 버전을 인덱싱하지 못하도록 합니다 */
  noIndex?: boolean;
  /** 각 문서의 <html> 요소에 대한 사용자 지정 클래스명 추가 */
  className?: string;
};

type VersionsConfig = {[versionName: string]: VersionConfig};

설정 예시

프리셋 옵션이나 플러그인 옵션에서 플러그인을 설정할 수 있습니다.

팁

대부분의 도큐사우루스 사용자는 프리셋 옵션을 사용해 플러그인을 설정합니다.

프리셋 옵션

프리셋을 사용하는 경우 프리셋 옵션를 통해 플러그인을 구성합니다.

docusaurus.config.js

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          breadcrumbs: true,
          // Simple use-case: string editUrl
          // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
          // Advanced use-case: functional editUrl
          editUrl: ({versionDocsDirPath, docPath}) =>
            `https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,
          editLocalizedFiles: false,
          editCurrentVersion: false,
          routeBasePath: 'docs',
          include: ['**/*.md', '**/*.mdx'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          sidebarPath: 'sidebars.js',
          async sidebarItemsGenerator({
            defaultSidebarItemsGenerator,
            numberPrefixParser,
            item,
            version,
            docs,
            isCategoryIndex,
          }) {
            // 제공된 데이터를 사용해 사용자 지정 사이드바 슬라이스 생성
            return [
              {type: 'doc', id: 'intro'},
              {
                type: 'category',
                label: 'Tutorials',
                items: [
                  {type: 'doc', id: 'tutorial1'},
                  {type: 'doc', id: 'tutorial2'},
                ],
              },
            ];
          },
          numberPrefixParser(filename) {
            // 잠재적인 숫자 접두사를 추출하는 여러분만의 논리를 구현합니다.
            const numberPrefix = findNumberPrefix(filename);
            // 접두사를 발견하면 정리된 파일명과 함께 반환합니다.
            if (numberPrefix) {
              return {
                numberPrefix,
                filename: filename.replace(prefix, ''),
              };
            }
            // 숫자 접두사를 발견하지 못했습니다.
            return {numberPrefix: undefined, filename};
          },
          docLayoutComponent: '@theme/DocPage',
          docItemComponent: '@theme/DocItem',
          remarkPlugins: [require('remark-math')],
          rehypePlugins: [],
          beforeDefaultRemarkPlugins: [],
          beforeDefaultRehypePlugins: [],
          showLastUpdateAuthor: false,
          showLastUpdateTime: false,
          disableVersioning: false,
          includeCurrentVersion: true,
          lastVersion: undefined,
          versions: {
            current: {
              label: 'Android SDK v2.0.0 (WIP)',
              path: 'android-2.0.0',
              banner: 'none',
            },
            '1.0.0': {
              label: 'Android SDK v1.0.0',
              path: 'android-1.0.0',
              banner: 'unmaintained',
            },
          },
          onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],
        },
      },
    ],
  ],
};

플러그인 옵션

독립적으로 실행되는 플러그인을 사용하는 경우에는 플러그인에 대한 옵션을 직접 설정할 수 있습니다.

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-docs',
      {
        path: 'docs',
        breadcrumbs: true,
        // Simple use-case: string editUrl
        // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
        // Advanced use-case: functional editUrl
        editUrl: ({versionDocsDirPath, docPath}) =>
          `https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,
        editLocalizedFiles: false,
        editCurrentVersion: false,
        routeBasePath: 'docs',
        include: ['**/*.md', '**/*.mdx'],
        exclude: [
          '**/_*.{js,jsx,ts,tsx,md,mdx}',
          '**/_*/**',
          '**/*.test.{js,jsx,ts,tsx}',
          '**/__tests__/**',
        ],
        sidebarPath: 'sidebars.js',
        async sidebarItemsGenerator({
          defaultSidebarItemsGenerator,
          numberPrefixParser,
          item,
          version,
          docs,
          isCategoryIndex,
        }) {
          // 제공된 데이터를 사용해 사용자 지정 사이드바 슬라이스 생성
          return [
            {type: 'doc', id: 'intro'},
            {
              type: 'category',
              label: 'Tutorials',
              items: [
                {type: 'doc', id: 'tutorial1'},
                {type: 'doc', id: 'tutorial2'},
              ],
            },
          ];
        },
        numberPrefixParser(filename) {
          // 잠재적인 숫자 접두사를 추출하는 여러분만의 논리를 구현합니다.
          const numberPrefix = findNumberPrefix(filename);
          // 접두사를 발견하면 정리된 파일명과 함께 반환합니다.
          if (numberPrefix) {
            return {
              numberPrefix,
              filename: filename.replace(prefix, ''),
            };
          }
          // 숫자 접두사를 발견하지 못했습니다.
          return {numberPrefix: undefined, filename};
        },
        docLayoutComponent: '@theme/DocPage',
        docItemComponent: '@theme/DocItem',
        remarkPlugins: [require('remark-math')],
        rehypePlugins: [],
        beforeDefaultRemarkPlugins: [],
        beforeDefaultRehypePlugins: [],
        showLastUpdateAuthor: false,
        showLastUpdateTime: false,
        disableVersioning: false,
        includeCurrentVersion: true,
        lastVersion: undefined,
        versions: {
          current: {
            label: 'Android SDK v2.0.0 (WIP)',
            path: 'android-2.0.0',
            banner: 'none',
          },
          '1.0.0': {
            label: 'Android SDK v1.0.0',
            path: 'android-1.0.0',
            banner: 'unmaintained',
          },
        },
        onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],
      },
    ],
  ],
};

마크다운 프런트 매터

마크다운 문서에서는 ---로 감싼 마크다운 프런트 매터 영역에서 아래와 같은 메타데이터 필드를 사용할 수 있습니다.

설정할 수 있는 필드

옵션명	타입	기본값	설명
id	string	파일 경로(확장자는 제외하고 디렉터리는 포함)	고유한 문서 ID
title	string	마크다운 제목 또는 id	문서 제목입니다. 페이지 메타데이터로 사용하며 여러 위치(사이드바, 다음/이전 버튼 등)에서 대체값으로 사용됩니다. 마크다운 제목이 없는 경우 문서 상단에 자동으로 추가됩니다.
pagination_label	string	sidebar_label 또는 title	문서 내에서 문서의 다음/이전 버튼에 표시할 텍스트를 설정합니다.
sidebar_label	string	title	문서 내에서 문서의 사이드바에 표시할 텍스트를 설정합니다.
sidebar_position	number	기본 정렬 순서	autogenerated 사이드바 아이템을 사용하는 경우 만들어진 사이드바 슬라이스 내에서 문서 위치를 조정할 수 있습니다. 자동 생성된 사이드바 메타데이터 항목을 참조하세요.
sidebar_class_name	string	undefined	자동 생성된 사이드바를 사용할 때 해당 사이드바 라벨에 특별한 클래스 이름을 제공합니다.
sidebar_custom_props	object	undefined	이 문서를 참조하는 사이드바 항목에 custom props를 할당합니다.
displayed_sidebar	string	undefined	현재 문서를 탐색할 때 지정된 사이드바를 강제로 표시합니다. 자세한 내용은 여러 개의 사이드바 사용하기을 참고하세요.
hide_title	boolean	false	문서 상단 제목을 숨길지 여부입니다. 프런트 매터 영역에서 설정한 제목만 감춥니다. 마크다운 문서 내에 지정된 타이틀에는 영향을 주지 않습니다.
hide_table_of_contents	boolean	false	목차를 오른쪽으로 숨길지 여부
toc_min_heading_level	number	2	목차에 표시되는 최소 제목 수준입니다. 2에서 6 사이의 값으로 설정할 수 있고 최댓값보다 작거나 같아야 합니다.
toc_max_heading_level	number	3	목차에 표시되는 최대 제목 수준입니다. 2에서 6 사이의 값으로 설정할 수 있습니다.
pagination_next	string | null	사이드바에서 다음 문서	페이지 이동 영역에서 "다음" 항목 링크에 연결할 문서의 ID입니다. 현재 페이지에서 "다음" 항목에 보여주고 싶지 않다면 null로 설정하세요.
pagination_prev	string | null	사이드바에서 이전 문서	페이지 이동 영역에서 "이전" 항목 링크에 연결할 문서의 ID입니다. 현재 페이지에서 "이전" 항목에 보여주고 싶지 않다면 null로 설정하세요.
parse_number_prefixes	boolean	numberPrefixParser 플러그인 옵션	문서에서 번호 접두사 구문 분석 비활성화 여부입니다. 숫자 접두사 사용하기 항목을 참조하세요.
custom_edit_url	string	editUrl 플러그인 옵션을 사용해 계산된 값	문서를 편집하기 위한 URL
keywords	string[]	undefined	검색 엔진에서 필요한 문서 페이지의 키워드 메타 태그를 설정합니다.
description	string	마크다운 콘텐츠 첫 번째 줄	문서의 설명은 검색엔진에서 사용할 수 있게 <head> 태그 안에 <meta name="description" content="..."/>와 <meta property="og:description" content="..."/>로 처리됩니다.
image	string	undefined	게시글에 대한 링크를 표시할 때 보여지는 커버 또는 섬네일 이미지를 설정합니다.
slug	string	파일 경로	문서 URL을 변경할 수 있도록 허용합니다(/<routeBasePath>/<slug>). 여러 패턴을 설정할 수도 있습니다: slug: my-doc, slug: /my/path/myDoc, slug: /.
tags	Tag[]	undefined	문서를 태그하기 위한 문자열 또는 오브젝트의 목록입니다. label과 permalink 2개의 필드로 구성됩니다.
draft	boolean	false	문서가 작업 중임을 나타내는 부울 플래그입니다. Draft documents will only be displayed during development.
last_update	FileChange	undefined	마지막으로 업데이트된 작성자, 날짜를 재정의할 수 있습니다. 사용할 수 있는 날짜 형식은 parsable date string을 참고하세요.

type Tag = string | {label: string; permalink: string};

type FileChange = {date: string; author: string};

예:

---
id: doc-markdown
title: Docs Markdown Features
hide_title: false
hide_table_of_contents: false
sidebar_label: Markdown
sidebar_position: 3
pagination_label: Markdown features
custom_edit_url: https://github.com/facebook/docusaurus/edit/main/docs/api-doc-markdown.md
description: How do I find you when I cannot solve this problem
keywords:
  - docs
  - docusaurus
image: https://i.imgur.com/mErPwqL.png
slug: /myDoc
last_update:
  date: 1/1/2000
  author: custom author name
---

# Markdown Features

My Document Markdown content

i18n

i18n 소개 문서를 먼저 확인해주세요.

번역 파일 위치

• Base path: website/i18n/[locale]/docusaurus-plugin-content-docs
• Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]
• JSON 파일: docusaurus write-translations 명령 실행 후 만들어진 파일
• Markdown files: website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]

파일 시스템 구조 예

website/i18n/[locale]/docusaurus-plugin-content-docs
│
│ # translations for website/docs
├── current
│   ├── api
│   │   └── config.md
│   └── getting-started.md
├── current.json
│
│ # translations for website/versioned_docs/version-1.0.0
├── version-1.0.0
│   ├── api
│   │   └── config.md
│   └── getting-started.md
└── version-1.0.0.json