지금까지는 HTML을 이용해서 직접 카테고리를 개설하였다. 미디움 스럽게 하기위해서 이미지 중심의 카테고리를 만든것인데 최근에 새로운 디자인의 카테고리를 개설하고 싶었다. 그래서 지킬의 카테고리라는 기능에 대해서 좀 더 알아야 했다. 지킬에서 카테고리는 대부분 다음과 같이 출력한다.

1
2
3
4
5
<ul>
{% for category in site.categories %}
    <li><a href="{{ site.baseurl }}/{{ category | first }}">{{ category | first }} ({{ category | last | size }})</a></li>
{% endfor %}
</ul>
  • 프로그래밍 (17)

  • site.categories라는 변수에 카테고리의 이름과 카테고리에 포함된 포스트와 포스트의 갯수를 알 수 있다 그것을 이용하여 만들어 진 것이 위 코드다.

    1
    
    {% for category in site.categories %}
    

    site.categories 변수는 바로 사용할 수는 없지만 원하는 정보를 빼기가 어렵기 때문에 위와같이 for문 안에서 사용한다.

    • {{ category first }} : 카테고리의 이름
    • {{ category last size }} : 카테고리 포스트의 갯수

    여튼 포스트의 이름과 갯수만 사용할 수 있으면 구상했던 디자인을 할 수 있을 것 같았다.

    1
    2
    3
    4
    5
    6
    
    <li stlye="font-size:{{ category | last | size }}px">
        <a href="{{ site.baseurl }}/{{ category | first }}">
        {{ category | first }}
        </a>
    </li>
    

    위와같이 카테고리의 수를 이용하여 폰트 사이즈를 지정하여 주었다. 그러나 링크를 표현하는데 한가지 문제가 있었다. 이 블로그의 일부 포스트의 카테고리는 ‘상위 카테고리’/’하위 카테고리’와 같이 되어있다.

    if문을 활용해서 해결할 순 있었지만 지금은 굉장히 주먹구구 식으로 구현된 상태다. 하지만 이 이상으로 해결할 수 있는 방법은 없어보인다. 여하지간 위에서는 {{ category | first }}와 같이 변수를 사용했지만 if문 내에서는 다르게 사용해야 했다.

    1
    2
    3
    4
    5
    
    {% if category[0] == "c" or category[0] == "qt" %}
        <a href="{{ site.baseurl }}/programing/{{ category | first }}">
        {{ category | first }}
        </a>
    {% endif %}
    

    위와같이 [0]번 배열로 카테고리의 이름을 알 수 있다. 물론 위와같이 구성하면 카테고리를 새로 개설했을때 자동으로 링크를 생성할 순 없지만… 적어도 스타일은 자동화 할 수 있다.

    대체이미지

    WRITTEN BY

    배진오

    하고싶은 건 다 하면서 사는게 목표
    im@baejino.com

    comments powered by Disqus