[ Tistory ] 페이지네이션 만들기

WebProgram/Tistory

[ Tistory ] 페이지네이션 만들기

Total Fix! 2016. 3. 28. 22:23

티스토리 페이지네이션 만들기입니다.

Font Awesome, jQuery를 이용하였지만 페이지 번호를 고치는 과정을 생략시에는 Javascript는 필요하지 않습니다.

특징

데스크탑일 경우 기존과 동일한 구성을 가지고 있다.

태블릿 이하일 경우 "이전 페이지", "현재 페이지 번호", "다음 페이지" 형식으로 바뀐다.

HTML

<div class="pagination">
    <s_paging>
        <a  class="" title="이전 페이지">
            <span class="prev">
                <i class="fa fa-hand-o-left"></i> Prev
            </span>
        </a>
        <span class="numbox">
            <s_paging_rep>
                <a  class="num">
                    
                </a>
            </s_paging_rep>
        </span>
        <a  class="" title="다음 페이지">
            <span class="next">
                Next <i class="fa fa-hand-o-right"></i>
            </span>
        </a>
    </s_paging>
</div>

CSS

/* 페이지 네이션 설정 */
.pagination {
    text-align: center;
    margin: 1.5rem auto;
    display:block;
}
.pagination > a > span,
.pagination > .numbox span { 
    -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    display: inline-block;
    padding: 1rem 1.5rem;
    color: rgba(68, 157, 68, 1);
    box-shadow: rgba(68, 157, 68, 0.6) 0 0px 0px 2px inset;
}
.pagination > a:hover > span,
.pagination > .numbox a:hover span {
    color: rgba(255, 255, 255, 0.85);
    box-shadow: rgba(68, 157, 68, 0.7) 0 0px 0px 40px inset;
}
.pagination > a.no-more-next > span,
.pagination > a.no-more-prev > span {
    color: rgba(255, 255, 255, 0.85);
    box-shadow: rgba(68, 157, 68, 0.7) 0 0px 0px 40px inset;
    cursor: default;
}
.pagination > .numbox > a > span.selected,
.pagination > .numbox > a:hover > span.selected {
    cursor: default;
    color: rgba(255, 255, 255, 1);
    box-shadow: rgba(68, 157, 68, 1) 0 0px 0px 40px inset;
}
.pagination > .numbox span.interword { 
    cursor: default;
    visibility: hidden;
}
.pagination > .numbox span.interword { 
    font-family: "FontAwesome";
    visibility: visible;
    content: '\f141';
}
/* 페이지 네이션 테블릿 이하 설정 */
@media screen and (min-width: 768px) and (max-width: 991px) { 
    .pagination > .numbox > a > span,
    .pagination > .numbox > span    {
        display: none;
    }
    .pagination > .numbox > a > span.selected {
        display: inline-block;
        padding: 1rem 2.5rem;
    }
    .pagination > a > span {
        padding: 1rem 3rem;
    }

}
/* 페이지 네이션 모바일 이하 설정 */
@media screen and (max-width: 767px) { 
    .pagination > .numbox > a > span,
    .pagination > .numbox > span    {
        display: none;
    }
    .pagination > .numbox > a > span.selected {
        display: inline-block;
        padding: 1rem 1.5rem;
    }
    .pagination > a > span {
        padding: 1rem 2rem;
    }
}

다음페이지 번호 설정하는 이유

블로그 주소로 접속시 "페이지 네이션"의 링크 주소는 /?page=2 의 형식으로 설정되어 있어 페이지 네이션으로 다음페이지로 이동시 페이지 타이틀이 [사이트 이름 :: 사이트 이름 (num Page)] 형식으로 표현된다.

이는 사이트 통계 서비스들에서도 사이트 제목이 아닌 /?page=2 형식으로 표시되어 정확하게 어떤 페이지에 접속했는지 알수 없다.

실제 /?page=2는 가상 페이지 번호로 페이지가 늘어나면 바뀌게 되어 특정한 페이지를 표시하는 것이 아니다.

선결사항

이 스크립트는 최신글 목록(사이드바)에서 페이지 번호를 추출하는 방식으로 최근글 목록 사이드바가 필수 이다.

Javascript

// 다음글 번호 불러오기 (최근글 목록 사이드바에서 추출)
// http://slic.tistory.com/ 주소로 접속시 실행
if (location.pathname == '/' && location.search == '') {
    for (var i=1; i < 5; i++) {
        // 최신글 i번째 li의 자식인 a 태그에서 href 주소를 뽑아온다. (eq 함수는 0부터 시작 하므로 다음페이지는 1부터 시작한다.)
        var next_page_num = $('.recentPost li').eq(i).children('a').attr('href');
        // 페이지네이션의 주소를 바꾸어준다. (현재 페이지를 뺀 2~5번까지의 페이지 주소를 바꾸어 준다.)
        $('.pagination > .numbox > a').eq(i).attr('href', next_page_num);
        // 다음페이지 인경우 다음페이지 버튼의 주소도 바꾸어 준다.
        if (i === 1) { $('.pagination > a').eq(i).attr('href', next_page_num); }
    }
}