메인 컨텐츠로 이동
Version: 2.0.0-beta.6

블로그

The blog feature enables you to deploy in no time a full-featured blog.

info

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

초기 설정#

여러분의 사이트에 블로그를 설정하고 싶다면 먼저 blog 디렉터리를 만들어주어야 합니다.

그리고 docusaurus.config.js 파일에 블로그 연결을 위한 아이템 링크를 추가해줍니다.

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

새로운 글 추가하기#

To publish in the blog, create a Markdown file within the blog directory.

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 v2description: This is my first post on Docusaurus 2.slug: welcome-docusaurus-v2authors:  - 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.pngtags: [hello, docusaurus-v2]image: https://i.imgur.com/mErPwqL.pnghide_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.
note

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

This naming convention is optional, and you can provide the date as FrontMatter.

Example supported patterns
  • 2021-05-28-my-blog-post-title.md
  • 2021-05-28-my-blog-post-title.mdx
  • 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
  • 2021/05/28/my-blog-post-title/index.md
  • ...
tip

Using a folder can be convenient to co-locate blog post images alongside the Markdown file.

The only required field in the front matter is title; however, we provide options to add more metadata to your blog post, for example, author information. 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.

게시물 작성 시 <!--truncate--> 마커를 사용하면 게시물이 보여질 때 요약문이 먼저 표시됩니다. <!--truncate--> 위에 작성된 내용이 요약문이 됩니다. 예를 들면 아래와 같은 형식입니다.

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

Blog sidebar#

The blog sidebar displays recent blog posts. 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. This will increase the width of the main container. 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 would rather make it say "All posts":

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

Blog post authors#

Use the authors FrontMatter field to declare blog post authors.

Inline authors#

Blog post authors can be declared directly inside the FrontMatter:

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---
tip

This option works best to get started, or for casual, irregular authors.

info

Prefer usage of the authors FrontMatter, but the legacy author_* FrontMatter remains supported:

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

Global authors#

For regular blog post authors, it can be tedious to maintain authors information inlined in each blog post.

It is possible declare those authors globally in a configuration file:

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
slorber:  name: Sébastien Lorber  title: Docusaurus maintainer  url: https://sebastienlorber.com  image_url: https://github.com/slorber.png
tip

Use the authorsMapPath plugin option to configure the path. JSON is also supported.

In blog posts FrontMatter, you can reference the authors declared in the global configuration file:

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

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

Mix inline authors and global authors
You can use global authors most of the time, and still use inline 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

You can customize the global author's data on per-blog-post basis:

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

The configuration file can be localized, just create a localized copy of it at:

website/i18n/<locale>/docusaurus-plugin-content-blog/authors.yml

피드#

feedOptions 설정을 전달해 RSS/Atom 피드를 생성할 수 있습니다. RSS와 Atom 피드는 기본적으로 생성됩니다. 피드 생성을 하지 않으려면 feedOptions.type 항목 값을 null로 설정해주세요.

type BlogOptions = {  feedOptions?: {    type?: 'rss' | 'atom' | 'all' | null;    title?: string;    description?: string;    copyright: string;    language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes  };};

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

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

피드에 연결하는 방법은 아래와 같습니다.

RSS 피드

https://{your-domain}/blog/rss.xml

Atom 피드

https://{your-domain}/blog/atom.xml

블로그 기능 확장하기#

블로그 전용 모드#

도큐사우루스 2에서는 랜딩 페이지 없이 블로그 게시물 목록을 인덱스 페이지로 사용할 수 있습니다. routeBasePath 항목값을 '/'로 설정하면 루트 경로임을 나타냅니다.

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        docs: false,        blog: {          path: './blog',          routeBasePath: '/', // 항목값을 '/'으로 설정합니다.        },      },    ],  ],};
caution

기존 랜딩 페이지로 사용하던 ./src/pages/index.js 파일을 삭제해주어야 합니다. 그렇지 않으면 같은 경로에 2개 파일이 연결되어집니다.

여러 개의 블로그 운영하기#

클래식 테마는 웹사이트에서 하나의 블로그만 관리한다고 가정하고 있습니다. 그래서 하나의 블로그 플러그인 인스턴스만 포함하고 있습니다. 물론 하나의 웹사이트에서 여러 개의 블로그를 운영하는 것도 가능합니다. docusaurus.config.js 옵션 중에서 plugins 항목을 설정해서 블로그 플러그인을 추가하면 또 하나의 블로그를 가질 수 있습니다.

routeBasePath 항목값은 두 번째 블로그에 접근할 수 있는 URL 경로를 설정해주어야 합니다. routeBasePath 항목값을 첫 번째 블로그와 다르게 설정한 것을 확인하세요. 그렇지 않으면 경로 충돌이 발생할 수 있습니다. 그리고 path 항목값도 두 번째 블로그 파일이 담겨있는 디렉터리를 설정해줍니다.

멀티 인스턴스 플러그인에서 설명하는 것처럼 플러그인은 유일한 id 항목값으로 설정해야 합니다.

docusaurus.config.js
module.exports = {  // ...  plugins: [    [      '@docusaurus/plugin-content-blog',      {        /**         * 멀티 인스턴스 플러그인 적용 시 필수값으로 설정해야 합니다.         */        id: 'second-blog',        /**         * 사이트에서 블로그 연결 시 사용할 URL 경로를 설정합니다.         * *절대* URL 끝에 슬래시를 붙이지 마세요.         */        routeBasePath: 'my-second-blog',        /**         * 사이트 디렉터리 기준으로 상대 경로를 지정합니다.         */        path: './my-second-blog',      },    ],  ],};

예제로 만든 두 번째 블로그를 확인해볼 수 있습니다.