템플릿

Jekyll 은 템플릿 처리 작업을 위해 Liquid 템플릿 언어를 사용합니다. 표준 Liquid 태그필터를 모두 지원합니다. 빈도가 높은 작업을 더 쉽게하기 위해, Jekyll 에만 추가된 필터와 태그도 있으며 모두 이 페이지에 설명되어 있습니다. 게다가 플러그인을 사용하면 Jekyll 에 자신만의 태그도 만들 수 있습니다.

필터

설명 필터결과

Relative URL

입력값 앞에 baseurl 값을 추가한다. 사이트가 최상위 경로가 아닌 하위 경로에서 호스팅 될 경우 유용하다.

{{ "/assets/style.css" | relative_url }}

/my-baseurl/assets/style.css

Absolute URL

입력값 앞에 urlbaseurl 값을 추가한다.

{{ "/assets/style.css" | absolute_url }}

http://example.com/my-baseurl/assets/style.css

Date to XML Schema

날짜를 XML 스키마 (ISO 8601) 형식으로 변환한다.

{{ site.time | date_to_xmlschema }}

2008-11-07T13:07:54-08:00

Date to RFC-822 Format

날짜를 RSS 피드에 사용하는 RFC-822 형식으로 변환한다.

{{ site.time | date_to_rfc822 }}

Mon, 07 Nov 2008 13:07:54 -0800

Date to String

날짜를 짧은 형식으로 변환한다.

{{ site.time | date_to_string }}

07 Nov 2008

Date to String in ordinal US style

날짜를 미국형 짧은 서수식으로 변환한다.

{{ site.time | date_to_string: "ordinal", "US" }}

Nov 7th, 2008

Date to Long String

날짜를 긴 형식으로 변환한다.

{{ site.time | date_to_long_string }}

07 November 2008

Date to Long String in ordinal UK style

날짜를 영국형 긴 서수식으로 변환한다.

{{ site.time | date_to_long_string: "ordinal" }}

7th November 2008

Where

배열 안에서 특정 키와 값을 가진 객체들을 선택한다.

{{ site.members | where:"graduation_year","2014" }}

Where Expression

배열 안에서 표현식이 참인 객체들을 선택한다. 3.2.0

{{ site.members | where_exp:"item", "item.graduation_year == 2014" }} {{ site.members | where_exp:"item", "item.graduation_year < 2014" }} {{ site.members | where_exp:"item", "item.projects contains 'foo'" }}

Group By

배열 안의 항목들을 특정 속성으로 그룹 짓는다.

{{ site.members | group_by:"graduation_year" }}

[{"name"=>"2013", "items"=>[...]}, {"name"=>"2014", "items"=>[...]}]

Group By Expression

배열 안의 항목들을 Liquid 표현식을 사용해 그룹 짓는다. 3.4.0

{{ site.members | group_by_exp:"item", "item.graduation_year | truncate: 3, \"\"" }}

[{"name"=>"201...", "items"=>[...]}, {"name"=>"200...", "items"=>[...]}]

XML Escape

XML 에 사용되는 몇몇 텍스트를 이스케이프 한다.

{{ page.content | xml_escape }}

CGI Escape

URL 에 사용되는 CGI 이스케이프 문자열. 모든 특수문자를 그에 맞는 %XX 로 변환한다. 일반적으로 CGI 이스케이프에서는 공백이 + 문자로 교체된다.

{{ "foo, bar; baz?" | cgi_escape }}

foo%2C+bar%3B+baz%3F

URI Escape

URI 에 있는 특수 문자들에 퍼센트 문자 인코딩을 한다. 일반적으로 URI 이스케이프에서는 공백이 %20 로 교체된다. 예약 문자들은 이스케이프되지 않는다.

{{ "http://foo.com/?q=foo, \bar?" | uri_escape }}

http://foo.com/?q=foo,%20%5Cbar?

Number of Words

텍스트 안의 단어 수.

{{ page.content | number_of_words }}

1337

Array to Sentence

배열을 한 문장으로 변환한다. 태그를 나열할 때 유용하다. 커넥터에는 선택사항이다.

{{ page.tags | array_to_sentence_string }}

foo, bar, and baz

{{ page.tags | array_to_sentence_string: 'or' }}

foo, bar, or baz

Markdownify

마크다운 포맷 문자열을 HTML 로 변환한다.

{{ page.excerpt | markdownify }}

Smartify

"일반 따옴표" 를 “세련된 따옴표”로 변환한다.

{{ page.title | smartify }}

Converting Sass/SCSS

Sass 또는 SCSS 형식 문자열을 CSS 로 변환한다.

{{ some_scss | scssify }} {{ some_sass | sassify }}

Slugify

문자열을 소문자 URL "슬러그"로 변환한다. 자세한 옵션은 아래를 참고하시오.

{{ "The _config.yml file" | slugify }}

the-config-yml-file

{{ "The _config.yml file" | slugify: 'pretty' }}

