Home [개발자 블로그] Chirpy테마 게시글 작성 가이드
Post
Cancel

[개발자 블로그] Chirpy테마 게시글 작성 가이드

image alternative text

첫글로 Writting New Post페이지를 번역해보았다.

Naming & Path

YYYY-MM-DD-TITLE.EXTENSION 의 형식으로 새 파일을 만들어주고 _post/ 폴더에 넣어준다.

EXTENSIONmd 혹은 markdown으로 해주어야한다.


Front Matter

기본적으로, 글을 작성할 때 아래와 같은 양식의 Front Matter를 작성해야 한다.

1
2
3
4
5
6
---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/- TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG] # TAG는 반드시 소문자로 이루어져야함!
---

Note: post의 layout이 기본적으로 post으로 설정되어있어서 Front Matter에 따로 layout변수를 만들어 주지 않아도 된다.


Timezone of date

더 정확한 시간을 포스트에 제공하기 위해서는 _config.ymltimezone만 설정해줄 것이 아니라, Post FrontMatter에서 date필드에도 post timezone을 제공해주어야한다. 형식: +/-TTTT, e.g. +0800.


Categories & Tag

각 포스트의 categories는 2개의 요소로 구성되어있으며 tags는 0~무한 개의 요소를 가질 수 있다.

1
2
categories: [Animal, Insect]
tags: [bee]


Table of Contents

기본적으로, Table of Contents(TOC)는 포스트의 오른쪽 패널에 위치한다. 만약 너가 이 기능을 끄고싶다면 _config.yml파일로가서 toc값을 false로 바꾸어주면된다. 하나의 포스트에만 이 기능을 끄고싶다면 FrontMatter에서 toc값을 false로 바꾸면된다:

1
2
3
---
toc: false
---


Comments

TOC와 비슷하게 Disqus comments가 각 포스트마다 기본적으로 내장되어있으며, 모든 글에대한 comments유무는 _config.yml파일의 comments값에 의해 결정된다. 하나의 포스트에만 이 기능을 끄고 싶다면 FrontMatter에서 값을 설정해주면된다:

1
2
3
---
comments: false
---


Mathematics

웹페이지의 성능적인 이유에서 mathematical 기능은 기본적으로 꺼져있으나 아래 코드를 추가하여 켤 수 있다:

1
2
3
---
math: true
---


Mermaid

Mermaid는 훌륭한 표생성 도구이다. 아래코드를 추가함으로 기능을 켤 수 있다.

1
2
3
---
mermaid: true
---

그러면 너는 ```mermaid로 그래프 코드를 감싸 다른 마크다운 언어와 같이 사용할 수 있다.


Images

Preview image

포스트의 최상단에 이미지를 넣고싶다면 아래와 같이 url을 추가하여 이미지를 넣을 수 있다:

1
2
3
---
image: /path/to/image-file
---

Image caption

이미지를 삽입한 다음 라인에 아래와 같이 Italics를 추가해서 이미지 캡션을 달 수 있다. 이미지 캡션은 이미지의 하단에 달린다:

1
2
![img-description](/path/to/image)
_Image Caption_

Image size

width를 아래와같이 추가하여 이미지 사이즈를 설정할 수 있다.

1
![image-description](path){: width="400px"}

기본적으로 이미지의 위지는 centered이다. 아래 3가지 방법으로 이미지의 위치를 normal, left, right중 하나로 설정할 수 있다:

  • Normal

    1
    
    ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
    
  • Left

    1
    
    ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="left"}
    
  • Right

    1
    
    ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="right"}
    

너가 이미지의 위치를 정하게되면 image caption은 달 수 없게된다.


Pinned Posts

너의 홈페이지 메인화면에 특정 게시물을 고정시킬 수 있다. 순서는 포스팅 날짜가 최근일수록 위로 올라오게된다.

1
2
3
---
pin: true
---


Code Block

마크다운 문법 ``` 를 통해 쉽게 코드블럭을 생성할 수 있다.

This is a common code snippet, without syntax highlight and line number.

Specific Language

```language를 통해 line number 와 syntax highlight를 갖는 코드블럭을 생성할 수 있다.

Note: The Jekyll style {% highlight LANGUAGE %} or {% highlight LANGUAGE linenos %} are not allowed to be used in this theme !

1
2
3
4
5
items:
	- part_no:	A4786
	  descrip:	Water Bucket (Filled)
	  price:	1.47
	  quantity:	4


Liguid Codes

만약 Liquid snippet(수도코드?)를 배치하고싶다면 liquid code를 {% raw %}{% endraw %}로 감싸주면된다.

1
2
3
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}


Learn More

더 많은걸 알고싶다면, 여기로Jekyll Docs:Posts.

This post is licensed under CC BY 4.0 by the author.