Home Jekyll 포스팅 튜토리얼 번역
Post
Cancel

Jekyll 포스팅 튜토리얼 번역

By HanbiJang
Posted 2022-04-01 Updated 2022-04-04 13 min read

이 게시물은 Chirpy 테마에 대한 게시물을 작성하는 방법을 안내합니다.
이전에 _Jekyll_을 사용한 경험이 있더라도 이 기사는 읽을 가치가 있습니다. 많은 기능에서 특정 변수를 설정해야 하기 때문입니다.

이름 지정 및 경로

YYYY-MM-DD-TITLE.EXTENSION라는 이름의 파일을 생성하고.
블로그 폴더 내의 _posts 폴더에 집어넣습니다.

파일의 확장자는 .md나 .markdown 이어야 합니다.
파일 생성 시간을 절약하려면 이 플러그인 Jekyll-Compose 을 사용하여 이를 수행하는 것이 좋습니다.

머리말

기본적으로 게시물 상단에 다음과 같은 머리말 을 작성해야 합니다.

1
2
3
4
5
6

---
title: 타이틀
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [카테고리1, 카테고리2]
tags: [태그1]     # 태그 이름은 소문자여야합니다
---

주의 점!

게시물의 _레이아웃_은 기본적으로 설정되어 있으므로 머리말 블록에 layout : post 를 추가할 필요가 없습니다!

날짜의 시간대

게시물의 릴리즈 날짜를 정확히 기록하려면 _config.yml} 파일의 timezone설정을 해야합니다. 한국은 Asia/Soul 입니다.
또한 게시물의 타임존을 머리말 블록의 date에 제공합니다. 형식은 +/-TTTT 예를들어 +0800 같이

카테고리와 태그

각 categories포스트의 요소는 최대 2개의 요소를 포함하도록 설계되었으며 요소의 tags수는 0에서 무한대일 수 있습니다.
예를 들어:

1
2
3
4

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

작성자 정보

게시물의 작성자 정보는 일반적으로 _머리말_에 입력할 필요가 없으며 기본적으로 _config.yml 파일의 social.name 변수와 social.links의 첫 번째 항목에서 가져옵니다.

_data/authors.yml 에 작성자 정보를 추가하는 것을 통해 재정의 가능합니다 (웹 사이트에 이 파일이 없으면 주저하지 말고 작성하세요!)

1
2
3
4

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

그런 다음 게시물의 YAML 블록에서 사용자 지정 작성자를 설정합니다

1
2
3

---
author: <author_id>
---

_data/authors.yml 파일에서 작성 정보를 읽는 방식의 장점은 페이지가 twitter:creator 메타 태그를 가지게 되어 Twitter Cards 를 풍부하게 하고 검색엔진 최적화에 좋다는 것입니다.

목차 만들기

목차는 오른쪽 패널에 표시됩니다.

  1. 블로그 전체에서 목차를 끄려면 _config.yml에서 아래와 같이 toc 값을 false 로 수정합니다.
  2. 특정 게시물에서만 목차를 끄려면 머릿말 에 아래 코드와 같이 씁니다.
1
2
3
4

(머릿말)
---
toc: false
---

댓글

댓글을 전역으로 바꾸는 것은 _config.yml 파일의 comments.active 변수로 정의할 수 있습니다. 이 변수를 true 로 설정하면 모든 게시물에 대한 댓글 기능이 켜집니다.

특정 게시물에 대한 댓글만 닫으려면 머릿말 에 다음 코드를 추가하면 됩니다.

1
2
3

---
comments: false
---

수학 식

For website performance reasons, the mathematical feature won’t be loaded by default. But it can be enabled by:

성능 상의 이유로 수학식은 기본적으로 로드되지 않습니다. 그러나 다음을 통해 활성화 할 수 있습니다.

1
2
3

---
math: true
---

Mermaid

Mermaid는 훌륭한 다이어그램 생성 도구입니다. 게시물에서 활성화 하려면 다음(아래) 코드를 추가합니다.

1
2
3

---
mermaid: true
---

그러면 다른 마크다운 언어처럼 그래프 코드를 ```mermaid 와 ```로 묶습니다.

이미지

이미지의 캡션

이미지의 다음 줄에 이탤릭체 글씨를 추가하면 이미지 하단에 나타나 캡션 역할을 합니다.

