Home
Blogger
Features

구글 블로그 페이지 분할, 번호 매기기

Blogger 게시물 내에서 분할 포스트 기능을 추가하는 간단한 가이드
구글 블로그 페이지 분할, 번호 매기기

블로그에서 게시물의 내용이 매우 길 때 게시물 내에서 여러 페이지로 분할할 수 있습니다. 페이지 번호를 눌러 이전 페이지 또는 다음 페이지로 넘길 수 있습니다.

목차

페이지 나누고 번호 매기기

간단한 코드를 추가하기만 하면 게시물이 자동으로 여러 섹션으로 나뉩니다.

분할 포스트 스크립트 파일을 준비했습니다.

  1. Split Post.txt를 다운로드합니다.
  2. 텍스트 파일을 열어 기존 코드를 모두 복사합니다.
  3. Blogger 게시물 편집기에서 HTML 보기로 변경합니다.
  4. 이전에 복사한 모든 코드를 게시물에 붙여넣습니다.

전체 코드

<div id='postSplit'>
First page here...
  
<!--nextpage-->
Second page here...
  
<!--nextpage-->
Third page here...
</div> 

<style>
.blogPg{display:flex;flex-wrap:wrap;justify-content:center;position:relative;font-size:13px;line-height:20px;color:#fffdfc;margin:30px 0 40px;max-width:100%}
.blogPg >*{display:flex;align-items:center;padding:8px 15px;margin:0 4px 8px; color:inherit;background:#000000;border-radius:3px}
.blogPg .current{background:#e6e6e6;color:#000000}
.blogPg .page{min-height:0}
</style>

<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.post-body').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); 
/*]]>*/</script>
Demo Download

1. CSS

Blogger 대시보드 > 테마 > HTML 편집에서 ]]></b:skin> 또는 </style> 코드 위에 아래의 CSS 코드를 붙여넣기 후 배치합니다. CSS를 추가하는 방법을 참고하세요. 

.blogPg{display:flex;flex-wrap:wrap;justify-content:center;position:relative;font-size:13px;line-height:20px;color:#fffdfc;margin:30px 0 40px;max-width:100%}
.blogPg >*{display:flex;align-items:center;padding:8px 15px;margin:0 4px 8px; color:inherit;background:#000000;border-radius:3px}
.blogPg .current{background:#e6e6e6;color:#000000}
.blogPg .page{min-height:0}

2. JAVASCRIPT

HTML 편집 페이지 맨 밑의 </body> 코드 위에 아래의 자바스크립트 코드를 붙여넣기 후 배치합니다. 

<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.post-body').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); 
/*]]>*/</script>

3. HTML

게시물을 HTML 편집 모드에서 작성합니다. 게시글이 시작되는 부분에 <div id='postSplit'> 코드를 추가하십시오. 게시물의 끝 부분에서는 </div>로 태그를 닫아줍니다.

전체적인 틀은 아래와 같습니다. 

<div id='postSplit'>
// 여기에 글 내용을 작성하시면 됩니다 👋
</div>

그 다음 특정 페이지 섹션이 필요한 경우 안쪽의 본문 글 사이에 <!--nextpage-->를 삽입합니다. 삽입하지 않는 경우 페이지가 분할되지 않습니다.

그 이유는 <!--nextpage-->을 기준으로 다음 페이지로 넘어가기 때문입니다. 

<div id='postSplit'>
// 첫번째 페이지 👋
<!--nextpage-->
// 두번째 페이지 👋
<!--nextpage-->
// 세번째 페이지 👋
</div>

게시물이 게시되기 전에 우측 상단의 미리보기를 클릭하여 기능이 잘 작동하는지 확인하십시오. 코드가 올바르면 페이지 분할이 자동으로 작동하지만, 코드가 올바르지 않다면 페이지 본문이 그대로 쭉 나옵니다. 도움이 되었기를 바랍니다.

참고 :
이 방법은 방문자가 다음 페이지를 클릭하여 읽지 않고 그냥 지나갈 수도 있고, 또한 전체 페이지가 로드될 때까지 시간이 걸리기 때문에 검색 엔진 최적화(SEO)에는 좋지 않습니다. 저는 개인적으로 이 기능을 사용하는 것을 좋아하지는 않습니다.

Post a Comment