๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ
๋ฒ„์ „: 2.4.3

๐Ÿ“ฆ 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*-->/์š”์•ฝ์ด ๋๋‚˜๋Š” ๊ณณ์„ ํ‘œ์‹œํ•˜๋Š” 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.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โ€‹

ํ”„๋ฆฌ์…‹ ์˜ต์…˜์ด๋‚˜ ํ”Œ๋Ÿฌ๊ทธ์ธ ์˜ต์…˜์—์„œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํŒ

๋Œ€๋ถ€๋ถ„์˜ ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ์‚ฌ์šฉ์ž๋Š” ํ”„๋ฆฌ์…‹ ์˜ต์…˜์„ ์‚ฌ์šฉํ•ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

If you use a preset, configure this plugin through the preset options:

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('remark-math')],
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์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๊นƒํ—ˆ๋ธŒ๋‚˜ ํŠธ์œ„ํ„ฐ, ํŽ˜์ด์Šค๋ถ ํ”„๋กœํ•„ ๋“ฑ์„ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
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๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์ด ์ž‘์—… ์ค‘์ž„์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ถ€์šธ ํ”Œ๋ž˜๊ทธ์ž…๋‹ˆ๋‹ค. ๋น„๊ณต๊ฐœ ์„ค์ • ๊ฒŒ์‹œ๋ฌผ์€ ๊ฐœ๋ฐœ ์ƒํƒœ์—์„œ๋งŒ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
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 v2
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 2.
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