버전: 2.4.0

블로그

블로그 기능을 사용하면 모든 기능을 갖춘 블로그를 즉시 배포할 수 있습니다.

정보

Check the Blog Plugin API Reference documentation for an exhaustive list of options.

Initial setup

To set up your site's blog, start by creating a blog directory.

Then, add an item link to your blog within docusaurus.config.js:

docusaurus.config.js
module.exports = {
  themeConfig: {
    // ...
    navbar: {
      items: [
        // ...
        {to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right'
      ],
    },
  },
};

Adding posts

블로그를 게시하기 위해서는 블로그 디렉터리에 마크다운 파일을 만드세요.

For example, create a file at website/blog/2019-09-05-hello-docusaurus-v2.md:

website/blog/2019-09-05-hello-docusaurus-v2.md
---
title: Welcome Docusaurus v2
description: This is my first post on Docusaurus 2.
slug: welcome-docusaurus-v2
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/).

<!--truncate-->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

The front matter is useful to add more metadata to your blog post, for example, author information, but Docusaurus will be able to infer all necessary metadata without the front matter. For all possible fields, see the API documentation.

Blog list

The blog's index page (by default, it is at /blog) is the blog list page, where all blog posts are collectively displayed.

Use the  marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above  will be part of the summary. 예를 들면 아래와 같은 형식입니다.

---
title: Truncation Example
---

All these will be part of the blog post summary.

Even this.

<!--truncate-->

But anything from here on down will not be.

Not this.

Or this.

By default, 10 posts are shown on each blog list page, but you can control pagination with the postsPerPage option in the plugin configuration. If you set postsPerPage: 'ALL', pagination will be disabled and all posts will be displayed on the first page. 검색엔진최적화를 위해 블로그 게시물 목록 페이지에 메타 설명을 추가할 수 있습니다.

docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogTitle: 'Docusaurus blog!',
          blogDescription: 'A Docusaurus powered blog!',
          postsPerPage: 'ALL',
        },
      },
    ],
  ],
};

블로그 사이드바에는 최근 블로그 게시물이 표시됩니다. The default number of items shown is 5, but you can customize with the blogSidebarCount option in the plugin configuration. By setting blogSidebarCount: 0, the sidebar will be completely disabled, with the container removed as well. 해당 설정 시에는 메인 영역의 너비가 늘어나게 됩니다. Specially, if you have set blogSidebarCount: 'ALL', all posts will be displayed.

You can also alter the sidebar heading text with the blogSidebarTitle option. For example, if you have set blogSidebarCount: 'ALL', instead of the default "Recent posts", you may rather make it say "All posts":

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogSidebarTitle: 'All posts',
          blogSidebarCount: 'ALL',
        },
      },
    ],
  ],
};

Blog post date

Docusaurus will extract a YYYY-MM-DD date from a file/folder name such as YYYY-MM-DD-my-blog-post-title.md.

Example supported patterns

패턴	예
단일 파일	`2021-05-28-my-blog-post-title.md`
MDX 파일	`2021-05-28-my-blog-post-title.mdx`
Single folder + `index.md`	`2021-05-28-my-blog-post-title/index.md`
날짜 폴더명	`2021-05-28/my-blog-post-title.md`
중첩된 날짜 기준 폴더	`2021/05/28/my-blog-post-title.md`
부분적으로 중첩된 날짜 기준 폴더	`2021/05-28-my-blog-post-title.md`
Nested folders + `index.md`	`2021/05/28/my-blog-post-title/index.md`
경로 중간에 부분적으로 중첩된 날짜 기준 폴더	`category/2021/05-28-my-blog-post-title.md`

날짜는 경로에서 제거되고 URL 슬러그 시작 부분에 추가됩니다.

팁

폴더를 사용하면 마크다운 파일과 블로그 게시물 이미지를 쉽게 찾을 수 있습니다.