1
2

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

이미지의 사이즈

이미지가 로드될 때 페이지 콘텐츠 레이아웃이 이동되는 것을 방지라혀면, 각 이미지의 너비와 높이를 설정해주어야 합니다.

1

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

_Chirpy 버전 5.0.0 부터 너비와 높이가 약어를 지원합니다. 너비 -> w, 높이 -> h

1

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

이미지의 위치

기본적으로 이미지는 중앙에 위치하지만 normal, left, right 클래스 중 하나를 사용하여 위치를 지정할 수 있습니다.

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

  • Normal 위치

    Image will be left aligned in below sample:

    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 }

이미지 그림자

이미지 창은 그림자 효과를 표시할 수 있으며, 그림자는 light 모드에서 볼 수 있습니다.

1

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

이미지 CDN URL

CDN에 이미지를 호스팅하는 경우 _config.yml 파일의 img_cdn 변수를 할당하여 CDN URL을 반복적으로 작성하는 시간을 절약할 수 있습니다.

1

img_cdn: https://cdn.com

img_cdn이 지정되면 /로 시작하는 모든 이미지(사이트 아바타 및 게시물의 이미지)의 경로에 CDN URL이 추가됩니다.

예를 들어 이미지를 사용할 때 이렇게 쓸 수 있습니다:

1

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

처리된 결과는 다음처럼 이미지 경로 앞에 CDN 접두사 https://cdn.com을 자동으로 추가합니다.

1

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

이미지 경로

게시물에 많은 이미지가 포함된 경우 이미지의 경로를 반복적으로 정의하는 것은 시간이 많이 걸리는 작업입니다. 이 문제를 해결하기 위해 게시물의 말머리 에서 이 경로를 정의할 수 있습니다.

1
2
3

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

그러면, Markdown의 이미지 소스는 파일 이름만 써도 표시됩니다.

1

![The flower](flower.png)

처리된 결과는 다음과 같습니다.

1

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

미리보기 이미지

게시물 콘텐츠 상단에 이미지를 추가하려면 이미지의 path, width, height 및 alt 속성을 지정하세요.

1
2
3
4
5
6
7

---
image:
  path: /path/to/image/file
  width: 1000   # in pixels
  height: 400   # in pixels
  alt: 이미지 대체 텍스트
---

alt를 제외한 다른 모든 옵션, 특히 사용자 경험 및 웹 페이지 로딩 성능과 관련된 width 및 height가 필요합니다. 위의 “ 이미지의 사이즈” 섹션에서도 이에 대해 언급하고 있습니다.

_Chirpy v5.0.0_부터 height 및 width 속성은 height → h, width → w로 축약될 수 있습니다. 또한 이미지 경로도 미리보기 이미지에 전달할 수 있습니다. 즉, 설정되면 path 속성은 이미지 파일 이름만 필요합니다.

게시물 메인에 고정하기

하나 이상의 게시물을 홈페이지 상단에 고정할 수 있으며, 고정 게시물은 출시일에 따라 역순으로 정렬됩니다. 다음으로 활성화 가능합니다.

1
2
3

---
pin: true
---

Prompts

프롬프트에는 tip, info, warning 및 danger와 같은 여러 유형이 있습니다. 블록 인용에 prompt-{type} 클래스를 추가하여 생성할 수 있습니다. 예를 들어 info 유형의 프롬프트를 다음과 같이 정의합니다.

1
2

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

Syntax

인라인 코드

1

`inline code part`

파일 경로 하이라이트

{: .filepath} 을 붙이면 됩니다.

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을 제외한 모든 언어는 줄 번호를 표시합니다. 코드 블록의 줄 번호를 숨기려면 ‘nolineno’ 클래스를 추가하세요.

1
2
3
4

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

파일명을 지정하기

코드 블록의 맨 위에 코드 언어가 표시되는 것을 보셨을 것입니다. 파일 이름으로 바꾸려면 코드블럭 밑에 file 속성을 추가하여 이를 달성할 수 있습니다.

1
2
3
4

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

Liquid Codes

Liquid 스니펫을 표시하려면 Liquid Codes를 {% 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 이상 필요)를 추가합니다.

더 자세한 설명…

자세한 내용은 다음에서 확인하세요. Jekyll Docs: Posts.

Jekyll
Tutorial Jekyll
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents