📦 plugin-content-blog

블로그 만들기 기능을 제공하는 도큐사우루스의 기본 블로그 플러그인입니다.

some features production only

피드 기능은 빌드 산출물에서만 작동하며 제품 버전에서만 활성화됩니다.

설치

npm

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

Yarn

yarn add @docusaurus/plugin-content-blog

pnpm

pnpm add @docusaurus/plugin-content-blog

팁

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

You can configure this plugin through the preset options.

설정

설정할 수 있는 필드

옵션명	타입	기본값	설명
path	string	'blog'	사이트 디렉토리에 상대적인 파일 시스템의 블로그 콘텐츠 디렉토리 경로입니다.
editUrl	string | EditUrlFn	undefined	사이트를 편집하기 위한 Base URL입니다. 최종 URL은 editUrl + relativePostPath 형태로 처리됩니다. 옵션 사용 시 각 파일에 대한 세밀한 제어를 할 수 있습니다. 해당 필드를 설정하지 않으면 편집 링크가 비활성화됩니다.
editLocalizedFiles	boolean	false	편집 URL은 현지화되지 않은 원본 파일 대신 현지화된 파일을 대상으로 합니다. editUrl이 함수인 경우에는 무시합니다.
blogTitle	string	'Blog'	더 나은 SEO를 위한 블로그 페이지 제목
blogDescription	string	'Blog'	더 나은 SEO를 위한 블로그 페이지 메타 설명
blogSidebarCount	number | 'ALL'	5	블로그 사이드바에 표시할 블로그 게시물 수입니다. 모든 블로그 게시물을 표시하려면 'ALL', 감추려면 0
blogSidebarTitle	string	'Recent posts'	블로그 사이드바 제목
routeBasePath	string	'blog'	사이트 블로그 섹션에 대한 URL 라우트 트레일링 슬래시를 포함하지 마세요. 블로그를 루트 경로로 설정할 때만 /를 사용합니다.
tagsBasePath	string	'tags'	블로그 태그 섹션에 대한 URL 라우트 routeBasePath에 추가됩니다.
pageBasePath	string	'page'	URL route for the pages section of your blog. routeBasePath에 추가됩니다.
archiveBasePath	string | null	'archive'	블로그 아카이브 섹션에 대한 URL 라우트 routeBasePath에 추가됩니다. 트레일링 슬래시를 포함하지 마세요. 아카이브 생성을 하지 않으려면 null로 설정합니다.
authorsBasePath	string	'authors'	URL route for the authors pages of your blog. Will be appended to path.
include	string[]	['**/*.{md,mdx}']	콘텐츠 경로를 기준으로 빌드할 마크다운 파일과 일치하는 glob 패턴 배열입니다.
exclude	string[]	설정 예시를 참조하세요	제외할 마크다운 파일과 일치하는 glob 패턴 배열입니다. include 옵션을 좀 더 세분화하는 역할을 합니다.
postsPerPage	number | 'ALL'	10	목록 페이지에서 페이지 당 표시할 게시물 수입니다. 하나의 목록 페이지에 모든 게시물을 표시하려면 'ALL'을 설정합니다.
blogListComponent	string	'@theme/BlogListPage'	블로그 목록 페이지의 루트 컴포넌트
blogPostComponent	string	'@theme/BlogPostPage'	각 블로그 게시물 페이지의 루트 컴포넌트
blogTagsListComponent	string	'@theme/BlogTagsListPage'	태그 목록 페이지의 루트 컴포넌트
blogTagsPostsComponent	string	'@theme/BlogTagsPostsPage'	"태그를 포함한 게시물" 페이지의 루트 컴포넌트
blogArchiveComponent	string	'@theme/BlogArchivePage'	블로그 아카이브 페이지의 루트 컴포넌트
blogAuthorsPostsComponent	string	'@theme/Blog/Pages/BlogAuthorsPostsPage'	Root component of the blog author page.
blogAuthorsListComponent	string	'@theme/Blog/Pages/BlogAuthorsListPage'	Root component of the blog authors page index.
remarkPlugins	any[]	[]	MDX에 전달된 Remark 플러그인
rehypePlugins	any[]	[]	MDX에 전달된 Rehype 플러그인
rehypePlugins	any[]	[]	Recma plugins passed to MDX.
beforeDefaultRemarkPlugins	any[]	[]	기본 도큐사우루스 Remark 플러그인보다 먼저 MDX에 전달된 사용자 지정 Remark 플러그인
beforeDefaultRehypePlugins	any[]	[]	기본 도큐사우루스 Rehype 플러그인보다 먼저 MDX에 전달된 사용자 지정 Rehype 플러그인
truncateMarker	RegExp	/<!--\s*truncate\s*-->/ \	\{\/\*\s*truncate\s*\*\/\}/
showReadingTime	boolean	true	블로그 게시물의 예상 읽기 시간을 표시
readingTime	ReadingTimeFn	기본 읽기 시간	표시되는 읽기 시간 숫자를 사용자 지정하기 위한 콜백
authorsMapPath	string	'authors.yml'	블로그 콘텐츠 디렉토리에 상대적인 작성자 맵 파일 경로
feedOptions	아래를 참조하세요.	{type: ['rss', 'atom']}	블로그 피드
feedOptions.type	FeedType | FeedType[] | 'all' | null	필수	생성할 피드 유형입니다. 생성을 하지 않으려면 null로 설정합니다.
feedOptions.createFeedItems	CreateFeedItemsFn | undefined	undefined	피드 항목을 변환하거나 필터링할 때 사용할 수 있는 선택 기능
feedOptions.limit	number | null | false	20	Limits the feed to the specified number of posts, false or null for all entries. Defaults to 20.
feedOptions.title	string	siteConfig.title	피드 제목
feedOptions.description	string	`${siteConfig.title} Blog`	피드 설명
feedOptions.copyright	string	undefined	저작권 문구
feedOptions.xslt	boolean | FeedXSLTOptions	undefined	Permits to style the blog XML feeds with XSLT so that browsers render them nicely.
feedOptions.language	string (사용할 수 있는 값은 문서를 참고)	undefined	피드 언어 메타데이터
sortPosts	'descending' | 'ascending'	'descending'	블로그 게시물 정렬 순서 설정
processBlogPosts	ProcessBlogPostsFn	undefined	An optional function which can be used to transform blog posts (filter, modify, delete, etc...).
showLastUpdateAuthor	boolean	false	Whether to display the author who last updated the blog post.
showLastUpdateTime	boolean	false	Whether to display the last date the blog 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, usefetch-depth: 0.
tags	string | false | null | undefined	tags.yml	Path to the YAML tags file listing pre-defined tags. Relative to the blog content directory.
onInlineTags	'ignore' | 'log' | 'warn' | 'throw'	warn	The plugin behavior when blog posts contain inline tags (not appearing in the list of pre-defined tags, usually tags.yml).
onUntruncatedBlogPosts	'ignore' | 'log' | 'warn' | 'throw'	warn	The plugin behavior when blog posts do not contain a truncate marker.