the-_config.yml-file

{{ "The _cönfig.yml file" | slugify: 'ascii' }}

the-c-nfig-yml-file

{{ "The cönfig.yml file" | slugify: 'latin' }}

the-config-yml-file

Data To JSON

해시나 배열을 JSON 으로 변환한다.

{{ site.data.projects | jsonify }}

Normalize Whitespace

모든 공백문자를 하나의 공백으로 변환한다.

{{ "a \n b" | normalize_whitespace }}

Sort

배열을 정렬한다. 해시에 사용하는 선택적 파라메터: 1. 속성 이름 2. nils 순서 (first 또는 last).

{{ page.tags | sort }}

{{ site.posts | sort: 'author' }}

{{ site.pages | sort: 'title', 'last' }}

Sample

배열 안에서 무작위로 선택한 값 하나. 선택사항: 값을 여러 개 선택한다.

{{ site.pages | sample }}

{{ site.pages | sample:2 }}

To Integer

문자열 또는 부울 값을 정수형으로 변환한다.

{{ some_var | to_integer }}

Array Filters

배열에 항목을 삽입, 추출, 순환시킨다.

이 필터는 비파괴적이다. 예시, 해당 배열을 직접 변경하지 않고, 복사본을 만든 후 변경한다.

{{ page.tags | push: 'Spokane' }}

['Seattle', 'Tacoma', 'Spokane']

{{ page.tags | pop }}

['Seattle']

{{ page.tags | shift }}

['Tacoma']

{{ page.tags | unshift: "Olympia" }}

['Olympia', 'Seattle', 'Tacoma']

Inspect

디버깅을 위해 객체를 문자열로 표시한다.

{{ some_var | inspect }}

slugify 필터의 옵션들

