018. JeKyll 커스터마이징 - (1) 템플릿 - 필터

jekyll , , Comments

커스터마이징 - (1) 템플릿 - 필터

본 카테고리는 정적 블로그 생성도구인 Jekyll에 관하여 작성하는 곳이다.

공식 사이트의 내용을 좀 더 풀어쓰고 스크린샷을 첨부하여 좀 더 상세히 기록하고자 한다.

참고 Jekyll 공식 사이트

템플릿

Jekyll은 Liquid 템플릿 언어를 사용하여 템플릿을 처리한다.

모든 표준 Liquid 태그 및 필터가 지원되며 추가적으로 작업을 더 쉽게하기 위한 Jekyll만의 필터와 태그도 있다.

양이 방대하므로 필터, 태그, 링크를 나누어서 포스팅하겠다.

필터

Relative URL
baseurl을 제외한 나머지 상대 경로를 출력한다.
사이트가 도메인 루트가 아닌 하위 경로에서 호스팅되는 경우 유용하다.

1
2
필터 예시 : {{ "/assets/style.css"| relative_url}}
출력 예시 : /my-baseurl/assets/style.css

Absolute URL
baseurl을 포함한 절대 경로를 출력한다.

1
2
필터 예시 : {{ "/assets/style.css" | absolute_url }}
출력 예시 : http://example.com/my-baseurl/assets/style.css

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

1
2
필터 예시 : {{ site.time | date_to_xmlschema }}
출력 예시 : 2008-11-07T13:07:54-08:00

Date to RFC-822 Format
날짜를 RSS feed에 사용하는 RFC-822 형식으로 변환한다.

1
2
필터 예시 : {{ site.time | date_to_rfc822 }}
출력 예시 : Mon, 07 Nov 2008 13:07:54 -0800

Date to String
날짜를 짧은 형식의 문자열로 변환한다.

1
2
필터 예시 : {{ site.time | date_to_string }}
출력 예시 : 07 Nov 2008

Date to Long String
날짜를 긴 형식의 문자열로 변환한다.

1
2
필터 예시 : {{ site.time | date_to_long_string }}
출력 예시 : 07 November 2008

Where
배열에서 입력받은 키와 값을 가진 모든 객체를 선택한다.

1
필터 예시 : {{ site.members | where:"graduation_year","2014" }}

Where Expression
배열에서 입력받은 표현식이 참인 모든 객체를 선택한다.

