[Github Blog] 같은 카테고리 내 이전글, 다음글 이동

기본 상태

Chirpy 테마의 포스트 아래쪽의 기본 이전글, 다음글은 카테고리 상관없이 전체 글에서 시간 순으로 이전글, 다음글을 보여주고 있다. 별 건 아니지만, 같은 카테고리 내에서 이전글, 다음글로 이동하면 좋을 것 같아서 구현해보았다.

구현 방법

how-to-link-to-next-and-previous-posts-for-same-blog-category를 참고하여 구현했다.

Chirpy 테마에서는 _includes/post-nav.html 파일이 포스트 아래쪽의 Navigation Button을 담당하고 있다.

📄post-nav.html

{% assign cat = page.categories[1] %}
{% assign cat_list = site.categories[cat] %}
{% for post in cat_list %}
  {% if post.url == page.url %}
  	{% assign prevIndex = forloop.index0 | minus: 1 %}
  	{% assign nextIndex = forloop.index0 | plus: 1 %}
  	{% if forloop.first == false %}
  	  {% assign next_post = cat_list[prevIndex] %}
  	{% endif %}
  	{% if forloop.last == false %}
  	  {% assign prev_post = cat_list[nextIndex] %}
  	{% endif %}
  	{% break %}
  {% endif %}
{% endfor %}

<div class="post-navigation d-flex justify-content-between">
  {% if prev_post %}
  <a href="{{ site.baseurl }}{{ prev_post.url }}" class="btn btn-outline-primary"
    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
    <p>{{ prev_post.title }}</p>
  </a>
  {% else %}
  <div class="btn btn-outline-primary disabled"
    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
    <p>-</p>
  </div>
  {% endif %}

  {% if next_post %}
  <a href="{{ site.baseurl }}{{next_post.url}}" class="btn btn-outline-primary"
    prompt="{{ site.data.locales[site.lang].post.button.next }}">
    <p>{{ next_post.title }}</p>
  </a>
  {% else %}
  <div class="btn btn-outline-primary disabled"
    prompt="{{ site.data.locales[site.lang].post.button.next }}">
    <p>-</p>
  </div>
  {% endif %}

</div>

post-nav.html에 기존 코드를 지우고 위의 코드를 작성해주면 된다. (혹시 모르니 원본 코드는 주석을 해놓는게 좋을 듯..?)

첫 번째 문단에서 prev, next 페이지를 찾고, 아래에서는 url을 전달해주는 것이 전부이다.

나는 Jekyll 문법을 몰라서 정확히는 모르지만 코드를 대충 해석해보면, 위의 문단에서는 해당 페이지의 카테고리안에서 prev_post, next_post를 찾는 역할을 한다. Chirpy 테마에서는 category에 두 개의 값을 넣으면 상위, 하위 카테고리로 보여주기 때문에, page.categories[1] 를 통해 직접적인 category인 두 번째 카테고리를 불러오면 된다. (page.categories[0]으로 하면 Chirpy 테마 기준으로는 상위 카테고리에 포함되는 모든 포스트로 잡힌다.) page는 ‘현재의 포스트’를 의미 한다고 한다. 그래서 아래 반복문 코드를 돌면서 현재 페이지의 url을 찾고 그 url의 앞, 뒤를 prev_post, next_post에 담아준다.

두 번째 문단에서는 원본 post-nav.html 에서 page.previous과 page.next을 새로 변수로 할당한 prev_post와 next_post로 변경해준 것이 끝이다.

버튼 이름 변경

기본 영어 세팅에서 포스트 아래 Navigation button에 OLDER, NEWER로 되어 있었는데, PREV와 NEXT로 변경했다. 해당 셋팅은 _data/_locales/en.yml 에서 변경할 수 있다. 해당 파일의 post > button 부분의 next : 와 previous : 에 원하는 글을 넣어주면 된다. 눈치 챘겠지만, _data/locales 에 있는 yml 파일들은 각 언어별 명칭 세팅 파일들이다.