📦 plugin-content-blog

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

some features production only

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

설치

npm

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

Yarn

yarn add @docusaurus/plugin-content-blog

tip

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

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

설정

설정할 수 있는 필드

Name	Type	Default	Description
path	string	'blog'	Path to the blog content directory on the file system, relative to site dir.
editUrl	!!crwdBlockTags_275_sgaTkcolBdwrc!!	undefined	사이트를 편집하기 위한 기본 URL입니다. The final URL is computed by editUrl + relativePostPath. 옵션 사용 시 각 파일에 대한 세밀한 제어를 할 수 있습니다. 해당 필드를 설정하지 않으면 편집 링크가 비활성화됩니다.
editLocalizedFiles	boolean	false	편집 URL이 원본 파일 대신 현지화된 파일을 대상으로 처리되도록 합니다. editUrl이 함수인 경우에는 무시합니다.
blogTitle	string	'Blog'	더 나은 SEO를 위해 블로그 페이지 제목을 설정합니다.
blogDescription	string	'Blog'	더 나은 SEO를 위해 블로그 페이지 메타 설명을 설정합니다.
blogSidebarCount	!!crwdBlockTags_276_sgaTkcolBdwrc!!	5	블로그 사이드바에 표시할 블로그 게시물 수입니다. 'ALL' to show all blog posts; 0 to disable.
blogSidebarTitle	string	'Recent posts'	Title of the blog sidebar.
routeBasePath	string	'blog'	사이트에서 제공하는 블로그에 대한 URL 경로입니다. 절대 URL 끝에 슬래시를 붙이지 마세요. 블로그를 루트 경로로 설정할 때만 /를 사용합니다.
tagsBasePath	string	'tags'	URL route for the tags section of your blog. Will be appended to routeBasePath. 절대 URL 끝에 슬래시를 붙이지 마세요.
archiveBasePath	!!crwdBlockTags_277_sgaTkcolBdwrc!!	'archive'	URL route for the archive section of your blog. Will be appended to routeBasePath. 절대 URL 끝에 슬래시를 붙이지 마세요. 아카이브 생성을 하지 않으려면 null로 설정합니다.
include	string[]	['**/*.{md,mdx}']	Array of glob patterns matching Markdown files to be built, relative to the content path.
exclude	string[]	See example configuration	Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the include option.
postsPerPage	!!crwdBlockTags_278_sgaTkcolBdwrc!!	10	목록 페이지에서 페이지 당 표시할 게시물 수입니다. 하나의 목록 페이지에 모든 게시물을 표시하려면 'ALL'을 설정합니다.
blogListComponent	string	'@theme/BlogListPage'	블로그 목록 페이지의 루트 컴포넌트입니다.
blogPostComponent	string	'@theme/BlogPostPage'	각 블로그 게시물 페이지의 루트 컴포넌트입니다.
blogTagsListComponent	string	'@theme/BlogTagsListPage'	Root component of the tags list page.
blogTagsPostsComponent	string	'@theme/BlogTagsPostsPage'	Root component of the "posts containing tag" page.
blogArchiveComponent	string	'@theme/BlogArchivePage'	Root component of the blog archive page.
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 marking where the summary ends.
showReadingTime	boolean	true	블로그 게시물의 예상 읽기 시간을 표시합니다.
readingTime	ReadingTimeFunctionOption	예상 읽기 시간 기본값	예상 읽기 시간을 표시 시간을 사용자 지정하기 위한 콜백입니다.
authorsMapPath	string	'authors.yml'	Path to the authors map file, relative to the blog content directory.
feedOptions	예제 설정을 참조하세요	{type: ['rss', 'atom']}	블로그 피드입니다.
feedOptions.type	!!crwdBlockTags_279_sgaTkcolBdwrc!!	필수	생성할 피드 유형입니다. 생성을 하지 않으려면 null로 설정합니다.
feedOptions.title	string	siteConfig.title	피드 제목입니다.
feedOptions.description	string	!!crwdBlockTags_280_sgaTkcolBdwrc!!	피드 설명입니다.
feedOptions.copyright	string	undefined	저작권 관련 문구입니다.
feedOptions.language	string (사용할 수 있는 값은 documentation를 참고하세요)	undefined	피드의 언어 메타데이터입니다.
sortPosts	!!crwdBlockTags_281_sgaTkcolBdwrc!!	'descending'	블로그 게시물 정렬 순서를 설정합니다.

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

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

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

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

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

설정 예시

You can configure this plugin through preset options or plugin options.

tip

Most Docusaurus users configure this plugin through the preset options.

Preset Options

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

Plugin Options

If you are using a standalone plugin, provide options directly to the plugin:

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('remark-math')],
        rehypePlugins: [],
        beforeDefaultRemarkPlugins: [],
        beforeDefaultRehypePlugins: [],
        truncateMarker: /<!--s*(truncate)s*-->/,
        showReadingTime: true,
        feedOptions: {
          type: '',
          title: '',
          description: '',
          copyright: '',
          language: undefined,
        },
      },
    ],
  ],
};

Markdown front matter

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

설정할 수 있는 필드

필드명	타입	기본값	설명
authors	Authors	undefined	블로그 게시물 작성자 목록입니다(또는 작성자). 자세한 설명은 작성자 가이드를 참고하세요. Prefer authors over the author_* front matter fields, even for single author blog posts.
author	string	undefined	⚠️ authors를 사용할 것을 권장합니다. 블로그 게시물 작성자 이름입니다.
author_url	string	undefined	⚠️ authors를 사용할 것을 권장합니다. 작성자 이름에 링크로 연결될 URL을 설정합니다. 깃헙, 트위터, 페이스북 프로필 URL 등을 설정할 수 있습니다.
author_image_url	string	undefined	⚠️ authors를 사용할 것을 권장합니다. 작성자 썸네일 이미지 URL을 설정합니다.
author_title	string	undefined	⚠️ authors를 사용할 것을 권장합니다. 작성자에 대한 설명입니다.
title	string	마크다운 title	블로그 게시물 제목입니다.
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개의 필드로 구성된 오브젝트의 목록입니다.
draft	boolean	false	A boolean flag to indicate that the blog post is work-in-progress. Draft blog posts will only be displayed during development.
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	키워드 메타 태그입니다. <meta name="keywords" content="keyword1,keyword2,..."/> 태그가 안에 생성됩니다.<head>, 검색 엔진에서 사용합니다.
description	string	The first line of Markdown content	The description of your document, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> 태그가 안에 생성됩니다.<head>, used by search engines.
image	string	undefined	게시글에 대한 링크를 표시할 때 보여지는 커버 또는 섬네일 이미지를 설정합니다.
slug	string	File path	Allows to customize the blog post url (/<routeBasePath>/<slug>). 여러 패턴을 설정할 수도 있습니다: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.

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

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

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

// The front matter authors field allows various possible shapes
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

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
│
│ # translations for website/blog
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md
│
│ # translations for the plugin options that will be rendered
└── options.json