pagination 플러그인

2023-10-16 hit count image

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에 의해 호출될 때 페이지 번호를 링크에 포함하기 위한 설정입니다.

참고

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts