목차

  1. 최하위 카테고리에서만 글 목록 보이기
  2. 카테고리를 사이드바로 빼기
  3. 마치며

all-categories에서 leaf 카테고리 일때만 글 목록을 보여주고 싶은데요.
왠지 그런 옵션은 없는것 같아서 ejs 템플릿을 건드려보도록 하겠습니다.

이와같이 “개발”에 하위 카테고리들의 포스트가 중복되어 나오는게 맘에안듭니다.

최하위 카테고리에서만 글 목록 보이기

themes/tranquilpeak/layout/all-categories.ejs 를 열어봅시다.

all-categories.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function displayCategoriesAndPosts(category) {
    // get its posts
    var posts = category.posts;
    // ...
    // ...
    // create html for its posts
    posts.sort('date', 'desc').forEach(function(post) {
        /********** 이 부분을 추가합시다. ***********/
        if (childCategories.length > 0) {
          return;
        }
        /********** 여기까지요. *******************/
        
        
        html += '<li class="archive-post">';
        html += '<a class="archive-post-title" href="' + url_for(post.path) + '">';
        // ...
    });
    // ...
}

저 if 문이 핵심입니다. 의미를 잘 곱씹어보면 왜그런지 이해가 되실거에요.

1
2
3
4
5
6
단, 모든 글이 전부 최하위 카테고리에 있을때만 제대로 나타납니다. 예를들어
"개발 > 소소한 팁"   
이렇게 2개 구조의 카테고리에

"개발"            
만 달린 글을 쓰면 목록에서 안보입니다.


위 처럼 중간 카테고리에서는 글목록이 나타나지 않습니다.

카테고리를 사이드바로 빼기

위와는 상관이 없습니다만 문득 최상위 카테고리를 사이드바로 빼고 all-categories를 없애면 어떨까 하는 생각이 들었습니다. 그래서 약간의 개발을 해봤습니다. 위에 수정한 코드를 이용해도 되고 안해도 됩니다.

themes/tranquilpeak/layout/category-by-name.ejs 파일을 생성하고
all-categories.ejs의 내용을 붙여넣습니다.
그리고는 아래를 참고하여 수정합니다.

category-by-name.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 윗부분은 생략합니다. 대충 아래랑 비슷한 부분부터 시작해주세요. -->

<% var currentCategory =  url_for(path).split('/')[1].replace("category-", "") %>
<!-- categories-archives 위에 이 코드를 붙여넣읍시다. -->

<div id="categories-archives" class="main-content-wrap">
    <!-- 검색 기능 안쓸거라서 삭제했는데 넣으시려면 넣으세요 -->
    <h5 class="archive-result text-color-base text-xlarge"
        data-message-zero="<%= __('global.categories_found.zero') %>"
        data-message-one="<%= __('global.categories_found.one') %>"
        data-message-other="<%= __('global.categories_found.other') %>"></h5>

        <!-- 
            원래 site.categories.sort('name') 이라고 되어있는 부분을
            아래처럼 site.categories.find({'name': currentCategory}) 로 변경해줍니다.
        -->

        <section class="boxes">
        <% site.categories.find({'name': currentCategory}).sort('name').each(function(category) { %>
            <% if (!category.parent) { %>
                <%- displayCategories(category) %>
            <% } %>
        <% }); %>
    </section>
    <section class="boxes">
        <% site.categories.find({'name': currentCategory}).sort('name').each(function(category) { %>
            <% if (!category.parent) { %>
                    <%- displayCategoriesAndPosts(category) %>
            <% } %>
        <% }); %>
    </section>
</div>

저는 사이드바에 꺼낸 카테고리의 링크를 category-카테고리명으로 설정하려고 하는데요.
각 글 페이지에서 url_for(path) 를 호출하면 /category-카테고리명/index.html 이 됩니다.

var currentCategory = url_for(path).split('/')[1].replace("category-", "") 에서는
따라서 currentCategory 에는 카테고리명 만 남게됩니다.

이 값을 site.categories.find({'name': currentCategory}) 처럼 넣어 호출하면 찾아집니다.

그 후 프로젝트의 source 디렉토리에 page 디렉토리를 생성하면 되는데요.
category-카테고리명 형식으로 만들면 되겠습니다.
그 안에 ìndex.md를 생성하고 아래처럼 코드를 넣습니다.

1
2
3
4
5
---
title: "카테고리명"    
layout: "category-by-name"  # 위에서 생성한 ejs 파일명입니다.
comments: false
---

그 후 themes/tranquilpeak/_config.yml를 열어 메뉴를 편집합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ... 생략

sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: fa fa-home
# 전체 카테고리 안쓸거라 주석처리했습니다. 쓸거면 풀어주세요.            
#        categories:
#            title: global.categories
#            url: /all-categories
#            icon: fa fa-bookmark
        category-name:              # key 이름은 아무거나 써도 되나봅니다.
            title: 카테고리명          # 메뉴에 표시될 이름을 써주세요. 아니면 en.yml 등의 key를 명시해주세요.
            url: /category-카테고리명  # "category-카테고리명" 형태로 써주세요. 그래야 ejs에서 파싱합니다. 
            icon: fa fa-calendar    # 아이콘도 맘에드는걸로 ..
            
        # 후략 ...

이처럼 수정하고 재시작하면 카테고리가 사이드바로 빠져나와 있을것입니다.
메뉴에 표시되는 아이콘을 변경하고 싶으시면 fontawesome에서 찾은 클래스명을 icon에 넣어주면 되는데요. Font Awesome에서 쉽게 찾을 수 있습니다.

마치며

아직 부작용은 찾지 못했습니다만 무슨일이 생길진 좀 더 두고봐야겠습니다.
혹시 더 좋은 방법 아는분 계시면 알려주세요.