slugify 필터에는 옵션이 있어서, 무엇을 필터링할 것인지 선택할 수 있습니다. 디폴트값은 default 입니다. 옵션값(과 그에 대한 필터링 대상)은 다음과 같습니다:

  • none: 필터링 안함
  • raw: 공백문자
  • default: 알파벳, 숫자가 아닌 문자 또는 공백문자
  • pretty: 알파벳, 숫자가 아닌 문자 (._~!$&'()+,;=@ 제외) 또는 공백문자
  • ascii: 알파벳, 숫자, ASCII 가 아닌 문자 또는 공백문자
  • latin: default 와 동일하나, 라틴 문자를 우선적으로 변환한다 (예, àèïòüaeiou 로)3.7.0

    태그

조각파일

사이트의 여기저기에 삽입시키고자 하는 작은 페이지 조각들이 있다면, 조각파일 로 저장하고 include 태그를 사용해 필요한 곳에 삽입하세요:

{% include footer.html %}

조각파일 은 프로젝트 Site Source 디렉토리 안의 _includes 디렉토리에 넣어야 합니다. 위 예제의 경우, 이 코드를 포함하고 있는 파일에는 _includes/footer.html 의 내용이 삽입됩니다.

조각파일 사용법에 대한 더 자세한 설명에 대해서는, 조각파일을 살펴보세요.

코드 구문 강조

Rouge 덕분에 Jekyll 은 60 개 이상의 언어에 대한 구문 강조 기능을 내장하고 있습니다. Jekyll 3 와 그 이상의 버전에서는 Rouge 가 기본 구문 강조기입니다. Jekyll 2 에서 사용하기 위해서는, highlighterrouge 로 설정하고 루비 젬 rouge 가 제대로 설치되어 있는지 확인하세요.

다른 방법으로는, Pygments 를 사용해 코드 조각에 구문 강조를 할 수 있습니다. Pygments 를 사용하기 위해서는, 시스템에 Python 과 루비 젬 pygments.rb 가 설치되어 있어야 하고, 사이트 환경설정 파일에 highlighterpygments 로 설정해야 합니다. Pygments 는 100 개 이상의 언어를 지원합니다.

구문 강조가 적용된 코드 블럭을 출력하려면, 코드 앞뒤에 다음과 같이 작성합니다:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

highlight 태그에 전달한 인자 (위 예시에서는 ruby) 는 언어 식별자입니다. 각 언어에 해당하는 구문 강조용 식별자를 찾으려면, Rouge 위키 또는 Pygments 의 Lexer 페이지에서 “short name” 을 살펴보세요.

Jekyll 은 코드 블록 안에서도 Liquid 필터를 처리합니다

만약 당신이 사용하려는 언어에 중괄호가 포함되어 있다면, 당신의 코드 앞 뒤를 {% raw %}{% endraw %} 태그로 감싸야 할 것입니다.

줄 번호

highlight 의 두 번째 파라메터인 linenos 는 선택사항입니다. 파라메터 linenos 를 추가하면 구문 강조된 코드에 줄 번호를 표시합니다. 예를 들어, 다음 코드 블록에는 각 줄에 줄 번호가 표시됩니다:

{% highlight ruby linenos %}
def foo
  puts 'foo'
end
{% endhighlight %}

구문 강조용 스타일시트

강조 부분을 눈에 띄게 만들려면, 구문 강조용 스타일시트를 추가해야 합니다. 참고해볼만한 스타일시트로는 syntax.css 가 있습니다. 이 스타일은 GitHub 에서 사용하는 것과 동일하며 당신의 사이트에도 자유롭게 사용할 수 있습니다. linenos 를 사용하는 경우에는, syntax.css.lineno 라는 CSS 클래스 선언을 추가해서 줄 번호와 구문 강조된 코드를 구분할 수 있습니다.

링크

게시물, 페이지, 콜렉션 항목 또는 파일에 연결하기 위해, link 태그가 당신이 지정한 경로에 대해 올바른 고유주소 URL 을 생성할 것입니다. 예를 들어, mypage.html 에 연결하기 위해 link 태그를 사용하면, 당신이 고유주소 스타일에 파일 확장자를 포함하도록 또는 포함하지 않도록 변경하더라도, link 태그는 언제나 올바른 URL 을 생성할 것입니다.

link 태그를 사용할 때에는 반드시 파일을 실제 확장자를 명시해야 합니다. 여기 예시가 몇 개 있습니다:

{{ site.baseurl }}{% link _collection/name-of-document.md %}
{{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %}
{{ site.baseurl }}{% link news/index.html %}
{{ site.baseurl }}{% link /assets/files/doc.pdf %}

다음과 같이 마크다운 안에서도 link 태그를 사용해 링크를 생성할 수 있습니다:

[Link to a document]({{ site.baseurl }}{% link _collection/name-of-document.md %})
[Link to a post]({{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %})
[Link to a page]({{ site.baseurl }}{% link news/index.html %})
[Link to a file]({{ site.baseurl }}{% link /assets/files/doc.pdf %})

({{ site.baseurl }} 을 사용하는 것은 선택사항입니다 — 페이지의 URL 에 baseurl 값을 포함시킬지 말지 당신의 결정에 달려있습니다.)

게시물, 페이지 또는 콜렉션의 경로는 현재 페이지로부터 다른 페이지로의 상대 경로가 아니라, 최상위 디렉토리(환경설정 파일이 있는 위치)에서 해당 파일에 대한 상대 경로로 결정됩니다.

예를 들어, page_a.md (pages/folder1/folder2 에 저장되어 있음) 에 page_b.md (pages/folder1 에 저장되어 있음) 로의 링크를 생성한다고 생각해봅시다. 이 링크의 경로는 ../page_b.html 이 아닙니다. 경로는 /pages/folder1/page_b.md 입니다.

정확한 경로를 모르겠다면, 해당 페이지에 {{ page.path }} 를 추가해서 경로를 표시할 수 있습니다.

linkpost_url 태그를 사용하는 가장 큰 장점은 링크 유효성 검사입니다. 해당 링크가 존재하지 않는다면, Jekyll 은 사이트를 빌드하지 않을 것입니다. 이는 깨진 링크에 대한 경고를 주어 고칠 기회를 얻을 수 있으므로 장점이라고 할 수 있습니다 (그렇지 않으면 깨진 링크를 가진 사이트를 배포하게 될 것입니다).

link 태그에는 필터를 추가할 수 없다는 것을 알아두세요. 예를 들어, {% link mypage.html | append: "#section1" %} 처럼 Liquid 필터를 사용해 문자열을 추가할 수 없습니다. 페이지의 특정 부분에 링크하기 위해서는, 기본 HTML 링크나 마크다운 링크 방식을 사용해야 합니다.

링크하고자 하는 파일의 이름을 지정할 때 실제 파일 이름 대신 변수를 사용할 수 있습니다. 예를 들어, 다음과 같이 페이지의 머리말에 변수를 정의했다고 생각해봅시다:

---
title: My page
my_variable: footer_company_a.html
---

그럼 링크에서 이 변수를 참조할 수 있습니다:

{% link {{ page.my_variable }} %}

이 예제에서는, footer_company_a.html 파일에 대한 링크가 추가됩니다.

게시물에 연결하기

당신의 사이트 내 게시물에 대한 링크가 필요한 경우, post_url 태그를 사용하면 원하는 게시물에 대한 올바른 고유주소를 만들 수 있습니다.

{{ site.baseurl }}{% post_url 2010-07-21-name-of-post %}

만약 게시물을 하위 디렉토리에 넣고 관리한다면, 하위 디렉토리 경로도 포함시켜야 합니다:

{{ site.baseurl }}{% post_url /subdir/2010-07-21-name-of-post %}

post_url 태그를 사용할 때는 파일 확장자를 지정할 필요가 없습니다.

다음과 같이 마크다운에서도 이 태그를 사용하여 게시물 링크를 생성할 수 있습니다:

[Name of Link]({{ site.baseurl }}{% post_url 2010-07-21-name-of-post %})