포스트에 Series 적용하기 2020. 05. 01. 22:08 blog#jekyll#customizing#series 대개의 경우 글을 쓸 때 단편적인 글을 쓰지만 하나의 주제를 연재식으로 쓸 때가 있다. 이러한 시리즈글은 태그나 카테고리로는 표현이 어려우므로 커스터마이징이 필요했다. 시리즈를 구현하기 위한 방법으로 커스텀 플러그인을 개발하거나 컬렉션 등을 활용할 수 있겠지만, 현재 블로그에서는 Jekyll의 데이터 파일을 활용해 구현하였다. 데이터 파일 데이터 파일은 말그대로 사이트에서 사용할 데이터 파일로써 YAML, JSON, CSV, TSV 파일을 _data 디렉토리에 위치 시켜 Liquid에서 사용할 수 있다. _data 하위의 디렉토리를 구성하여 데이터의 네임스페이스를 적용할 수 있어서, 시리즈를 위한 데이터 파일은 _data/series 디렉토리에 위치 시켰다. 아래는 “Java Annotation in Action” 시리즈의 데이터를 저장하기 위한 java_annotation_in_action.yaml 파일이다. name: Java Annotation in Action posts: - title: '애너테이션 소개' path: /dev/java/2020/05/02/Java-Annotation-in-Action-1.html - title: '애너테이션 작성' path: /dev/java/2020/05/02/Java-Annotation-in-Action-2.html - title: '리플렉션을 이용한 런타임 애너테이션 처리' path: /dev/java/2020/05/02/Java-Annotation-in-Action-3.html published: false # 이하 생략 시리즈의 이름으로 name 속성과 시리즈에 포함되는 posts 속성을 정의하고, posts 하위에는 title, path, published(Optional)로 구성되는 배열을 정의했고, 이 구조를 post.html 레이아웃에서 사용하게 된다. title: 시리즈에 포함된 글의 제목 path: 해당 포스트의 상대 경로, 링크와 현재 페이지 비교 시 사용 published: 포스트의 발행 여부, 그 때 그 때 글을 작성하고 시리즈 파일에 추가할 수도 있겠지만 미리 목록으로 보여주고 싶은 경우를 위해 추가했다. false인 경우 링크는 걸지 않고 제목 뒤에 (예정) 텍스트를 보여준다. Jekyll은 _post 디렉토리에 작성하더라도 published의 값을 false로 주면 글을 노출시키지 않기 때문에 미리 파일을 생성해둘 수 있다. 포스트 헤더(Front Matter)에 series 속성 추가 데이터 파일을 이용해 시리즈 목록을 표시하는 방법은 포스트의 series 속성에 정의한 이름으로 데이터 파일을 찾아 시리즈를 찾도록 한다. 이 때 데이터 파일의 경로, 확장자를 제외한 파일 이름을 series 속성으로 설정한다. Java Annotation in Action 시리즈의 데이터 파일 이름은 java_annotation_in_action.yml이므로 작성하는 포스트의 헤더를 아래와 같이 작성한다. --- title: 포스트 제목 #...기타 속성 작성 series: java_annotation_in_action --- Post 레이아웃 수정 Post 레이아웃에서 시리즈 목록을 보여줄 위치에 아래 코드를 추가해준다. 참고로 page 변수가 렌더링 될 글의 참조 변수이고 post는 시리즈의 포스트 데이터이다. <!-- 페이지에 series 속성이 있는 경우에만 처리 --> {% if page.series != nil %} <!-- data.series에서 페이지의 시리즈 이름으로 데이터를 가져옴 --> {% assign series = site.data.series[page.series] %} <div class="post-series"> <header>{{ series.name }} 시리즈</header> <ol> {% for post in series.posts %} <li> <div> {% if post.published == false %} <!-- 시리즈 포스트의 published가 false인 경우에는 제목만 노출 --> <span class="series-not-published">{{ post.title }}</span> {% elsif page.url == post.path %} <!-- 렌더링 포스트와 시리즈 포스트의 경로가 같은 경우 제목만 노출 --> <span class="series-current">{{ post.title }}</span> {% else %} <!-- 그 외의 경우에는 링크 설정 --> <a href="{{ post.path }}">{{ post.title }}</a> {% endif %} </div> </li> {% endfor %} </ol> </div> {% endif %} 적용 결과 적당히 CSS까지 적용한 후에 series 속성이 있는 글에 표시되는 시리즈 목록은 아래와 같이 나타난다. Java Annotation in Action 시리즈 애너테이션 소개 애너테이션 작성 리플렉션을 이용한 런타임 애너테이션 처리 - 필드편 리플렉션을 이용한 런타임 애너테이션 처리 - 메서드편 프록시를 이용한 애너테이션 처리 @Autowired 따라잡기 Netflix Feign 따라잡기 Bean에 환경변수 설정하기 컴파일 타임 애너테이션 처리 부록 Post 레이아웃에 적용한대로 현재 글, 다른 글, 발행되지 않은 글에 따라 다르게 적용이 되었고, 글 내용 자체에 포함이 되지 않으므로 발췌(excerpt)에도 포함되지 않는다. 아쉬운 부분 데이터 파일을 이용해 간단하고 빠르게 시리즈를 적용할 수 있었지만, 어쨌든 글과 시리즈 데이터 파일을 따로 관리해야 한다는 불편함이 있다. GitHub에서 Jekyll을 호스팅 할 때 커스텀 플러그인 적용이 어렵지만 회피할 수 있는 방법이 있으므로 Jekyll Hook을 활용해서 자동으로 시리즈를 적용할 수 있는 방법을 고려해 보아야 겠다.