[번역] Chirpy 게시글 작성

게시 2023/11/27 업데이트 2023/11/28

By Jeek Lee 12 분읽는 시간

해당 게시글은 Chirpy 템플릿 사용 시 게시글 작성 방법을 번역한 글이다. Chirpy 템플릿은 게시글 작성 시 다소 복잡한 설정을 요구하기 때문에, 한 번쯤 읽어보는 것을 추천한다.

1. 게시글 파일의 이름 및 경로

기본적으로 Chirpy 는 _posts 이하 경로에 있는 모든 Markdown 형식의 파일을 게시글로 처리한다. 이 때, 파일의 이름은 YYYY-MM-DD-TITLE.EXTENSION와 같은 양식을 준수해야한다. EXTENSION의 경우 Markdown 형식을 의미하는 md 혹은 markdown를 사용한다.

만약 게시글 파일 생성 시간을 줄이고 싶다면, Jekyll-Compose플러그인을 적용해보자.

2. Front Matter

본격적인 게시글 작성에 앞서, Markdown 파일의 최상단에 다음과 같은 형식으로 Front Matter를 명시해야한다.

  
---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]     # TAG names should always be lowercase
---

기본적으로 게시글의 layout 은 post로 설정되어있기 때문에, Front Matter에 layout 관련 내용을 추가할 필요는 없다.

1) 게시글의 Time Zone

게시글의 작성 일자를 보다 명확하게 하기 위해서 _config.yml의 timezone 뿐만 아니라, 게시글 Front Matter의 date 변수에도 timezone 관련 정보를 추가적으로 입력해야한다.

Format: +/-TTTT, e.g. +0800.

2) 카테고리 및 태그

각 게시글의 categories는 두 개까지 등록이 가능하며, tags는 원하는 만큼 등록할 수 있다.

  
---
categories: [Animal, Insect]
tags: [bee]
---

3) 작성자 정보

Chirpy 및 github.io 가 개인적으로 사용되는 경우, Front Matter 에 작성자 정보를 입력할 필요는 없다. 왜냐하면 기본적으로 _config.yml의 social.name 및 social.links가 적용되기 때문이다. 하지만 필요에 따라 다음과 같은 방법으로 작성자 정보를 변경할 수 있다.

먼저 _data/authors.yml에 작성자 정보를 등록한다.

  
<author_id>:
  name: <full name>
  twitter: <twitter_of_author>
  url: <homepage_of_author>

다음으로 author 혹은 authors 변수를 통해 작성자를 명시한다.

  
---
author: <author_id>                     # for single entry
# or
authors: [<author1_id>, <author2_id>]   # for multiple entries
---

작성자 정보를 _data/authors.yml에 정의해 사용하는 경우, 해당 페이지는 twitter:creator meta tag 가 적용된다. 이는 Twitter Cards에 등록되며 SEO에 이점을 갖는다.

3. 게시글 목차

게시글 오른쪽에 표시되는 게시글 목차(Table of Contents, TOC)는 _config.yml의 toc 의 변수가 전역적으로 적용된다. 만약 각 게시글마다 TOC 설정이 필요하다면, 다음과 같은 방식으로 Front Matter에서 적용 가능하다.

  
---
toc: false
---

4. 댓글

댓글 역시 _config.yml에서 전역적으로 관리하며, comments.active 변수에 의해 설정된다.

만약 게시글마다 댓글 사용 여부를 적용하고 싶다면, 다음과 같이 Front Matter에 명시할 수 있다.

  
---
comments: false
---

5. 수식(LaTex)

사이트 성능 문제로, 수식 적용은 기본값으로 제공되지 않는다. 수식 사용이 필요한 게시물마다 아래와 같이 적용해야 한다.

  
---
math: true
---

수식을 적용한 이후, 다음과 같은 문법을 통해 수식을 사용할 수 있다.

Block math should be added with $$ math $$ with mandatory blank lines before and after $$
Inline math (in lines) should be added with $$ math $$ without any blank line before or after $$
Inline math (in lists) should be added with \$$ math $$

  
<!-- Block math, keep all blank lines -->

$$
LaTeX_math_expression
$$

<!-- Inline math in lines, NO blank lines -->

"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."

<!-- Inline math in lists, escape the first `$` -->

1. \$$ LaTeX_math_expression $$
2. \$$ LaTeX_math_expression $$
3. \$$ LaTeX_math_expression $$

6. 다이어그램(Mermaid)

Mermaid는 다이어그램 생성툴이다. Mermaid를 적용할 게시글에 아래 YAML 블록을 추가함으로써 사용할 수 있다.

  
---
mermaid: true
---

이후 다른 Markdown 언어처럼 ```mermaid와 ``` 사이에 코드를 작성해 사용할 수 있다.

7. 이미지

1) Caption

이미지의 다음 라인에 italics 를 추가함으로써, 이미지 하단에 Caption을 표기할 수 있다.

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

2) Size

