게시글 작성을 위하여 개인적으로 참조할 Chirpy Jeykll 게시글 작성법을 정리하였습니다. 개인 맞춤형이라 실제랑 약간 다를 수 있습니다.
게시글 파일 생성
- 게시글 파일명은
YYYY-MM-DD-TITLE.md으로 생성해야 합니다. - 게시글 파일의 위치는
_posts내부에서 있어야 합니다._posts폴더 내부에 또 다른 폴더를 생성 해도 합니다.
Front Matter > categories 직접 입력X_posts/a/b/post.md 이면 a는 최상위 카테고리 b는 하위 카테고리로 자동으로 변환
Front Matter
게시글 맨 위에 필수로 작성해야 하는 정보으로 다음과 같습니다.
필수 옵션
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ---
title: 게시글 제목
date: 게시글 생성 날짜 format(YYYY-MM-DD HH:MM:SS +/-TTTT)
# ex. date: 2025-11-20 13:13:00 +0900
categories: [TOP, SUB] # 두개 값을 넣어야 합니다. 단, sub는 생략이 가능 합니다.
# ex. categories: [TOP, SUB] or categories: [TOP, ]
tags: [tag, ...] # 태그는 여러개 입력 가능합니다.
# ex. tags: [] or tags: [a] or tags: [a, b, ...]
# 누구는 자동으로 소문자로 변환된다고 하는데 저는 안됩니다.
slug: uri-name
# uri에 표시할 이름을 설정할 수 있습니다.
# date: ~~ 형식으로 내부 Front Matter에 주석을 추가할 수 있습니다.
---
|
선택 옵션
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
27
28
29
30
| ---
author: 작성자 # 작성자가 한 명인 경우
or
authors: [작성자Id, ...] # 작성자가 여러 명인 경우
# 작성자 데이터는 _data/authors.yml에 형식에 맞게 추가하면 됩니다.
description: 게시글에 대한 짧은 요약 또는 설명
toc: true or false (default by _config) # Table of Contents 활성화 여부.
comments: true or false (default by _config) # 댓글 기능 활성화 여부.
media_subpath: /path/to/media/
# 미디어 정보를 임베딩 할 때 매번 전체 경로를 작성하지 안하고 해당 경로 내에서 바로 사용할 수 있습니다.
pin: true (default false) # 게시글을 블로그 상단에 pin 기능. default: false
math: true (default false) # 게시글에 수학 공식 사용 여부를 의미합니다.
# 무거워서 기본적으로 비활성화 됨.
mermaid: true (default false) # 게시글에 mermaid를 통하여 다이어그램 사용 여부를 의미합니다.
last_modified_at: 게시글 최종 수정 날짜 format(YYYY-MM-DD HH:MM:SS +/-TTTT)
# ex. last_modified_at: 2025-11-20 13:13:00 +0900
# 페이지 미리보기 이미지 설정 할 수 있습니다.
image:
path: /path/of/image
alt: image desc
---
|
운영 규칙
1
2
3
4
5
6
7
| tag: 영어 소문자로 통일하기
- 한글이 필요한 경우, _data/tag.yml에 등록하여 사용.
slug: 작명 규칙
- 일반 게시글-> [바로위 카테고리]-영어 제목( <= 5단어)
- 상위 카테고리가 여러 단어로 구성된 경우, 첫 단어만 기재
- etc 경우 -> 영어 제목( <= 5 단어)
|
마크다운 문법
Heading
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| - 기본 구조
# H1
## H2
### H3
#### H4
* H1에 대해서만 TOC가 생성 안됩니다.
- 추가 옵션
# Heading
{: data-toc-skip='' .mt-4 .mb-0 }
- data-toc-skip: 해당 옵션을 추가하면 해당 heading에서 대해서 toc 생성하지 않습니다.
- .mt-<num>: margin top을 설정합니다.
- .mb-<num>: margin button을 설정합니다.
|
List
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 1) OL - OL안에 OL 중첩이 안됨.
1. asdf
2. asdf
...
2) UL - UL은 중첩이 가능.
* depth 1
* depth 2
...
3) Todo List - 여러 중첩이 가능.
- [ ] todo
- [ ] todo
- [x] complete todo
4) Desc List
something
: description
|
인용 & 프롬프트
1
2
3
4
5
6
7
8
9
10
11
12
| - 인용
> something
- 프롬프트
> something
{: option }
option 종류
.prompt-tip
.prompt-info
.prompt-warning
.prompt-danger
|
코드 블럭
1
2
3
4
5
6
7
8
9
10
11
12
13
| 1) 인라인 코드 블럭
`code`
2) 파일 경로
`path`{: .filepath}
3) 코드 블럭
head: ```language or ````language
tail: ``` or ````
* language 생략시 기본 적으로 `Plaintext`가 적용 됨.
* {: file='file_path'}를 tail 아래에 추가하면 언어 표시 부분을 파일명으로 채울 수 있음.
* {: .nolineno }를 추가하면 코드 블럭에서 줄 번호를 없앨 수 있음.
|
이미지
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 기본
{: 옵션}
_caption_
* 옵션이 없으면 그림이 가운데 정렬되고 캡션을 가짐.
* caption 생략 가능.
옵션 정리
w="val" : 표시할 사진의 크기 조절 가능. 실제 사진에 width css 추가 됨.
h="val" : 표시할 사진의 높이 조절 가능. 실제 사진에 height css 추가 됨.
.w-<num> : 0 < num <== 100 사이 값으로 사진 테두리 사이즈 조절 가능. 사이즈 %단위로 들어감.
.normal : 그림을 왼쪽 정렬.
.left : 그림을 왼쪽으로 Float 시킴.
.right : 그림을 오른쪽으로 Float 시킴.
.shadow : 그림에 그림자 추가 할 수 있음.
.rounded-<num> : 그림에 테두리 둥글게 할 수 있음.
.dark / .light : 해당 옵션을 통하여 특정 모드에 따라 표시할 이미지를 다르게 할 수 있음.
|
각주
1
2
3
| some text[^foot_note_name]
[^foot_note_name]: desc for word or something.
|
링크
1
2
3
4
5
| - 일반
[링크 표시할 이름](https://some.link)
- 링크와 링크가 표시할 이름이 같은 경우
<https://some.link>
|
표
1
2
3
4
5
6
7
8
9
10
11
12
| | ttile | ... |
| --- | --- |
| content | ... |
{: tailwincss }
표 내 글자 정렬
- 왼쪽 정렬
| :--- |
- 오른쪽 정렬
| :--: |
- 가운데 정렬
| :---: |
|
추가한 규칙
미리보기 사진 추가된 링크
- 관련 파일
logic file : _plugins/link-card.rbstyle file : _sass/custom/_link_card.scss
사용 규칙
1
| {% linkcard https://some.link %}
|
토글 접기/펼치기
- 관련 파일
logic file :_includes/my/notion-toggle.html
style file :_sass/custom/_notion-toggle.scss
사용 규칙
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {% capture body %}
토글 내용
{% endcapture %}
{% include `option`
title="토글 제목"
level=1
content=body
open=true
%}
level
- 1 ~ 4 값을 넣을 수 있음. 토글 제목이 글꼴 크기가 h1 ~ h4 으로 설정 됨.
- default 값은 5, 5는 기본 문자에 강조를 넣은 것.
open
- 초기 토글의 상태 결정. 기본 닫힘.
- true 설정 시 열린 상태.
`option` 종류
- my/notion-toggle.html (노션 느낌)
|
인라인 수학 블럭
- 관련 파일
logic file : _plugins/math.rbstyle file : _sass/custom/_math.scss
사용 규칙
1
2
3
4
5
6
7
8
9
10
11
12
13
| {% math "content" inline=true %}
content
- 내용물로 원하는 값을 넣을 수 있음.
- 단, 수식내 수식 중첩은 미 지원.
- ex) {{2^10}} in python is `2 ** 10`
현재 지원하는 수식
- 제곱: {{BASE^EXP}}
inline
- 기본값이 true 인라인 코드 블럭으로 수식및 내용을 표현.
- false으로 설정한 경우 단순 평문 블럭으로 보여줌.
|
참고