이런 형태의 명명 규칙은 선택 사항이며 프런트매터에서 날짜를 지정할 수 있습니다. 프런트 매터는 날짜/시간 표기법이 지원되는 YAML 구문을 따르므로 더 세분화된 게시 날짜가 필요한 경우 프런트 매터를 사용할 수 있습니다. 예를 들어 같은 날 게시된 게시물이 여러 개인 경우 시간에 따라 정렬할 수 있습니다.

earlier-post.md
---
date: 2021-09-13T10:00
---

later-post.md
---
date: 2021-09-13T18:00
---

Blog post authors

Use the authors front matter field to declare blog post authors. An author should have at least a name or an image_url. Docusaurus uses information like url, email, and title, but any other information is allowed.

Inline authors

프런트매터 안에 직접 블로그 게시물 작성자를 설정할 수 있습니다.

Single author
Multiple authors

my-blog-post.md
---
authors:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
---

my-blog-post.md
---
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    email: [email protected]
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
---

팁

처음 시작하거나 비정기적으로 작성하는 작성자에게 가장 적합한 옵션입니다.

정보

Prefer using the authors front matter, but the legacy author_* front matter remains supported:

my-blog-post.md
---
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---

Global authors

정기적으로 블로그 게시물을 작성하는 작성자는 매번 블로그 게시물에 직접 작성자 정보를 입력하는 것은 지겨운 일이 될 수 있습니다.

설정 파일에 해당 작성자를 전역으로 사용하도록 선언할 수 있습니다.

website/blog/authors.yml
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]

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

팁

Use the authorsMapPath plugin option to configure the path. JSON 형식도 지원합니다.

블로그 게시물 프런트매터에서 설정 파일에 선언된 전역 작성자를 참조할 수 있습니다.

Single author
Multiple authors

my-blog-post.md
---
authors: jmarcey
---

my-blog-post.md
---
authors: [jmarcey, slorber]
---

정보

The authors system is very flexible and can suit more advanced use-case:

Mix inline authors and global authors

미리 설정한 작성자를 사용하며 필요한 경우 직접 작성자를 설정할 수 있습니다.

my-blog-post.md
---
authors:
  - jmarcey
  - slorber
  - name: Inline Author name
    title: Inline Author Title
    url: https://github.com/inlineAuthor
    image_url: https://github.com/inlineAuthor
---

Local override of global authors

블로그 게시물마다 미리 설정한 작성자 데이터를 직접 설정할 수 있습니다.

my-blog-post.md
---
authors:
  - key: jmarcey
    title: Joel Marcey's new title
  - key: slorber
    name: Sébastien Lorber's new name
---

Localize the author's configuration file

설정 파일을 현지화할 수 있습니다. 아래 경로에 현지화된 사본을 생성합니다.

website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml

프런트매터나 저자 정보맵에 선언된 저자 정보에는 이름 또는 아바타 또는 두가지 모두 선언되어야 합니다. 모든 게시물의 저자 정보에 이름이 없다면 도큐사우루스에서는 해당 아바타를 간략하게 표시합니다. See this test post for the effect.

Feed generation

RSS feeds require the author's email to be set for the author to appear in the feed.

Reading time

도큐사우루스는 사용한 단어 숫자에 따라 각 블로그 게시물을 읽는데 필요한 시간을 생성합니다. 해당 기능을 사용자 지정하기 위한 옵션도 제공합니다.

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true, // When set to false, the "x min read" won't be shown
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 300}}),
        },
      },
    ],
  ],
};

The readingTime callback receives three parameters: the blog content text as a string, front matter as a record of string keys and their values, and the default reading time function. It returns a number (reading time in minutes) or undefined (disable reading time for this page).

The default reading time is able to accept additional options: wordsPerMinute as a number (default: 300), and wordBound as a function from string to boolean. If the string passed to wordBound should be a word bound (spaces, tabs, and line breaks by default), the function should return true.

팁

필요에 따라 콜백 설정을 수정할 수 있습니다.

Per-post disabling
Passing options
Using custom algorithms