페이지 컨텐츠 레이아웃이 이미지가 로딩됨에 따라 이동하기 때문에, 이를 방지하기 위해 미리 이미지 사이즈를 설정할 수 있다.

  
![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

SVG 파일의 경우, width 설정 없이 렌더링 되지 않는다.

Chirpy v5.0.0 부터, height 과 width 의 축약어를 지원한다. (height → h, width → w). 아래 예시는 위에서 보여준 케이스와 동일하다.

  
![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }

3) Position

기본적으로 이미지의 위치는 가운데 정렬이지만, normal, left, and right 변수를 통해 지정할 수 있다.

이미지의 위치가 지정된 경우, 이미지 Caption은 추가되지 않는다.

Normal position

  
![Desktop View](/assets/img/sample/mockup.png){: .normal }

Float to the left

  
![Desktop View](/assets/img/sample/mockup.png){: .left }

Float to the right

  
![Desktop View](/assets/img/sample/mockup.png){: .right }

4) Dark/Light mode

다크모드 및 일반모드에서 사용될 이미지를 각각 지정할 수 있다.

  
![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

5) Shadow

The screenshots of the program window can be considered to show the shadow effect:

  
![Desktop View](/assets/img/sample/mockup.png){: .shadow }

6) CDN URL

만일 이미지를 CDN을 통해 호스팅하는 경우, CDN URL을 _config.yml 파일의 img_cdn에 적용해 환경변수처럼 사용할 수 있다.

  
img_cdn: https://cdn.com

img_cdn 적용 후, /로 시작하는 이미지의 경로들에 CDN URL이 적용된다.

  
![The flower](/path/to/flower.png)

위와 같이 명시한 경우, CDN URL이 적용된 결과는 다음과 같다.

  
<img src="https://cdn.com/path/to/flower.png" alt="The flower">

7) Image Path

  
---
img_path: /img/path/
---

만약 특정 게시글이 많은 이미지를 포함하고 있다면, 게시글 차원에서 이미지 경로들의 Prefix를 지정해 사용할 수 있다.

  
![The flower](flower.png)

Image Path가 적용된 결과는 다음과 같다.

  
<img src="/img/path/flower.png" alt="The flower">

8) Preview Image

만약 게시글의 상단에 미리보기 이미지를 사용하고 싶다면, 1200 x 630 크기의 이미지를 사용할 수 있다. 단, 1.91 : 1의 비율을 벗어난다면, 이미지의 비율이 변형된다.

  
---
image:
  path: /path/to/image
  alt: image alternative text
---

img_path가 설정되었다면, Preview Image의 경로에도 적용된다.

이를 통해 다음과 같이 간단하게 Preview Image를 지정할 수 있다.

  
---
image: /path/to/image
---

9) LQIP

For preview images:

  
---
image:
  lqip: /path/to/lqip-file # or base64 URI
---

For normal images:

  
![Image description](/path/to/image){: lqip="/path/to/lqip-file" }

8. Pinned Posts

홈페이지의 상단에 하나 이상의 게시글을 Pinned Post로 고정할 수 있다. 고정된 게시글은 최근 게시글부터 정렬되며, 다음과 같이 적용할 수 있다.

  
---
pin: true
---

9. Prompts

Promopts에 tip, info, warning, danger 타입을 설정할 수 있다. prompt-{type}을 추가함으로써 사용할 수 있으며, info type을 명시하는 예시는 다음과 같다.

> Example line for prompt.
{: .prompt-info }

10. Syntax

1) Inline Code

`inline code part`

2) Filepath Hightlight

`/path/to/a/file.extend`{: .filepath}

3) Code Block

Markdown symbols ``` can easily create a code block as follows:

  
```
This is a plaintext code snippet.
```

1. Specifying Language

Using ```{language} you will get a code block with syntax highlight:

  
```yaml
key: value
```

The Jekyll tag {% highlight %} is not compatible with this theme.

2. Line Number

By default, all languages except plaintext, console, and terminal will display line numbers. When you want to hide the line number of a code block, add the class nolineno to it:

  
```shell
echo 'No more line numbers!'
```
{: .nolineno }

3. Specifying the Filename

You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute file to achieve this:

  
```shell
# content
```
{: file="path/to/file" }

4. Liquid Codes

If you want to display the Liquid snippet, surround the liquid code with {% raw %} and {% endraw %}:

  
{% raw %}
```liquid
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}
```
{% endraw %}

Or adding render_with_liquid: false (Requires Jekyll 4.0 or higher) to the post’s YAML block.

11. Videos

You can embed a video with the following syntax:

  
{% include embed/{Platform}.html id='{ID}' %}

Where Platform is the lowercase of the platform name, and ID is the video ID.

The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.

Video URL	Platform	ID
https://www.youtube.com/watch?v=H-B46URT4mg	`youtube`	`H-B46URT4mg`
https://www.twitch.tv/videos/1634779211	`twitch`	`1634779211`

12. Learn More

For more knowledge about Jekyll posts, visit the Jekyll Docs: Posts.

Github.io

chirpy translation