1
2
3
4
5
6
필터 예시 : {{ 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
배열의 객체들을 입력된 항목으로 그룹화한다.

1
2
3
필터 예시 : {{ site.members | group_by:"graduation_year" }}
출력 예시 : [{"name"=>"2013", "items"=>[...]},
{"name"=>"2014", "items"=>[...]}]

Group By Expression
배열의 객체들을 입력된 Liquid 표현식을 사용하여 그룹화한다.

1
2
3
4
필터 예시 : {{ site.members | group_by_exp:"item",
"item.graduation_year | truncate: 3, \"\"" }}
출력 예시 : [{"name"=>"201...", "items"=>[...]},
{"name"=>"200...", "items"=>[...]}]

XML Escape
XML에서 사용되는 일부 텍스트를 Escape 처리한다.

1
2
3
필터 예시 : {{ page.content | xml_escape }}
출력 예제 : xml_escape('foo "bar" <baz>')
출력 결과 : `"foo &quot;bar&quot; &lt;baz&gt;"`

CGI Escape
URL에서 사용할 문자열을 이스케이프 처리한다.
특수 문자를 대체 문자 %XX로 변환한다.

1
2
필터 예시 : {{ "foo,bar;baz?" | cgi_escape }}
출력 예시 : foo%2Cbar%3Bbaz%3F

URI Escape
URI 문자열을 Escape 처리한다.

1
2
필터 예시 : {{ "http://foo.com/?query=foo, bar \baz?" | uri_escape }}
출력 예시 : http://foo.com/?query=foo,%20bar%20%5Cbaz?

Number of Words
지정된 텍스트의 단어 개수를 반환한다.

1
2
필터 예시 : {{ page.content | number_of_words }}
출력 예시 : 1337

Array to Sentence
배열을 하나의 문자열로 변환한다.
태그 목록을 하나의 문자열로 출력하는데 유용하다.
문자열 끝의 connector는 선택사항이다.

1
2
3
4
필터 예시 : {{ page.tags | array_to_sentence_string }}
출력 예시 : foo, bar, and baz
필터 예시 : {{ page.tags | array_to_sentence_string: 'or' }}
출력 예시 : foo, bar, or baz

Markdownify
Markdown 형식의 문자열을 HTML로 변환한다.

1
필터 예시 : {{ page.excerpt | markdownify }}

Smartify
“quotes”를 “smart quotes”로 변환한다.
" -> “

1
필터 예시 : {{ page.title | smartify }}

Converting Sass/SCSS
Sass / SCSS 형식의 문자열을 CSS로 변환한다.

1
2
필터 예시 : {{ some_scss | scssify }}
필터 예시 : {{ some_sass | sassify }}

Slugify
문자열을 소문자 URL인 “slug”로 변환한다.
옵션은 아래 출력 예시를 확인하자.
포스팅의 아래쪽에 Slugify의 옵션값을 따로 작성하였다.

1
2
3
4
필터 예시 : {{ "The config.yml file" | slugify }}
출력 예시 : the-config-yml-file
필터 예시 : {{ "The config.yml file" | slugify: 'pretty' }}
출력 예시 : the-config.yml-file

Data To JSON
Hash나 배열을 JSON 형식으로 변환한다.

1
필터 예시 : {{ site.data.projects | jsonify }}

Normalize Whitespace
모든 공백 문자를 하나의 공백(single space)로 대체한다.

1
필터 예시 : {{ "a \n b" | normalize_whitespace }}

Sort
배열을 정렬한다.
sort : ‘[1]’, ‘[2]’ 형태라고 할때 Hash의 매개변수는 다음과 같다
[1] : 속성의 이름
[2] : nils 정렬 순서(first or last)

1
2
3
필터 예시 : {{ page.tags | sort }}
필터 예시 : {{ site.posts | sort: 'author' }}
필터 예시 : {{ site.pages | sort: 'title', 'last' }}

Sample
배열에서 임의의 값을 선택한다.
선택하는 값의 개수는 선택사항이다.

1
2
필터 예시 : {{ site.pages | sample }}
필터 예시 : {{ site.pages | sample:2 }}

To Integer
문자열이나 boolean 변수를 정수로 변환한다.

1
필터 예시 : {{ some_var | to_integer }}

Array Filters
배열에서 요소를 push, pop, shift, unshift 한다.
원래 배열을 파괴하지 않고 새로운 사본 배열을 만들어 필터를 적용한다.

1
2
3
4
5
6
7
8
필터 예시 : {{ page.tags | push: 'Spokane' }}
출력 예시 : ['Seattle', 'Tacoma', 'Spokane']
필터 예시 : {{ page.tags | pop }}
출력 예시 : ['Seattle']
필터 예시 : {{ page.tags | shift }}
출력 예시 : ['Tacoma']
필터 예시 : {{ page.tags | unshift: "Olympia" }}
출력 예시 : ['Olympia', 'Seattle', 'Tacoma']

Inspect
디버깅을 위하여 특정 객체를 문자열로 변환한다.

1
필터 예시 : {{ some_var | inspect }}

Slugify 필터의 옵션값

slugify 필터는 필터링할 항목을 선택할 수 있도록 옵션을 허용한다.

기본값은 default로 설정되며 다른 값들은 아래와 같다.

none
아무것도 필터링하지 않음

raw
공백(space) 문자 필터링

default
공백, 영문자나 숫자가 아닌 문자를 필터링

pretty
._~!$&'()+,;=@를 제외한 공백, 영문자나 숫자가 아닌 문자를 필터링

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

Namhoon KimSoftware Engineer

Work @ NAVER Corperation