지킬 블로그에 페이지 구분 기능(pagination) 추가하기

지킬 블로그에 페이지 구분 기능(pagination) 추가하기

Summary:

지킬 블로그 포스팅들을 그룹화할 수 있는 페이지네이션 기능을 추가했습니다.


pagination?

포스팅이 쌓여갈수록 페이지 수 구분이 필요했다. 오래된 게시물을 읽기 위해서 스크롤을 내려야 하는 정도가 많아지자 불편했다.

pic1

pagination 설정을 하면 포스팅을 n개 단위로 구분하여 한 페이지에 적절한 갯수의 게시물들을 보여준다. 대부분 지킬 템플릿이 html 코드에 주석으로 페이지 구분하는 방법을 설명해주고 있고 혹여 이게 없더라도 간단한 구글링으로 설정이 가능하다.


원하는 게시물 노출량 설정 및 저장

지킬 블로그 루트 폴더에 _config.yml이 있을 것이다. 여기에 아래 코드를 추가한다. 나는 한 페이지 당 10개 글을 보여주고 싶어서 10개로 두었다. paginate_path: 를 저렇게 두면 나중에 페이지 구분이 생겼을 때 각 페이지 덩어리 구분을 /1, /2, 형태가 된다.

paginate: 10
paginate_path: "blog/:num/"

pagination.html 손보기

‘_includes’ 폴더 내에 있는 ‘pagination.html’ 에 아래 코드를 넣는다. 원하는 결과에 따라 코드는 수정 가능하다.

<div class="pagination">

<span class="previous hidden">«</span>


<span class="page_number ">page of </span>


<span class="next hidden">»</span>

</div>

pagination.scss 손보기

정보는 다 넣어놨으니 이젠 예쁘게 만들기만 하면 된다. ‘_sass’>’components’ 폴더 내에 있는 ‘pagination.sass’ 파일 안에 스타일 속성을 추가하거나 수정한다.

.pagination
width: 95%
margin: 3rem auto 0
text-align: center

> .page_number
display: inline-block
font-size: 1.3rem

> .previous,
> .next
display: inline-block
font-size: 1.8rem
position: relative
top: 1px
padding: 1px 9px

> .hidden
visibility: hidden

결과 확인하기

pic2

페이지네이션이 적용됐다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora