๐ฆ plugin-content-blog
Provides the Blog feature and is the default blog plugin for Docusaurus.
The feed feature works by extracting the build output, and is only active in production.
Installationโ
- npm
- Yarn
- pnpm
npm install --save @docusaurus/plugin-content-blog
yarn add @docusaurus/plugin-content-blog
pnpm add @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โ
์ค์ ํ ์ ์๋ ํ๋
์ต์ ๋ช | ํ์ | ๊ธฐ๋ณธ๊ฐ | ์ค๋ช |
---|---|---|---|
path | string | 'blog' | ์ฌ์ดํธ ๋๋ ํ ๋ฆฌ์ ์๋์ ์ธ ํ์ผ ์์คํ ์ ๋ธ๋ก๊ทธ ์ฝํ ์ธ ๋๋ ํ ๋ฆฌ ๊ฒฝ๋ก์ ๋๋ค. |
editUrl | string | EditUrlFn | undefined | ์ฌ์ดํธ๋ฅผ ํธ์งํ๊ธฐ ์ํ Base URL์
๋๋ค. The final URL is computed by editUrl + relativePostPath . ์ต์
์ฌ์ฉ ์ ๊ฐ ํ์ผ์ ๋ํ ์ธ๋ฐํ ์ ์ด๋ฅผ ํ ์ ์์ต๋๋ค. ํด๋น ํ๋๋ฅผ ์ค์ ํ์ง ์์ผ๋ฉด ํธ์ง ๋งํฌ๊ฐ ๋นํ์ฑํ๋ฉ๋๋ค. |
editLocalizedFiles | boolean | false | ํธ์ง URL์ ํ์งํ๋์ง ์์ ์๋ณธ ํ์ผ ๋์ ํ์งํ๋ ํ์ผ์ ๋์์ผ๋ก ํฉ๋๋ค. Ignored when editUrl is a function. |
blogTitle | string | 'Blog' | ๋ ๋์ SEO๋ฅผ ์ํ ๋ธ๋ก๊ทธ ํ์ด์ง ์ ๋ชฉ |
blogDescription | string | 'Blog' | ๋ ๋์ SEO๋ฅผ ์ํ ๋ธ๋ก๊ทธ ํ์ด์ง ๋ฉํ ์ค๋ช |
blogSidebarCount | number | 'ALL' | 5 | ๋ธ๋ก๊ทธ ์ฌ์ด๋๋ฐ์ ํ์ํ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์์
๋๋ค. 'ALL' to show all blog posts; 0 to disable. |
blogSidebarTitle | string | 'Recent posts' | ๋ธ๋ก๊ทธ ์ฌ์ด๋๋ฐ ์ ๋ชฉ |
routeBasePath | string | 'blog' | ์ฌ์ดํธ ๋ธ๋ก๊ทธ ์น์
์ ๋ํ URL ๋ผ์ฐํธ DO NOT include a trailing slash. Use / to put the blog at root path. |
tagsBasePath | string | 'tags' | ๋ธ๋ก๊ทธ ํ๊ทธ ์น์
์ ๋ํ URL ๋ผ์ฐํธ Will be appended to routeBasePath . DO NOT include a trailing slash. |
archiveBasePath | string | null | 'archive' | ๋ธ๋ก๊ทธ ์์นด์ด๋ธ ์น์
์ ๋ํ URL ๋ผ์ฐํธ Will be appended to routeBasePath . DO NOT include a trailing slash. Use null to disable generation of archive. |
include | string[] | ['**/*.{md,mdx}'] | ์ฝํ ์ธ ๊ฒฝ๋ก๋ฅผ ๊ธฐ์ค์ผ๋ก ๋น๋ํ ๋งํฌ๋ค์ด ํ์ผ๊ณผ ์ผ์นํ๋ glob ํจํด ๋ฐฐ์ด์ ๋๋ค. |
exclude | string[] | See example configuration | ์ ์ธํ ๋งํฌ๋ค์ด ํ์ผ๊ณผ ์ผ์นํ๋ glob ํจํด ๋ฐฐ์ด์
๋๋ค. Serves as refinement based on the include option. |
postsPerPage | number | 'ALL' | 10 | ๋ชฉ๋ก ํ์ด์ง์์ ํ์ด์ง ๋น ํ์ํ ๊ฒ์๋ฌผ ์์
๋๋ค. Use 'ALL' to display all posts on one listing page. |
blogListComponent | string | '@theme/BlogListPage' | ๋ธ๋ก๊ทธ ๋ชฉ๋ก ํ์ด์ง์ ๋ฃจํธ ์ปดํฌ๋ํธ |
blogPostComponent | string | '@theme/BlogPostPage' | ๊ฐ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ํ์ด์ง์ ๋ฃจํธ ์ปดํฌ๋ํธ |
blogTagsListComponent | string | '@theme/BlogTagsListPage' | ํ๊ทธ ๋ชฉ๋ก ํ์ด์ง์ ๋ฃจํธ ์ปดํฌ๋ํธ |
blogTagsPostsComponent | string | '@theme/BlogTagsPostsPage' | "ํ๊ทธ๋ฅผ ํฌํจํ ๊ฒ์๋ฌผ" ํ์ด์ง์ ๋ฃจํธ ์ปดํฌ๋ํธ |
blogArchiveComponent | string | '@theme/BlogArchivePage' | ๋ธ๋ก๊ทธ ์์นด์ด๋ธ ํ์ด์ง์ ๋ฃจํธ ์ปดํฌ๋ํธ |
remarkPlugins | any[] | [] | MDX์ ์ ๋ฌ๋ Remark ํ๋ฌ๊ทธ์ธ |
rehypePlugins | any[] | [] | MDX์ ์ ๋ฌ๋ Rehype ํ๋ฌ๊ทธ์ธ |
beforeDefaultRemarkPlugins | any[] | [] | ๊ธฐ๋ณธ ๋ํ์ฌ์ฐ๋ฃจ์ค Remark ํ๋ฌ๊ทธ์ธ๋ณด๋ค ๋จผ์ MDX์ ์ ๋ฌ๋ ์ฌ์ฉ์ ์ง์ Remark ํ๋ฌ๊ทธ์ธ |
beforeDefaultRehypePlugins | any[] | [] | ๊ธฐ๋ณธ ๋ํ์ฌ์ฐ๋ฃจ์ค Rehype ํ๋ฌ๊ทธ์ธ๋ณด๋ค ๋จผ์ MDX์ ์ ๋ฌ๋ ์ฌ์ฉ์ ์ง์ Rehype ํ๋ฌ๊ทธ์ธ |
truncateMarker | RegExp | /<!--\s*(truncate)\s*-->/ | ์์ฝ์ด ๋๋๋ ๊ณณ์ ํ์ํ๋ Truncate marker |
showReadingTime | boolean | true | ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ์์ ์ฝ๊ธฐ ์๊ฐ์ ํ์ |
readingTime | ReadingTimeFn | ๊ธฐ๋ณธ ์ฝ๊ธฐ ์๊ฐ | ํ์๋๋ ์ฝ๊ธฐ ์๊ฐ ์ซ์๋ฅผ ์ฌ์ฉ์ ์ง์ ํ๊ธฐ ์ํ ์ฝ๋ฐฑ |
authorsMapPath | string | 'authors.yml' | ๋ธ๋ก๊ทธ ์ฝํ ์ธ ๋๋ ํ ๋ฆฌ์ ์๋์ ์ธ ์์ฑ์ ๋งต ํ์ผ ๊ฒฝ๋ก |
feedOptions | See below | {type: ['rss', 'atom']} | ๋ธ๋ก๊ทธ ํผ๋ |
feedOptions.type | FeedType | FeedType[] | 'all' | null | Required | ์์ฑํ ํผ๋ ์ ํ์
๋๋ค. Use null to disable generation. |
feedOptions.createFeedItems | CreateFeedItemsFn | undefined | undefined | ํผ๋ ํญ๋ชฉ์ ๋ณํํ๊ฑฐ๋ ํํฐ๋งํ ๋ ์ฌ์ฉํ ์ ์๋ ์ ํ ๊ธฐ๋ฅ |
feedOptions.title | string | siteConfig.title | ํผ๋ ์ ๋ชฉ |
feedOptions.description | string | `${siteConfig.title} Blog` | ํผ๋ ์ค๋ช |
feedOptions.copyright | string | undefined | ์ ์๊ถ ๋ฌธ๊ตฌ |
feedOptions.language | string (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โ
ํ๋ฆฌ์ ์ต์ ์ด๋ ํ๋ฌ๊ทธ์ธ ์ต์ ์์ ํ๋ฌ๊ทธ์ธ์ ์ค์ ํ ์ ์์ต๋๋ค.
๋๋ถ๋ถ์ ๋ํ์ฌ์ฐ๋ฃจ์ค ์ฌ์ฉ์๋ ํ๋ฆฌ์ ์ต์ ์ ์ฌ์ฉํด ํ๋ฌ๊ทธ์ธ์ ์ค์ ํฉ๋๋ค.
- Preset options
- Plugin options
If you use a preset, configure this plugin through the preset options:
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,
});
},
},
},
},
],
],
};
If you are using a standalone plugin, provide options directly to the plugin:
module.exports = {
plugins: [
[
'@docusaurus/plugin-content-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.
์ค์ ํ ์ ์๋ ํ๋
์ต์ ๋ช | ํ์ | ๊ธฐ๋ณธ๊ฐ | ์ค๋ช |
---|---|---|---|
authors | Authors | undefined | ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์์ฑ์๋ค(๋๋ ๋จ๋
์์ฑ์) ๋ชฉ๋ก Read the authors guide for more explanations. Prefer authors over the author_* front matter fields, even for single author blog posts. |
author | string | undefined | โ ๏ธ Prefer using authors . ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์์ฑ์ ์ด๋ฆ์
๋๋ค. |
author_url | string | undefined | โ ๏ธ Prefer using authors . ์์ฑ์ ์ด๋ฆ์ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ URL์ ์ค์ ํฉ๋๋ค. ๊นํ๋ธ๋ ํธ์ํฐ, ํ์ด์ค๋ถ ํ๋กํ ๋ฑ์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค. |
author_image_url | string | undefined | โ ๏ธ Prefer using authors . ์์ฑ์ ์ธ๋ค์ผ ์ด๋ฏธ์ง URL์ ์ค์ ํฉ๋๋ค. |
author_title | string | undefined | โ ๏ธ Prefer using authors . ์์ฑ์์ ๋ํ ์ค๋ช
์
๋๋ค. |
title | string | ๋งํฌ๋ค์ด ํ์ผ | ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์ ๋ชฉ |
date | string | ํ์ผ๋ช ๋๋ ํ์ผ ์์ฑ ์๊ฐ | ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์์ฑ ์๊ฐ. 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 . ๊ทธ๋ ์ง ์์ผ๋ฉด ๋งํฌ๋ค์ด ํ์ผ์ ์์ฑํ ์๊ฐ์ผ๋ก ์ค์ ๋ฉ๋๋ค. |
tags | Tag[] | undefined | A list of strings or objects of two string fields label and permalink to tag to your post. |
draft | boolean | false | ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ด ์์ ์ค์์ ๋ํ๋ด๋ ๋ถ์ธ ํ๋๊ทธ์ ๋๋ค. ๋น๊ณต๊ฐ ์ค์ ๊ฒ์๋ฌผ์ ๊ฐ๋ฐ ์ํ์์๋ง ํ์ธํ ์ ์์ต๋๋ค. |
hide_table_of_contents | boolean | false | ๋ชฉ์ฐจ๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ์จ๊ธธ์ง ์ฌ๋ถ |
toc_min_heading_level | number | 2 | ๋ชฉ์ฐจ ์ ํ์๋๋ ์ต์ ์ ๋ชฉ ์์ค์ ๋๋ค. 2์์ 6 ์ฌ์ด์ ๊ฐ์ผ๋ก ์ค์ ํ ์ ์๊ณ ์ต๋๊ฐ๋ณด๋ค ์๊ฑฐ๋ ๊ฐ์์ผ ํฉ๋๋ค. |
toc_max_heading_level | number | 3 | ๋ชฉ์ฐจ์ ํ์๋๋ ์ต๋ ์ ๋ชฉ ์์ค์ ๋๋ค. 2์์ 6 ์ฌ์ด์ ๊ฐ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค. |
keywords | string[] | undefined | Keywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head> , used by search engines. |
description | string | ๋งํฌ๋ค์ด ์ฝํ ์ธ ์ฒซ ๋ฒ์งธ ์ค | 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. |
image | string | undefined | ๊ฒ์๊ธ์ ๋ํ ๋งํฌ๋ฅผ ํ์ํ ๋ ๋ณด์ฌ์ง๋ ์ปค๋ฒ ๋๋ ์ฌ๋ค์ผ ์ด๋ฏธ์ง๋ฅผ ์ค์ ํฉ๋๋ค. |
slug | string | ํ์ผ ๊ฒฝ๋ก | 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