Post

[블로그] Chirpy 테마 게시글 작성

Posted
By MI-NOKK
14 min read
[블로그] Chirpy 테마 게시글 작성

블로그의 첫 글은 Chirpy template 의 _Writting New Post_를 참고하여 작성해봤다.

Post 만들기

새 포스트를 작성하기 위해서 _posts 폴더 아래 YYYY-MM-DD-TITLE.EXTENSION 형식으로 파일을 만들어준다. 이때 확장자(EXTENSION)는 md 또는 markdown으로 해주어야한다. Jekyll-Compose 플러그인을 이용해서 빠르게 파일도 만들수 있는데 이건 나중에 해봐야겠다.

머리말 작성

md 파일을 생성하면 최상단에는 항상 머리말을 작성해야한다.

1
2
3
4
5
6

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

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

정확한 시간 설정

정확한 시간을 포스트에 작성하기 위해서 _config.yml의 timezone도 설정해주어야 하고 머리말의 date 필드에도 다음과 같은 형식으로 작성해 주어야한다. 형식: +/-TTTT, e.g. +0800

카테고리와 태그

카테고리는 최상위 카테고리와 서브카테고리 2개의 요소로 구성되어있고 태그는 무한개의 요소를 가질수있다. 이때 태그는 소문자로만 작성해야한다.

1
2
3
4

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

작성자 정보

작성자 정보는 social.name에서 기져오기 때문에 굳이 채울 필요는없다. 물론 아래와 같이 재정의 할 수는 있다.

(만약 웹사이트에 _data/authors.yml파일이없다면 만들어서 작성자 정보를 추가할 것)

1
2
3
4

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

그런 다음 한명의 작성자 또는 여령명의 작성자 항목을 추가하면된다.

1
2
3
4
5

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

게시물 소개

기본적으로 게시물의 처음 부분이 게시글 소개로 작성되지만 description 필드를 이용하면 내가 지정한 소개글로 보여지게된다.

1
2
3

---
description: Short summary of the post.
---

목차

목차를 왠만하면 끄진 않겠지만 만약 끄려면 머리말에 아래와 같이 추가해준다.

1
2
3

---
toc: false
---

댓글

댓글은 _config.yml에서 comments.active 항목에서 전체적으로 설정된다.

특정 게시물에만 키고 끄고 싶다면 머리말에 아래와 같이 추가해준다.

1
2
3

---
comments: false
---

URL Prefix

때때로 게시물에서 여러 리소스에 대해 중복된 URL 접두사를 정의해야 한다. 지루한 작업이지만 두 개의 매개변수를 설정함으로써 피할 수 있습니다.

  • _config.yml의 cdn 을 지정하여 미디어 파일을 호스팅할 수 있다.

    1

    cdn: https://cdn.com

  • media_subpath 에서 현재 게시물/페이지 범위에 대한 경로 설정이 가능하다.

    1
2
3

    ---
media_subpath: /path/to/media/
---

Images

표제

이미지의 다음 줄에 이탤릭체를 추가하면 해당 줄이 캡션이 되어 이미지 맨 아래에 나타난다.

1
2

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

크기

이미지가 로드될 때 페이지 콘텐츠 레이아웃이 이동하지 않도록 하려면 각 이미지의 너비와 높이를 설정해야 한다.

1

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

SVG의 경우 최소한 너비를 지정해야 렌더링이 된다.

_Chirpy v5.0.0_부터 (height → h, width → w) 로 약어를 지원한다.

1

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

위치

기본적으로 이미지는 중앙에 배치되지만 left,right중 하나를 사용하여 위치를 지정할 수 있다.

위치가 지정되면 이미지 캡션을 추가하면 안된다.

  • Normal

    샘플에서는 왼쪽 정렬:

    1

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

  • left

    1

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

  • right

    1

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

다크/라이트 모드

다크/라이트 모드에서 이미지가 테마 기본 설정을 따르도록 할 수 있다. 다크 모드용 이미지 하나와 라이트 모드용 이미지 하나 총 두개의 이미지를 준비후 (dark or light) 클래스를 지정한다.

1
2

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

그림자

프로그램 창의 스크린샷은 그림자 효과를 보여주는 것으로 볼 수 있다.

1

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

미리보기

게시물 상단에 이미지를 추가하려면 해상도가 1200 x 630여야한다. 이미지 종횡비가 1.91 : 1가 아니면 잘린다.

1
2
3
4
5

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

간단하게 이미지만 사용하려면 경로만 정의해주면 된다.

1
2
3

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

LQIP

미리보기 이미지

1
2
3
4

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

"Text and Typography" 의 미리보기 이미지에서 LQIP를 관찰할 수 있다.

일반 이미지:

1

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

동영상

소셜 미디어 플랫폼

다음 구문을 사용하여 소셜 미디어 플랫폼의 비디오를 내장할 수 있다.

1

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

여기서 Platform 이름은 소문자이다. ID는 비디오 id이다.

다음 표는 주어진 비디오 URL에 필요한 두 가지 매개변수를 가져오는 방법을 보여준다. 또한 현재 지원되는 비디오 플랫폼도 알 수 있다.

