pagination 플러그인

2019-05-23

pagination 플러그인을 사용하여 jekyll 프로젝트에 페이지 기능을 추가해보자.

개요

jekyll은 기본적으로 pagination 플러그인을 제공하지만 우리는 jekyll-paginate-v2을 사용하고 있습니다. 이 블로그는 jekyll-paginate-v2의 사용법에 관해 설명합니다.

플러그인 설치 및 설정

jekyll-paginate-v2 플러그인을 설치하고 프로젝트에 설정합니다.

플러그인 설치

아래에 명령어로 jekyll-paginate-v2 플러그인을 설치합니다.

gem install jekyll-paginate-v2

플러그인 설정

아래에 설정 내용을 _config.yml 파일에 작성합니다.

plugins:
  - jekyll-paginate-v2

permalink: /:year/:month/
pagination:
  enabled: true
  per_page: 12
  sort_reverse: true
  sort_field: 'date'
  title: ':title'
  trail:
    before: 2
    after: 2
  • permalink: 페이지의 기본 링크입니다. 이 링크가 없으면 플러그인이 제대로 동작하지 않습니다.
  • pagination: 플러그인의 설정 옵션들입니다. 자세한 사항은 공식 사이트를 참고하세요.(jekyll-paginate-v2:options)
  • enabled: 플러그인을 활성화합니다.
  • per_page: 한 페이지에 표시할 갯수를 나타냅니다.
  • sort_reverse: 역정렬을 할지 여부를 나타냅니다. 우리는 최신순으로 표시하기 위해 true로 설정합니다.
  • sort_field: 정렬시 사용할 필드입니다. 우리는 최신순으로 표시하기 위해 date 필드를 이용합니다.
  • title: pagination으로 생성된 페이지의 제목을 나타냅니다. page.title변수에 할당될 값을 설정합니다.(ex> :title - page :num)
  • trail: 선택된 페이지에 앞/뒤에 몇 페이지를 표시할지 설정합니다.

페이지 설정

페이지에 pagination을 표시하기 위한 설정입니다. pagination을 가지고 있는 페이지와 해당 페이지에서 호출된 페이지안에 설정을 해야합니다.

pagination을 가지고 있는 페이지

pagination을 표시하기 위해 해당 pagination 기능이 필요한 페이지(ex> category 페이지)에 아래와 같이 설정합니다.

pagination:
  enabled: true
  category: 'jekyll'
  permalink: '/:num/
  • enabled: pagination 기능을 사용합니다.
  • category: 해당 카테고리의 포스트를 pagination합니다.
  • permalink: pagination 기능으로 생성된 페이지의 링크를 설정합니다.(ex> /:num/)

pagination 페이지에서 호출될 페이지

호출될 페이지(ex> post 페이지)에 아래와 같이 설정합니다.

paginate_path: '/jekyll/:num/pagination-plugin/'
  • paginate_path: pagination에 의해 호출될 때 페이지 번호를 링크에 포함하기 위한 설정입니다.

참고

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Buy me a coffeeBuy me a coffee
Posts