블로그 글 관리하기

16 Oct 2017
 jekyll  Archive

Jekyll에 Tag시스템 & Archive 시스템 적용하기


블로그 글들을 관리하는 시스템이 카테고리 기능밖에 없어서 검색을 좀 해보았다.
(참고로 이 블로그는 Hydeout테마 이다.)
그중에 마음에 드는기능 2가지!

  • 태그시스템
  • 아카이브 시스템

태그를 적용하면 내가 작성한 글들을 자동으로 카테고라이징 해줘서 편하다.
방문자가 포스트를 찾아보기 편하게 Tag 페이지를 새로 만들기로 했다.

Tags.md


태그 페이지를 만들고 적용하는방법은 여기를 참고하였다.

다음과같은 파일을 작성하여 root 디렉토리에 넣어준다.

---
layout: page
sidebar_link: true
title: Tags
---

<div id="archives">
{% for tag in site.tags %}
  <div class="archive-group">
    {% capture tag_name %}{{ tag | first }}{% endcapture %}
    <h3 id="#{{ tag_name | slugize }}">{{ tag_name }}</h3>
    <a name="{{ tag_name | slugize }}"></a>
    {% for post in site.tags[tag_name] %}
    <article class="archive-item">
      <h4><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h4>
    </article>
    {% endfor %}
  </div>
{% endfor %}
</div>

Archive


태그시스템 만으로는 뭔가 2% 부족하기때문에 전체글을 볼수있는 페이지도 추가한다. Archive 시스템은 여기를 참고한다.

참고 페이지에서 포스트들을 표시하는방법에 %Y 를 %Y %M으로 바꿔 포스트들이 월별로 분류되도록 수정했다.

다음과같은 파일을 작성하여 똑같이 root 디렉토리에 넣어준다.

---
layout: page
title: Arhive
sidebar_link: true
---

<section class="archive-post-list">

   {% for post in site.posts %}
       {% assign currentDate = post.date | date: "%Y.%m" %}
       {% if currentDate != myDate %}
           {% unless forloop.first %}</ul>{% endunless %}
           <h1>{{ currentDate }}</h1>
           <ul>
           {% assign myDate = currentDate %}
       {% endif %}
       <li><a href="{{ post.url }}"><span>{{ post.date | date: "%m. %-d" }}</span> - {{ post.title }}</a></li>
       {% if forloop.last %}</ul>{% endif %}
   {% endfor %}

</section>

위의 코드에서 중간에 </ul>태그가 보인다.
이상하게 닫는태그가 먼저 나오는데 걱정할 필요 없다. unless forloop.first라는 문법 때문에 첫번째 리스트이면 실행되지 않기 때문이다.
비슷한 이유로 마지막에 </ul>태그가 한번 더 나오는 것이 설명된다.

여기까지 성공했다면 블로그 페이지의 사이드바에 Tags와 Archive 링크가 추가되었을 것이다.

Popular Posts