메인 컨텐츠로 이동
버전: 3.1.1

📦 plugin-content-blog

Provides the Blog feature and is the default blog plugin for Docusaurus.

some features production only

The feed feature works by extracting the build output, and is only active in production.

Installation

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

If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

You can configure this plugin through the preset options.

Configuration

설정할 수 있는 필드

옵션명타입기본값설명
pathstring'blog'사이트 디렉토리에 상대적인 파일 시스템의 블로그 콘텐츠 디렉토리 경로입니다.
editUrlstring | EditUrlFnundefined사이트를 편집하기 위한 Base URL입니다. The final URL is computed by editUrl + relativePostPath. 옵션 사용 시 각 파일에 대한 세밀한 제어를 할 수 있습니다. 해당 필드를 설정하지 않으면 편집 링크가 비활성화됩니다.
editLocalizedFilesbooleanfalse편집 URL은 현지화되지 않은 원본 파일 대신 현지화된 파일을 대상으로 합니다. Ignored when editUrl is a function.
blogTitlestring'Blog'더 나은 SEO를 위한 블로그 페이지 제목
blogDescriptionstring'Blog'더 나은 SEO를 위한 블로그 페이지 메타 설명
blogSidebarCountnumber | 'ALL'5블로그 사이드바에 표시할 블로그 게시물 수입니다. 'ALL' to show all blog posts; 0 to disable.
blogSidebarTitlestring'Recent posts'블로그 사이드바 제목
routeBasePathstring'blog'사이트 블로그 섹션에 대한 URL 라우트 DO NOT include a trailing slash. Use / to put the blog at root path.
tagsBasePathstring'tags'블로그 태그 섹션에 대한 URL 라우트 Will be appended to routeBasePath. DO NOT include a trailing slash.
archiveBasePathstring | null'archive'블로그 아카이브 섹션에 대한 URL 라우트 Will be appended to routeBasePath. DO NOT include a trailing slash. Use null to disable generation of archive.
includestring[]['**/*.{md,mdx}']콘텐츠 경로를 기준으로 빌드할 마크다운 파일과 일치하는 glob 패턴 배열입니다.
excludestring[]See example configuration제외할 마크다운 파일과 일치하는 glob 패턴 배열입니다. Serves as refinement based on the include option.
postsPerPagenumber | 'ALL'10목록 페이지에서 페이지 당 표시할 게시물 수입니다. Use 'ALL' to display all posts on one listing page.
blogListComponentstring'@theme/BlogListPage'블로그 목록 페이지의 루트 컴포넌트
blogPostComponentstring'@theme/BlogPostPage'각 블로그 게시물 페이지의 루트 컴포넌트
blogTagsListComponentstring'@theme/BlogTagsListPage'태그 목록 페이지의 루트 컴포넌트
blogTagsPostsComponentstring'@theme/BlogTagsPostsPage'"태그를 포함한 게시물" 페이지의 루트 컴포넌트
blogArchiveComponentstring'@theme/BlogArchivePage'블로그 아카이브 페이지의 루트 컴포넌트
remarkPluginsany[][]MDX에 전달된 Remark 플러그인
rehypePluginsany[][]MDX에 전달된 Rehype 플러그인
beforeDefaultRemarkPluginsany[][]기본 도큐사우루스 Remark 플러그인보다 먼저 MDX에 전달된 사용자 지정 Remark 플러그인
beforeDefaultRehypePluginsany[][]기본 도큐사우루스 Rehype 플러그인보다 먼저 MDX에 전달된 사용자 지정 Rehype 플러그인
truncateMarkerRegExp/<!--\s*truncate\s*-->/ | \{\/\*\s*truncate\s*\*\/\}/요약이 끝나는 곳을 표시하는 Truncate marker
showReadingTimebooleantrue블로그 게시물의 예상 읽기 시간을 표시
readingTimeReadingTimeFn기본 읽기 시간표시되는 읽기 시간 숫자를 사용자 지정하기 위한 콜백
authorsMapPathstring'authors.yml'블로그 콘텐츠 디렉토리에 상대적인 작성자 맵 파일 경로
feedOptionsSee below{type: ['rss', 'atom']}블로그 피드
feedOptions.typeFeedType | FeedType[] | 'all' | nullRequired생성할 피드 유형입니다. Use null to disable generation.
feedOptions.createFeedItemsCreateFeedItemsFn | undefinedundefined피드 항목을 변환하거나 필터링할 때 사용할 수 있는 선택 기능
feedOptions.limitnumber | null | false20Limits the feed to the specified number of posts, false or null for all entries. Defaults to 20.
feedOptions.titlestringsiteConfig.title피드 제목
feedOptions.descriptionstring`${siteConfig.title} Blog`피드 설명
feedOptions.copyrightstringundefined저작권 문구
feedOptions.languagestring (See documentation for possible values)undefined피드 언어 메타데이터
sortPosts'descending' | 'ascending' 'descending'블로그 게시물 정렬 순서 설정

Types

EditUrlFn

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

ReadingTimeFn

type ReadingTimeOptions = {
wordsPerMinute: number;
wordBound: (char: string) => boolean;
};

type ReadingTimeCalculator = (params: {
content: string;
frontMatter?: BlogPostFrontMatter & Record<string, unknown>;
options?: ReadingTimeOptions;
}) => number;

type ReadingTimeFn = (params: {
content: string;
frontMatter: BlogPostFrontMatter & Record<string, unknown>;
defaultReadingTime: ReadingTimeCalculator;
}) => number | undefined;

FeedType