타입

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';

FeedXSLTOptions

Permits to style the blog XML feeds so that browsers render them nicely with XSLT.

• Use true to let the blog use its built-in .xsl and .css files to style the blog feed
• Use a falsy value (undefined | null | false) to disable the feature
• Use a string to provide a file path to a custom .xsl file relative to the blog content folder. By convention, you must provide a .css file with the exact same name.

type FeedXSLTOptions =
  | boolean
  | undefined
  | null
  | {
      rss?: string | boolean | null | undefined;
      atom?: string | boolean | null | undefined;
    };

CreateFeedItemsFn

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

ProcessBlogPostsFn

type ProcessBlogPostsFn = (params: {
  blogPosts: BlogPost[];
}) => Promise<void | BlogPost[]>;

설정 예시

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

팁

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

프리셋 옵션

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

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,
              });
            },
          },
        },
      },
    ],
  ],
};

플러그인 옵션

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

docusaurus.config.js

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('./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 documents can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

설정할 수 있는 필드

옵션명	타입	기본값	설명
authors	Authors	undefined	블로그 게시물 작성자들(또는 단독 작성자) 목록 자세한 설명은 authors 가이드를 참조하세요. 블로그 게시물 작성자가 한 명인 경우에도 author_*보다는 authors를 프런트 매터 필드로 권장합니다.
author	string	undefined	⚠️ authors 사용을 권장합니다. 블로그 게시물 작성자 이름입니다.
author_url	string	undefined	⚠️ authors 사용을 권장합니다. 작성자 이름에 링크로 연결될 URL을 설정합니다. This could be a GitHub, X, Facebook profile URL, etc.
author_image_url	string	undefined	⚠️ authors 사용을 권장합니다. 작성자 썸네일 이미지 URL을 설정합니다.
author_title	string	undefined	⚠️ authors 사용을 권장합니다. 작성자에 대한 설명입니다.
title	string	마크다운 파일	블로그 게시물 제목
date	string	파일명 또는 파일 생성 시간	블로그 게시물 생성 시간. 해당 필드를 설정하지 않으면 파일 또는 폴더명에서 추출할 수 있습니다. 예를 들면 다음과 같은 형식입니다. 2021-04-15-blog-post.mdx, 2021-04-15-blog-post/index.mdx, 2021/04/15/blog-post.mdx. 그렇지 않으면 마크다운 파일을 생성한 시간으로 설정됩니다.
tags	Tag[]	undefined	포스트를 태그하기 위한 문자열 또는 오브젝트의 목록입니다. label과 permalink 2개의 필드로 구성됩니다. Strings can be a reference to keys of a tags file (usually tags.yml)
draft	boolean	false	비공개 설정 게시물은 개발 상태에서만 확인할 수 있습니다.
unlisted	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	<head> 태그 내에 <meta name="keywords" content="keyword1,keyword2,..."/> 형태로 생성되는 키워드 메타 태그를 설정합니다. 검색 엔진에서 사용합니다.
description	string	마크다운 콘텐츠 첫 번째 줄	문서의 설명은 검색엔진에서 사용할 수 있게 <head> 태그 안에 <meta name="description" content="..."/>와 <meta property="og:description" content="..."/>로 처리됩니다.
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.
slug	string	파일 경로	블로그 포스트 URL을 변경할 수 있도록 허용합니다(/<routeBasePath>/<slug>). 여러 패턴을 설정할 수도 있습니다: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.
last_update	FrontMatterLastUpdate	undefined	Allows overriding the last update author/date. 사용할 수 있는 날짜 형식은 parsable date string을 참고하세요.

type FrontMatterLastUpdate = {date?: string; author?: string};

type Tag = string | {label: string; permalink: string};

// An author key references an author from the global plugin authors.yml file
type AuthorKey = string;

// Social platform name -> Social platform link
// Example: {MyPlatform: 'https://myplatform.com/myusername'}
// Pre-defined platforms ("x", "github", "twitter", "linkedin", "stackoverflow") accept handles:
// Example: {github: 'slorber'}
type AuthorSocials = Record<string, string>;

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

// The front matter authors field allows various possible shapes
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
    socials:
      x: joelmarcey
      github: JoelMarcey
tags: [docusaurus]
description: This is my first post on Docusaurus.
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

A Markdown blog post

Tags File

Use the tags plugin option to configure the path of a YAML tags file.

By convention, the plugin will look for a tags.yml file at the root of your content folder(s).

This file can contain a list of predefined tags. You can reference these tags by their keys in Markdown files thanks to the tags front matter.

Keeping tags consistent

Using a tags file, you can ensure that your tags usage is consistent across your plugin content set. Use the onInlineTags: 'throw' plugin option to enforce this consistency and prevent usage of inline tags declared on the fly.

Types

The YAML content of the provided tags file should respect the following shape:

type Tag = {
  label?: string; // Tag display label
  permalink?: string; // Tag URL pathname segment
  description?: string; // Tag description displayed in the tag page
};

type TagsFileInput = Record<string, Partial<Tag> | null>;

Example

tags.yml

releases:
  label: 'Product releases'
  permalink: '/product-releases'
  description: 'Content related to product releases.'

# A partial tag definition is also valid
announcements:
  label: 'Announcements'

# An empty tag definition is also valid
# Other attributes will be inferred from the key
emptyTag:

content.md

---
tags: [releases, announcements, emptyTag]
---

# Title

Content

Authors File

Use the authors plugin option to configure the path of a YAML authors file.

By convention, the plugin will look for a authors.yml file at the root of your blog content folder(s).

This file can contain a list of predefined global blog authors. You can reference these authors by their keys in Markdown files thanks to the authors front matter.

타입

The YAML content of the provided authors file should respect the following shape:

type AuthorsMapInput = {
  [authorKey: string]: AuthorInput;
};

type AuthorInput = {
  name?: string;
  title?: string;
  description?: string;
  imageURL?: string;
  url?: string;
  email?: string;
  page?: boolean | {permalink: string};
  socials?: Record<string, string>;
  [customAuthorAttribute: string]: unknown;
};

예

tags.yml

slorber:
  name: Sébastien Lorber
  title: Docusaurus maintainer
  url: https://sebastienlorber.com
  image_url: https://github.com/slorber.png
  page: true
  socials:
    x: sebastienlorber
    github: slorber

jmarcey:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
  page:
    permalink: '/joel-marcey'
  socials:
    x: joelmarcey
    github: JoelMarcey

blog/my-blog-post.md

---
authors: [slorber, jmarcey]
---

# My Blog Post

Content

i18n

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

번역 파일 위치

• Base path: website/i18n/[locale]/docusaurus-plugin-content-blog
• Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-blog-[pluginId]
• JSON 파일: docusaurus write-translations 명령 실행 후 만들어진 파일
• Markdown files: website/i18n/[locale]/docusaurus-plugin-content-blog

파일 시스템 구조 예

website/i18n/[locale]/docusaurus-plugin-content-blog
│
│ # website/blog에 대한 번역
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md
│
│ # 렌더링될 플러그인 옵션에 대한 번역
└── options.json