Video URLPlatformID
https://www.youtube.com/watch?v=H-B46URT4mgyoutubeH-B46URT4mg
https://www.twitch.tv/videos/1634779211twitch1634779211
https://www.bilibili.com/video/BV1Q44y1B7WfbilibiliBV1Q44y1B7Wf

비디오 파일

비디오 파일을 직접 포함하려면 다음 구문을 사용

1

{% include embed/video.html src='{URL}' %}

내장된 비디오 파일에 대한 추가 속성을 지정할 수 있다. 허용되는 속성의 전체 목록은 다음과 같다.

  • poster='/path/to/poster.png' — 비디오 다운로드 중 표시되는 비디오의 포스터 이미지
  • title='Text' — 비디오 아래에 나타나고 이미지와 동일하게 보이는 비디오 제목
  • autoplay=true — 비디오는 자동 재생을 시작
  • loop=true — 비디오 끝에 도달하면 자동으로 시작 부분으로 돌아감
  • muted=true — 오디오는 처음에는 음소거
  • types — 추가 비디오 형식의 확장자를.으로 구분하여 지정 후 파일이 기본 비디오 파일과 같은 디렉토리에 있는지 확인

예시:

1
2
3
4
5
6
7
8
9
10

{%
  include embed/video.html
  src='/path/to/video.mp4'
  types='ogg|mov'
  poster='poster.png'
  title='Demo video'
  autoplay=true
  loop=true
  muted=true
%}

오디오

오디오 파일을 직접 포함하려면 다음 구문을 사용

1

{% include embed/audio.html src='{URL}' %}

임베디드 오디오 파일에 대한 추가 속성을 지정할 수도 있다. 허용되는 속성의 전체 목록은 다음과 같다.

  • title='Text' — 오디오 아래에 나타나고 이미지와 동일하게 보이는 오디오의 제목
  • types — 추가 오디오 형식의 확장자를.으로 구분하여 지정 후 파일이 기본 오디오 파일과 같은 디렉토리에 있는지 확인

예시:

1
2
3
4
5
6

{%
  include embed/audio.html
  src='/path/to/audio.mp3'
  types='ogg|wav|aac'
  title='Demo audio'
%}

고정된 게시물

하나 이상의 게시물을 홈페이지 상단에 고정할 수 있으며, 고정된 게시물은 출시 날짜에 따라 역순으로 정렬된다.

1
2
3

---
pin: true
---

프롬프트

프롬프트에는 여러 가지 유형이 있다: tip, info, warning,danger.

1
2

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

구문

인라인 코드

1

`inline code part`

파일 경로

1

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

코드 블록

마크다운 기호를 사용하면 다음과 같이 쉽게 코드 블록을 만들 수 있다.

1
2
3

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

언어 지정

```{language} 형식으로 언어를 선택할 수 있다.

1
2
3

```yaml
key: value
```

Jekyll 태그{% highlight %}는 이 테마와 호환되지 않습니다.

줄 번호

기본적으로 plaintext, console,terminal 를 제외한 모든 언어는 줄 번호를 표시한다. 줄 번호를 숨기려면 아래와 같이 작성한다.

1
2
3
4

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

파일 이름 지정

코드 블록의 맨 위에 코드 언어가 표시되는 것을 알 수 있는데 파일 이름으로 대체하려면 속성을 추가하여 변경할 수 있다.

1
2
3
4

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

Liquid Codes

Liquid 스니펫을 표시하려면 liquid 코드를 {% raw %} 및 {% endraw %} 로 묶는다.

1
2
3
4
5
6
7

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

또는 게시물의 YAML 블록에 추가 render_with_liquid: false (Jekyll 4.0 이상 필요)

수학

수학을 표현하기 위해 MathJax 를 사용한다. 웹사이트 성능상의 이유로 수학 기능은 기본적으로 로드되지 않기에 활성화 시켜야한다.

1
2
3

---
math: true
---

수학 기능을 활성화한 후 다음 구문을 사용하여 수학 방정식을 추가할 수 있다.

  • Block math should be added with $$ math $$ with mandatory blank lines before and after $$
    • Inserting equation numbering should be added with $$\begin{equation} math \end{equation}$$
    • Referencing equation numbering should be done with \label{eq:label_name} in the equation block and \eqref{eq:label_name} inline with text (see example below)
  • 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 $$
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

$$
LaTeX_math_expression
$$

<!-- Equation numbering, keep all blank lines  -->

$$
\begin{equation}
  LaTeX_math_expression
  \label{eq:label_name}
\end{equation}
$$

Can be referenced as \eqref{eq:label_name}.

<!-- 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 $$

Starting with v7.0.0, configuration options for MathJax have been moved to file assets/js/data/mathjax.js, and you can change the options as needed, such as adding extensions.
If you are building the site via chirpy-starter, copy that file from the gem installation directory (check with command bundle info --path jekyll-theme-chirpy) to the same directory in your repository.

Mermaid 다이어그램

게시물에서 이를 활성화하려면 YAML 블록에 다음을 추가.

1
2
3

---
mermaid: true
---

그러면 다른 마크다운 언어처럼 사용할 수 있다. 그래프 코드를```mermaid 및 ``` 로 묶는다.

더 알아보기

더 자세한 내용은 Jekyll Docs: Posts를 방문해보자.

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

Trending Tags

c# chirpy event winform