019. JeKyll 커스터마이징 - (2) 템플릿 - 태그

커스터마이징 - (2) 템플릿 - 태그

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

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

참고 Jekyll 공식 사이트

템플릿

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

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

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

태그

Includes

사이트내 페이지에서 여러 위치에 사용되는 작은 페이지 조각들이 있다면 include 태그를 이용할 수 있다.

페이지 조각을 구성하는 코드를 따로 파일로 작성해둔 뒤 다른 페이지에서 해당 조각을 삽입하려는 위치에 태그를 사용하면 된다.

{% include footer.html %}

위와 같이 작성하면 해당 위치에 footer.html 파일에 작성된 코드가 통째로 삽입된다.

Jekyll에서는 include에 사용되는 모든 파일이 _includes 디렉토리에 위치에 존재해야 한다.

{% include footer.html %}

따라서 위의 코드는 _includes/footer.html 파일의 코드를 호출하게 된다.

참고 Jekyll Includes 문서

코드 블록 강조

Jekyll은 Rouge를 통해 60개가 넘는 프로그래밍 언어의 구문을 강조할 수 있도록 지원해준다.

Rouge는 Jekyll 3.0 버전 이상에서 기본적으로 내장된 구문 강조를 위한 도구이다.

만약 Jekyll 2 버전에서 사용하려면 highlighter 설정을 rouge로 설정한 뒤 rouge gem이 제대로 설치되었는지 확인해야 한다.

Rouge이외에도 Pygments를 사용하여 코드 블록을 강조할 수 있다.

Pygments를 사용하려면 시스템에 Python이 설치되어 있어야 하며 추가적으로 pygments.rb gem을 설치한 뒤 _config.yml의 highlighter를 pygments로 지정한다.

Pygments는 100개 이상의 프로그래밍 언어를 지원한다.

Jekyll에서 코드 블록의 구문을 강조 하려면 아래와 같이 작성한다.

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

위의 코드는 아래와 같이 렌더링 된다.

def foo
  puts 'foo'
end

코드에서 보듯이 highlight 태그에 대한 파라미터는 해당 언어의 식별자며, 예제에서는 ruby로 입력되었다.

참고 Rouge Wiki의 언어 식별자

참고 Pygments의 Lexers 페이지

코드 줄 표시

highlight의 파라미터는 언어 식별자 뿐만 아니라 linenos를 추가해서 쓸 수 있다.

linenos를 추가하면 코드 블록에 줄 번호를 포함하여 렌더링한다.

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

코드 구문 강조를 위한 스타일시트

코드의 강조 표시를 렌더링된 사이트에서 확인하려면 스타일시트가 필요하다.

대표적으로는 syntax.css 가 있으며, 아래에 링크에서 확인할 수 있다.

syntax.css는 github에서 사용하는 것과 같은 스타일로, 사이트에서 자유롭게 사용할 수 있다.

만약 highlight 파라미터로 linenos를 사용할 경우엔 스타일시트에 .lineno 클래스를 추가하여 강조 표시된 코드와 코드의 줄 번호을 구별할 수 있다.

참고 syntax.css

Gist

gist 태그를 사용하여 사이트에 Github의 gist를 쉽게 포함시킬 수 있다.

Gist의 공개(public)나 비공개(secret) 상태에 상관없이 사용할 수 있다.

{% gist parkr/931c1c8d465a04042403 %}

위와 같이 삽입하면 된다.

파일명도 표시하고 싶을 땐 아래와 같이 작성한다.

{% gist parkr/931c1c8d465a04042403 jekyll-private-gist.markdown %}

이 gist 태그를 사용하려면 jekyll-gist gem을 프로젝트에 포함시켜야 한다.

gem install jekyll-gist

위와 같이 설치하면 된다.

참고 Github gist

참고 Jekyll::Gist Repository