type FeedType = 'rss' | 'atom' | 'json';

CreateFeedItemsFn

type CreateFeedItemsFn = (params: {
blogPosts: BlogPost[];
siteConfig: DocusaurusConfig;
outDir: string;
defaultCreateFeedItemsFn: CreateFeedItemsFn;
}) => Promise<BlogFeedItem[]>;

Example configuration

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

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

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

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
path: 'blog',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
editUrl: ({locale, blogDirPath, blogPath, permalink}) =>
`https://github.com/facebook/docusaurus/edit/main/website/${blogDirPath}/${blogPath}`,
editLocalizedFiles: false,
blogTitle: 'Blog title',
blogDescription: 'Blog',
blogSidebarCount: 5,
blogSidebarTitle: 'All our posts',
routeBasePath: 'blog',
include: ['**/*.{md,mdx}'],
exclude: [
'**/_*.{js,jsx,ts,tsx,md,mdx}',
'**/_*/**',
'**/*.test.{js,jsx,ts,tsx}',
'**/__tests__/**',
],
postsPerPage: 10,
blogListComponent: '@theme/BlogListPage',
blogPostComponent: '@theme/BlogPostPage',
blogTagsListComponent: '@theme/BlogTagsListPage',
blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
remarkPlugins: [require('./my-remark-plugin')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
truncateMarker: /<!--\s*(truncate)\s*-->/,
showReadingTime: true,
feedOptions: {
type: '',
title: '',
description: '',
copyright: '',
language: undefined,
createFeedItems: async (params) => {
const {blogPosts, defaultCreateFeedItems, ...rest} = params;
return defaultCreateFeedItems({
// keep only the 10 most recent blog posts in the feed
blogPosts: blogPosts.filter((item, index) => index < 10),
...rest,
});
},
},
},
},
],
],
};

Markdown front matter

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

설정할 수 있는 필드

옵션명타입기본값설명
authorsAuthorsundefined블로그 게시물 작성자들(또는 단독 작성자) 목록 Read the authors guide for more explanations. Prefer authors over the author_* front matter fields, even for single author blog posts.
authorstringundefined⚠️ Prefer using authors. 블로그 게시물 작성자 이름입니다.
author_urlstringundefined⚠️ Prefer using authors. 작성자 이름에 링크로 연결될 URL을 설정합니다. This could be a GitHub, X, Facebook profile URL, etc.
author_image_urlstringundefined⚠️ Prefer using authors. 작성자 썸네일 이미지 URL을 설정합니다.
author_titlestringundefined⚠️ Prefer using authors. 작성자에 대한 설명입니다.
titlestring마크다운 파일블로그 게시물 제목
datestring파일명 또는 파일 생성 시간블로그 게시물 생성 시간. If not specified, this can be extracted from the file or folder name, e.g, 2021-04-15-blog-post.mdx, 2021-04-15-blog-post/index.mdx, 2021/04/15/blog-post.mdx. 그렇지 않으면 마크다운 파일을 생성한 시간으로 설정됩니다.
tagsTag[]undefinedA list of strings or objects of two string fields label and permalink to tag to your post.
draftbooleanfalse비공개 설정 게시물은 개발 상태에서만 확인할 수 있습니다.
unlistedbooleanfalse목록에 없는 블로그 게시물은 개발 및 제품 상태에서 모두 확인할 수 있습니다. 제품에서 "숨겨진" 상태라 인덱스가 생성되지 않고 사이트맵에서 제외되며 링크 정보를 알고 있는 사용자만 접근할 수 있습니다.
hide_table_of_contentsbooleanfalse목차를 오른쪽으로 숨길지 여부
toc_min_heading_levelnumber2목차에 표시되는 최소 제목 수준입니다. 2에서 6 사이의 값으로 설정할 수 있고 최댓값보다 작거나 같아야 합니다.
toc_max_heading_levelnumber3목차에 표시되는 최대 제목 수준입니다. 2에서 6 사이의 값으로 설정할 수 있습니다.
keywordsstring[]undefinedKeywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
descriptionstring마크다운 콘텐츠 첫 번째 줄The description of your document, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head>, used by search engines.
imagestringundefined게시글에 대한 링크를 표시할 때 보여지는 커버 또는 섬네일 이미지를 설정합니다.
slugstring파일 경로Allows to customize the blog post URL (/<routeBasePath>/<slug>). Support multiple patterns: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.
type Tag = string | {label: string; permalink: string};

// author key 값은 전역 플러그인 authors.yml 파일에서 author 항목을 참조합니다.
type AuthorKey = string;

type Author = {
key?: AuthorKey;
name: string;
title?: string;
url?: string;
image_url?: string;
};

// 프런트 매터 authors 필드는 다양한 형태로 설정할 수 있습니다.
type Authors = AuthorKey | Author | (AuthorKey | Author)[];

예:

---
title: Welcome Docusaurus
authors:
- slorber
- yangshun
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
tags: [hello, docusaurus-v2]
description: This is my first post on Docusaurus.
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

A Markdown blog post

i18n

Read the i18n introduction first.

Translation files location

  • Base path: website/i18n/[locale]/docusaurus-plugin-content-blog
  • Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-blog-[pluginId]
  • JSON files: extracted with docusaurus write-translations
  • Markdown files: website/i18n/[locale]/docusaurus-plugin-content-blog

Example file-system structure

website/i18n/[locale]/docusaurus-plugin-content-blog

# website/blog에 대한 번역
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md

# 렌더링될 플러그인 옵션에 대한 번역
└── options.json