Jekyll Now 페이징 기능 추가하기

미디엄 블로그에 있던 글도 옮기고,이것저것 하다보니 벌써 post가 쌓이고 있다. 개인적으로 유저의 입장에서 무한 스크롤을 별로 선호하지 않아 이참에 페이징 기능을 추가하기로 했다. 필요한 기능을 바로 배우고 적용하기 ! 😎

1. jekyll-pagination 플러그인 설치

gem install jekyll-paginate

2. _config.yml 파일 업데이트

maruzzing.github.io는 Jelly Now라는 theme을 사용하고 있기 때문에 Gemfile을 수정하거나, bundle 업데이트를 할 필요는 없지만, 다른 theme을 사용하고 있거나, theme 없이 처음부터 만들었다면, 공식문서를 참고하여 플러그인을 설치해야 한다.

_config.yml 파일 내, gems부분에 jekyll-pagination를 추가하고, 한 페이지 당 표시하고자 하는 포스트의 최대 개수, 그리고 url 규칙을 추가해 준다.

gems:
  - jekyll-pagination #추가

paginate: 10 # 한 페이지 당 표시하고자 하는 포스트의 최대 개수
paginate_path: "/page:num/" # URL 규칙

3. 페이징된 포스트 렌더링 하기

index.html 파일 내, 포스트 렌더링 하는 부분을 고쳐보자.

현재 for 반복문 내, site.posts를 paginator.posts로 고치면 된다.

 {% for post in paginator.posts %} {% endfor %} 

그럼 이제 _config.yml에 설정한 갯수 만큼의 포스트만 렌더 될 것이다.

4. 페이징된 버튼 만들기

Jekyll 공식문서의 Pagination 파트를 보면, paginator.total_posts라는 변수를 사용하여 전체 페이지수를 알 수 있으며, paginator.page 로 현재 페이지의 페이지 number를 알 수 있다.
이를 이용하여 1 부터 paginator.total_posts 까지 숫자 버튼을 렌더하고, 현재 페이지와, 번호가 같은 경우 class 명을 ‘active’로 주어 현재 페이지를 표시 해 보겠다.

<!-- Pagination links -->
<div class="pagination">
   {% assign maxPageNum = paginator.total_pages %} {% assign class
  ='unactive' %} {% assign currentPage = paginator.page %} {% for i in
  (1..maxPageNum)%} {% if currentPage == i %} {% assign class = 'active' %}{%
  else %}{% assign class = 'unactive' %} {% endif %} {% if i == 1 %}
  <span class="pageNum {{ class }}">
    <a href="{{ site.baseurl }}/">{{ i }}</a></span
  >
  {% else %}
  <span class="pageNum {{ class }}">
    <a href="{{ site.baseurl }}/page{{ i }}/">{{ i }}</a></span
  >
  {% endif %} {% endfor %}
</div>

이제 입맛에 맞게 css를 꾸미면 완성 !