blogger

blogger - 블로거에 페이지네이션을 추가하는 방법

10월 07, 2023

블로거의 표준 페이징은 이전/최신 또는 이전/다음 탐색 기능을 사용하여 블로그 페이지를 페이지별로 탐색할 수 있습니다.

여기서는 이전/다음 페이지를 숫자가 매겨진 페이지 매김을 추가하는 방법을 설명하는 것이며, 이전/최신 페이지 매김을 사용자가 페이지를 이동할 수 있는 숫자 탐색으로 대체합니다.

블로거의 제한 사항으로 인해 아래 2단계의 js 는 테마 코드 내에 직접 삽입하여야 합니다. 이 작업을 진행하기 전에 먼저 블로거 템플릿을 백업하는 것이 좋습니다.


1. 페이징 스타일 지정

먼저 CSS에 스타일을 추가하겠습니다. 이렇게 하려면 “테마” > “HTML 편집“으로 이동하여 ”]]></b:skin>“ 태그 바로 위에 아래 코드를 붙여 넣습니다.

/* Start Pagination */
#blog-pager, .blog-pager {
  display:block;
  padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 2px;
  background: #ffffff;
  color: #333;
  border: 1px solid #f2f2f2;
  font-size: 12px;
  border-radius: 2px;
  transition: all .3s;
}
.showpage a:hover, .pagenumber a:hover, .current {
  background: #333333;
  color: #ffffff;
  text-decoration:none;
}
/* End  Pagination */

위의 CSS를 편집하여 페이지 매김 모양을 사용자 정의하고 블로그 디자인에 맞게 만들 수 있습니다. 원하는 대로 스타일을 지정할 수 있지만 색상을 변경하고 패딩 공간을 조정하고 자신만의 글꼴을 추가하여 꾸밀 수 있습니다.


2. 페이지 매김 기능 추가

이제 JavaScript를 추가하여 기본 이전/최신 탐색을 인덱스 페이지의 숫자 페이지 매김으로 전환할 수 있습니다.

다시 “테마” > “HTML 편집”으로 이동하여 “</body>” 태그 바로 위에 아래 코드를 붙여넣기합니다.

<b:if cond='data:blog.pageType == "index"'>
<!-- Start Pagination -->
<script type='text/javascript'> //<![CDATA[ /** WRITTEN BY XOMISSE.COM **/
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
<!-- End Pagination -->
</b:if>

위 코드에서 postperpage 변수는 각 페이지에 표시될 게시물 수로 값을 변경합니다. 이는 설정 > 게시물, 댓글 및 공유 설정 > 게시물 > 최대 표시에서 선택한 수와 일치해야 합니다. 예를 들어 “설정” > “기본 페이지의 최대 게시물 수”를 5로 설정했다면 postperpage 값도 5가 되어야 합니다.

numshowpage 변수는 번호가 매겨진 페이지 탐색에 표시할 페이지 수로 값을 변경합니다.

원한다면 prevpage 과 nextpage 값을 표시하려는 텍스트로 변경할 수도 있습니다.

적절하게 수정했다면 페이징이 원하는 모양과 숫자로 표시되는지 확인합니다.


출처: https://xomisse.com/blog/how-to-add-numbered-pagination-to-blogger/

Tag:

0 Comments

0 댓글