목차

  1. hexo-related-popular-posts
  2. 야매 커스터마이징
  3. 마치며

관련 글을 표시하기 위한 hexo-related-popular-posts가 있는데요.
단순히 태그 기반으로 관련 글을 보여주거나, Google Analytics를 연동해서 인기글, 방문자 카운터 등의 고급 기능도 지원합니다.
저는 가장 기본 기능인 태그 기반 관련글 기능만 사용하려고 합니다.
그러나 제가 이래저래 살펴봤지만 Tranquilpeak 테마가 이 라이브러리를 지원하지 않습니다.
그래서 야매로 커스터마이징을 해보았습니다.

위 문서를 참고하여 아래와 같이 설치합니다.

1
$ npm install hexo-related-popular-posts --save

야매 커스터마이징

themes/tranquilpeak/source/_css/components 이 디렉토리에서 새 파일을 생성할건데요.
저의 경우 _popular.scss로 지었습니다.

_popular.scss
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
33
34
35
36
37
38
39
.popular-posts {
    list-style: none;
    padding-inline-start: 3px;

    .popular-posts-item {
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        overflow: hidden;
            
        .popular-posts-title {
            display: inline;
            h3 {
                display: inline;
                a {
                    margin-left: 10px;
                    color: $font-color-base;
                    font: {
                        weight: 300;
                        size: map-get($font-size, base);
                    }

                }
            }

            &:hover {
                text-decoration: underline;
            }
        }

        // Change style of the list by adding font-awesome icon
        &::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 600;
            content:     '\f0da';
            font-size:   map-get($font-size, small);
        }
    }
}

_archive.scss를 참고해서 만들었습니다. Tranquilpeak 테마에서 지원을 안하는 관계로 css를 좀 억지로 만들 수 밖에 없었습니다.

다음은 themes/tranquilpeak/source/_css/tranquilpeak.scss을 엽니다.

tranquilpeak.scss
1
2
3
4
5
6
@import
    'components/alert',
    'components/archive',
    //...
    //...
    'components/popular';  // 위에서 생성한 것을 추가합니다.

@import 구문에 방금 생성한 파일을 추가합니다.

다음은 themes/tranquilpeak/layout/_partial/post.ejs를 엽니다.
위에서 추가한 스타일대로 관련 글 영역을 표시하려고 합니다.

post.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
<div id="post-footer" class="post-footer main-content-wrap">
    <% if ((post.tags) && (post.tags.length > 0)) { %>
        <div class="post-footer-tags">
            <span class="text-color-light text-small"><%= __('post.tagged_in') %></span><br/>
            <%- partial('post/tag', {tags: post.tags})%>
        </div>
    <% } %>

    <!-- 커스터마이징 해본 관련 글 영역-->
    <% var related = popular_posts( {} , post ); %>
    <% if (related && (related.length > 0)) { %>
        <div class="post-footer-tags">
            <span class="text-color-light text-small"><%= __('post.related') %></span><br/>
            <%- related %>
        </div>
    <% } %>
    <!-- 끝 -->

    <% if (post.actions === undefined || post.actions) { %>
        <%- partial('post/actions', {postContent: postContent}) %>
    <% } %>
    <% if (post.comments) { %>
        <% if (theme.disqus_shortname) { %>
            <%- partial('post/disqus') %>
        <% } else if (theme.gitment.enable) { %>
            <%- partial('post/gitment') %>
        <% } %>
    <% } %>
</div>

#post-footer를 찾습니다. 그리고 그 아래에 커스터마이징한것을 넣으면 됩니다.
물론 다른곳에 두고 싶으신 분들은 그러셔도 됩니다.
원래는 Customize HTML처럼 조작이 가능한것 같은데요.
Tranquilpeak 테마에서는 제대로 동작을 안합니다.

themes/tranquilpeak/languages/en.yml 을 열어 post 항목에 다음을 추가합니다.
물론 다른 언어팩을 쓰시는 분들은 수정하셔도 됩니다.
참고로 저의 경우는 ko.yml을 하나 더 만들어서 한국어로 만들었습니다.

en.yaml
1
2
3
4
5
post:
    no_title : "no title"
    # .....
    # 이렇게 related라고 하나 추가한다
    related: "Related posts"

적용했으면 themes/tranquilpeak에서 아래처럼 빌드합니다.

1
$ grunt build

이 후 hexo server 명령으로 결과물을 확인해주세요.

마치며

이 테마가 참 좋아서 고른건데 이것을 지원 안하는점이 매우 가슴이 아픕니다.
하지만 커스터마이징이 무궁무진한 프로젝트인것 만큼 야매로 처리해봐야겠습니다.
혹시 더 좋은 방법을 아시는 분은 알려주세요.