next

Translate

Adding a Blog

초기 설정

사이트의 블로그를 설정하기 위해서는 저장소의 website 디렉토리 아래에 blog 디렉토리를 만들어야 합니다.

그리고 siteConfig.js 파일에 블로그를 위한 헤더 링크를 추가해줍니다.

headerLinks: [
    ...
    { blog: true, label: 'Blog' },
    ...
]

포스트 추가하기

To publish in the blog, create a file within the blog directory with a formatted name of YYYY-MM-DD-my-blog-post-title.md. 포스트의 날짜는 파일명에 지정된 날짜로 처리합니다.

For example, at website/blog/2017-12-14-introducing-docusaurus.md:

---
title: Introducing Docusaurus
author: Joel Marcey
authorURL: http://twitter.com/JoelMarcey
authorFBID: 611217057
authorTwitter: JoelMarcey
---
Lorem Ipsum...

Adding slug will override the url of the blog post.

예를 들면 아래와 같습니다.

---
slug: introducing-docusaurus
title: Introducing Docusaurus
author: Joel Marcey
authorURL: http://twitter.com/JoelMarcey
authorFBID: 611217057
authorTwitter: JoelMarcey
---
Lorem Ipsum...

Will be available at https://website/blog/introducing-docusaurus

헤더 옵션

The only required field is title; however, we provide options to add author information to your blog post as well along with other options.

  • author - 작성자의 이름을 설정합니다.
  • authorURL - 작성자와 관련된 URL을 설정합니다. 트위터나 깃허브, 페이스북 주소 등이 될 수 있습니다.
  • authorFBID - 프로필 사진으로 사용할 페이스북 프로필 아이디를 설정합니다.
  • authorImageURL - 작성자 프로필 사진 이미지 URL을 설정합니다. (참고: authorFBID와 authorImageURL를 둘 다 설정한 경우에는 authorFBID 설정이 먼저 적용됩니다. authorImageURL 설정이 적용되기 원한다면 authorFBID 설정은 하지 말아야 합니다.)
  • title - 블로그 포스트 제목을 설정합니다.
  • slug - The blog post url slug. Example: /blog/my-test-slug. When not specified, the blog url slug will be extracted from the file name.
  • unlisted - The post will be accessible by directly visiting the URL but will not show up in the sidebar in the final build; during local development, the post will still be listed. Useful in situations where you want to share a WIP post with others for feedback.
  • draft - The post will not appear if set to true. Useful in situations where WIP but don't want to share the post.

요약 보기

블로그 포스트에서 <!--truncate--> 마커를 사용하면 공개된 블로그 포스트의 요약 보기를 제공할 수 있습니다. <!--truncate--> 위에 작성한 내용이 요약 보기로 보여집니다. 예를 들면 아래와 같습니다.

---
title: Truncation Example
---
All this will be part of the blog post summary.

여기도 마찬가지구요.

<!--truncate-->

이 부분부터는 요약 보기에서 표시되지 않습니다.

여기도 표시되지 않구요.

여기도 마찬가지

사이드바에 표시되는 블로그 포스트 숫자 변경하기

사이드바에 보여지는 블로그 포스트는 최근 작성된 5개가 기본입니다.

siteConfig.js 파일에서 blogSidebarCount 설정을 추가해서 사이드바에 표시될 블로그 숫자를 변경할 수 있습니다.

숫자로 포스트의 갯수를 지정하거나 'ALL'이라는 값을 지정할 수 있습니다.

예제:

blogSidebarCount: 'ALL',

사이드바 타이틀 변경하기

siteConfig.js 파일에서 blogSidebarTitle 설정을 추가해서 사이드바에 표시되는 타이틀을 변경할 수 있습니다.

사용할 수 있는 옵션은 default와 all입니다. default 옵션에 값을 설정하면 사이드바 기본 타이틀을 변경할 수 있습니다. all 옵션에 값을 설정하면 blogSidebarCount 옵션값이 'ALL'인 경우에 사이드바 타이틀이 변경됩니다.

예제:

blogSidebarTitle: { default: '최근 포스트', all: '모든 블로그 포스트' },

RSS Feed

Docusaurus provides an RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically added to your website page's HTML <HEAD> tag.

A summary of the post's text is provided in the RSS feed up to the <!--truncate-->. If no <!--truncate--> tag is found, then all text up to 250 characters are used.

Social Buttons

If you want Facebook and/or Twitter social buttons at the bottom of your blog posts, set the facebookAppId and/or twitter site configuration options in siteConfig.js.

Advanced Topics

블로그 전용으로 사용할 경우

You can run your Docusaurus site without a landing page and instead have your blog load first.

To do this:

  1. website/static/ 디렉토리에 index.html 파일을 생성합니다.
  2. website/static/index.html 파일에 템플릿으로 제공되는 콘텐츠를 추가합니다.
  3. website/static/index.html 파일에서 <title> 태그 내용을 수정합니다.
  4. 동적인 랜딩 페이지로 만든 website/pages/en/index.js 파일을 삭제합니다.

이제 도큐사우르스를 빌드하게 되면 static/index.html 파일을 복사해서 사이트의 메인 디렉토리에 가져다놓게 됩니다. 방문자가 여러분의 페이지를 찾아오게 되면 정적인 파일을 제공하게 됩니다. When the page loads, it will redirect the visitor to /blog.

You can use this template:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="0; url=blog/" />
    <script type="text/javascript">
      window.location.href = 'blog/';
    </script>
    <title>Title of Your Blog</title>
  </head>
  <body>
    If you are not redirected automatically, follow this
    <a href="blog/">link</a>.
  </body>
</html>
← DockerCustom Pages →