버전: Canary 🚧

📦 plugin-content-pages

도큐사우루스의 기본 페이지 플러그인입니다. 클래식 템플릿에는 기본 설정으로 플러그인이 포함되어 있습니다. 페이지 만들기 기능을 제공하는 플러그인입니다.

설치

npm
Yarn
pnpm

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

yarn add @docusaurus/plugin-content-pages

pnpm add @docusaurus/plugin-content-pages

팁

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

You can configure this plugin through the preset options.

설정

설정할 수 있는 필드

옵션명	타입	기본값	설명
`path`	`string`	`'src/pages'`	사이드 디렉토리에 상대적인 파일 시스템의 데이터 경로입니다. 디렉토리 내 컴포넌트는 자동으로 페이지로 변환됩니다.
`editUrl`	`string \| EditUrlFn`	`undefined`	Only for Markdown pages. 사이트를 편집하기 위한 Base URL입니다. 최종 URL은 `editUrl + relativePostPath` 형태로 처리됩니다. 옵션 사용 시 각 파일에 대한 세밀한 제어를 할 수 있습니다. 해당 필드를 설정하지 않으면 편집 링크가 비활성화됩니다.
`editLocalizedFiles`	`boolean`	`false`	Only for Markdown pages. 편집 URL은 현지화되지 않은 원본 파일 대신 현지화된 파일을 대상으로 합니다. `editUrl`이 함수인 경우에는 무시합니다.
`routeBasePath`	`string`	`'/'`	사이트 페이지 섹션에 대한 URL 라우트 트레일링 슬래시를 포함하지 마세요.
`include`	`string[]`	`['*/.{js,jsx,ts,tsx,md,mdx}']`	일치하는 파일이 포함되어 처리됩니다.
`exclude`	`string[]`	설정 예시를 참조하세요	일치하는 파일에 대한 라우트가 생성되지 않습니다.
`mdxPageComponent`	`string`	`'@theme/MDXPage'`	각 MDX 페이지에서 사용하는 컴포넌트
`remarkPlugins`	`[]`	`any[]`	MDX에 전달된 Remark 플러그인
`rehypePlugins`	`[]`	`any[]`	MDX에 전달된 Rehype 플러그인
`beforeDefaultRemarkPlugins`	`any[]`	`[]`	기본 도큐사우루스 Remark 플러그인보다 먼저 MDX에 전달된 사용자 지정 Remark 플러그인
`beforeDefaultRehypePlugins`	`any[]`	`[]`	기본 도큐사우루스 Rehype 플러그인보다 먼저 MDX에 전달된 사용자 지정 Rehype 플러그인
`showLastUpdateAuthor`	`boolean`	`false`	Only for Markdown pages. Whether to display the author who last updated the page.
`showLastUpdateTime`	`boolean`	`false`	Only for Markdown pages. Whether to display the last date the page post was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub `actions/checkout`, use`fetch-depth: 0`.

타입

`EditUrlFn`

type EditUrlFunction = (params: {
  blogDirPath: string;
  blogPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

설정 예시

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

팁

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

프리셋 옵션
플러그인 옵션

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

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        pages: {
          path: 'src/pages',
          routeBasePath: '',
          include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          mdxPageComponent: '@theme/MDXPage',
          remarkPlugins: [require('./my-remark-plugin')],
          rehypePlugins: [],
          beforeDefaultRemarkPlugins: [],
          beforeDefaultRehypePlugins: [],
        },
      },
    ],
  ],
};

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

docusaurus.config.js
module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-pages',
      {
        path: 'src/pages',
        routeBasePath: '',
        include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
        exclude: [
          '**/_*.{js,jsx,ts,tsx,md,mdx}',
          '**/_*/**',
          '**/*.test.{js,jsx,ts,tsx}',
          '**/__tests__/**',
        ],
        mdxPageComponent: '@theme/MDXPage',
        remarkPlugins: [require('./my-remark-plugin')],
        rehypePlugins: [],
        beforeDefaultRemarkPlugins: [],
        beforeDefaultRehypePlugins: [],
      },
    ],
  ],
};

마크다운 프런트 매터

Markdown pages can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

설정할 수 있는 필드

옵션명	타입	기본값	설명
`title`	`string`	마크다운 파일	블로그 게시물 제목
`description`	`string`	마크다운 콘텐츠 첫 번째 줄	페이지의 설명은 검색엔진에서 사용할 수 있게 `<head>` 태그 안에 `<meta name="description" content="..."/>`와 `<meta property="og:description" content="..."/>`로 처리됩니다.
`keywords`	`string[]`	`undefined`	`<head>` 태그 내에 `<meta name="keywords" content="keyword1,keyword2,..."/>` 형태로 생성되는 키워드 메타 태그를 설정합니다. 검색 엔진에서 사용합니다.
`image`	`string`	`undefined`	Cover or thumbnail image that will be used as the `<meta property="og:image" content="..."/>` in the `<head>`, enhancing link previews on social media and messaging platforms.
`wrapperClassName`	`string`		특정 페이지 콘텐츠를 특정할 수 있도록 래퍼 요소에 추가할 클래스 이름입니다.
`hide_table_of_contents`	`boolean`	`false`	목차를 오른쪽으로 숨길지 여부
`draft`	`boolean`	`false`	비공개 설정 페이지는 개발 상태에서만 확인할 수 있습니다.
`unlisted`	`boolean`	`false`	목록에 없는 페이지는 개발 및 제품 상태에서 모두 확인할 수 있습니다. 제품에서 "숨겨진" 상태라 인덱스가 생성되지 않고 사이트맵에서 제외되며 링크 정보를 알고 있는 사용자만 접근할 수 있습니다.

예:

---
title: Markdown Page
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---

Markdown page content

i18n

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

번역 파일 위치

Base 경로: website/i18n/[locale]/docusaurus-plugin-content-pages
멀티 인스턴스 경로: website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
JSON 파일: docusaurus write-translations 명령 실행 후 만들어진 파일
마크다운 파일: website/i18n/[locale]/docusaurus-plugin-content-pages

파일 시스템 구조 예

website/i18n/[locale]/docusaurus-plugin-content-pages
│
│ # translations for website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md

📦 plugin-content-pages

설치​

설정​

타입​

EditUrlFn​

설정 예시​

마크다운 프런트 매터​

i18n​

번역 파일 위치​

파일 시스템 구조 예​

설치

설정

타입