Disable reading time on one page:

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true,
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            frontMatter.hide_reading_time
              ? undefined
              : defaultReadingTime({content}),
        },
      },
    ],
  ],
};

사용법:

---
hide_reading_time: true
---

This page will no longer display the reading time stats!

Pass options to the default reading time function:

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 100}}),
        },
      },
    ],
  ],
};

Use a custom implementation of reading time:

docusaurus.config.js
const myReadingTime = require('./myReadingTime');

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content}) => myReadingTime(content),
        },
      },
    ],
  ],
};

Feed

You can generate RSS / Atom / JSON feed by passing feedOptions. RSS와 Atom 피드는 기본적으로 생성됩니다. To disable feed generation, set feedOptions.type to null.

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

type BlogOptions = {
  feedOptions?: {
    type?: FeedType | 'all' | FeedType[] | null;
    title?: string;
    description?: string;
    copyright: string;
    language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
    /** Allow control over the construction of BlogFeedItems */
    createFeedItems?: (params: {
      blogPosts: BlogPost[];
      siteConfig: DocusaurusConfig;
      outDir: string;
      defaultCreateFeedItems: (params: {
        blogPosts: BlogPost[];
        siteConfig: DocusaurusConfig;
        outDir: string;
      }) => Promise<BlogFeedItem[]>;
    }) => Promise<BlogFeedItem[]>;
  };
};

예를 들어 아래와 같이 설정할 수 있습니다.

docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          feedOptions: {
            type: 'all',
            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
            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,
              });
            },
          },
        },
      },
    ],
  ],
};

피드는 다음에서 확인할 수 있습니다.

RSS
Atom
JSON

https://example.com/blog/rss.xml

https://example.com/blog/atom.xml

https://example.com/blog/feed.json

Advanced topics

Blog-only mode

도큐사우루스 2에서는 별도의 랜딩 페이지 없이 블로그 게시물 목록을 인덱스 페이지로 사용할 수 있습니다. Set the routeBasePath to be '/' to serve the blog through the root route example.com/ instead of the subroute example.com/blog/.

docusaurus.config.js
module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: false, // Optional: disable the docs plugin
        blog: {
          routeBasePath: '/', // Serve the blog at the site's root
          /* other blog options */
        },
      },
    ],
  ],
};

주의

Don't forget to delete the existing homepage at ./src/pages/index.js or else there will be two files mapping to the same route!

팁

문서 용도로만 사용하려는 사용자를 위한 "문서 전용 모드"도 있습니다. Read Docs-only mode for detailed instructions or a more elaborate explanation of routeBasePath.

Multiple blogs

클래식 테마는 웹사이트에서 하나의 블로그만 관리한다고 가정하고 있습니다. 그래서 하나의 블로그 플러그인 인스턴스만 포함하고 있습니다. 물론 하나의 웹사이트에서 여러 개의 블로그를 운영하는 것도 가능합니다. You can add another blog by specifying another blog plugin in the plugins option for docusaurus.config.js.

Set the routeBasePath to the URL route that you want your second blog to be accessed on. Note that the routeBasePath here has to be different from the first blog or else there could be a collision of paths! Also, set path to the path to the directory containing your second blog's entries.

As documented for multi-instance plugins, you need to assign a unique ID to the plugins.

docusaurus.config.js
module.exports = {
  // ...
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        /**
         * Required for any multi-instance plugin
         */
        id: 'second-blog',
        /**
         * URL route for the blog section of your site.
         * *DO NOT* include a trailing slash.
         */
        routeBasePath: 'my-second-blog',
        /**
         * Path to data on filesystem relative to site dir.
         */
        path: './my-second-blog',
      },
    ],
  ],
};

As an example, we host a second blog here.

블로그

Initial setup​

Adding posts​

Blog list​

Blog sidebar​

Blog post date​

Blog post authors​

Inline authors​

Global authors​

Reading time​

Feed​

Advanced topics​

Blog-only mode​

Multiple blogs​