버전: 3.2.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.

설치

npm
Yarn
pnpm
Bun

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

yarn add @docusaurus/plugin-content-blog

pnpm add @docusaurus/plugin-content-blog

bun 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.

설정

설정할 수 있는 필드

옵션명	타입	기본값	설명
`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`.
`pageBasePath`	`string`	`'page'`	URL route for the pages section of your blog. Will be appended to `routeBasePath`.
`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`	`/<!--\struncate\s-->/` \| `\{\/\\struncate\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.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.language`	`string` (See documentation for possible values)	`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`, use`fetch-depth: 0`.

타입

`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[]>;

`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, ...

설치​

설정​

타입​

EditUrlFn​

ReadingTimeFn​

FeedType​

CreateFeedItemsFn​

ProcessBlogPostsFn​

설정 예시​

설치

설정

타입