020. JeKyll 커스터마이징 - (3) 템플릿 - 링크

커스터마이징 - (3) 템플릿 - 링크

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

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

참고 Jekyll 공식 사이트

템플릿

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

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

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

링크

페이지에 링크하기

포스트, 페이지, 컬렉션이나 파일을 연결하려면 link 태그를 사용하여 해당 경로에 대한 permalink URL를 만들어주면 된다.

예를 들어 link 태그를 사용하여 mypage.html에 연결하여 유효한 URL을 생성할 수 있으며, permalink의 스타일을 변경하여 파일의 확장자를 포함하든 포함하지 않든 이 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 %}

Markdown에서 링크를 생성할 땐 아래와 같이 작성한다.

[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로 시작하느냐에 따라 달라진다. 환경설정 파일 _config.yml을 참고하자.

포스트, 페이지, 컬렉션에 대한 경로는 기존 페이지와 다른 페이지로의 상대적 경로가 아닌 _config.yml 파일이 있는 루트 디렉토리의 상대적 경로로 정의된다.

예를 들어 pages/folder1/folder2 경로에 있는 page_a.md파일에서 ‘pages/folder1 경로에 있는 'page_b.html파일로 링크를 생성한다면../page_b.html이 아닌 /pages/folder1/page_b.md`로 생성된다.

위의 예시의 이해를 돕기 위한 구조도를 그려보면 아래와 같다.

.
├── _config.yml
├── index.html
├── ...
└── pages
    └── folder1
        └── page_b.html
        └── folder2
            └── page_a.html

만약 경로를 확실히 하고 싶은 경우 {{ page.path }}를 추가하면 경로가 표시된다.

유효성 검사

link 태그의 가장 큰 이점 중 하나는 해당 링크의 유효성을 검사할 수 있는 것이다.

만약 링크가 유효하지 않으면 Jekyll은 사이트를 구축하지않는다.

이를 통해 단절된 링크를 확인하고 해결할 수 있으므로 링크가 유효하지 않은 사이트를 배포하는 것을 방지한다.

필터

link 태그에는 필터를 추가할 수 없다.

예를 들어, 아래와 같이 Liquid 필터를 이용하여 문자열을 추가하는 것은 불가능하다.

{% link mypage.html | append: "#section1" %}

만약 페이지의 특정 섹션에 연결하려면 일반적인 HTML 태그를 사용하여 연결하거나 Markdown을 통해 연결해야 한다.

포스트에 링크하기

만약 사이트에 게시물에 대한 링크를 포함시키려면 post_url 태그를 사용하여 parmalink URL을 생성할 수 있다.

아래의 예제를 보자.

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

만약 하위 디렉토리에 포스트가 있는 경우엔 파일명 앞에 하위 디렉토리의 경로를 포함한다.

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

페이지를 링크할 때와는 달리 post_url 태그를 사용할 때는 파일의 확장자를 명시할 필요가 없다.

Markdown에서 사용할 땐 아래와 같이 작성한다.

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