📦 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을 설치한 경우에는 플러그인을 따로 설치할 필요는 없습니다.
여러분은 프리셋 옵션을 사용해 플러그인을 설정할 수 있습니다.
설정
설정할 수 있는 필드
| 옵션명 | 타입 | 기본값 | 설명 |
|---|---|---|---|
path | string | 'src/pages' | 사이드 디렉토리에 상대적인 파일 시스템의 데이터 경로입니다. 디렉토리 내 컴포넌트는 자동으로 페이지로 변환됩니다. |
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 플러그인 |
설정 예시
프리셋 옵션이나 플러그인 옵션에서 플러그인을 설정할 수 있습니다.
팁
대부분의 도큐사우루스 사용자는 프리셋 옵션을 사용해 플러그인을 설정합니다.
- Preset options
- Plugin options
If you use a preset, configure this plugin through the preset options:
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: [],
},
},
],
],
};
If you are using a standalone plugin, provide options directly to the plugin:
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 | 게시글에 대한 링크를 표시할 때 보여지는 커버 또는 섬네일 이미지를 설정합니다. |
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