Phân Trang Trong Bài Viết Giống Wordpress Dành Cho Blogger

Một trong những tính năng khác của mẫu này mà bạn đáng để thử là chia nhỏ bài viết như trong wordpress, tính năng này được các blog lớn sử dụng rộng rãi, gọi nó là tribune, v.v.

Tính năng này tự động chia một bài đăng thành nhiều trang. Cách thức hoạt động khá đơn giản, người dùng chỉ cần nhấn nút đánh số trang là có thể đọc được phần còn lại của bài viết.

Cách sử dụng tính năng này khá dễ dàng, bạn chỉ cần thêm một vài thẻ vào bài viết mà bạn tạo, bài viết sẽ tự động được chia thành nhiều phần.

DEMO

Nó sẽ nằm ở cuối bài đăng này

HƯỠNG DẪN

Chèn mã CSS này vào trong thẻ ]]></b:skin>


.post-pagenav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:20px 0 40px;font-size:13px;font-family:'Nunito Sans', sans-serif;line-height:normal}
.post-pagenav > *{background:rgba(255,255,255,.98);padding:9px 14px;margin-left:10px;border-radius:6px;color:#161617;box-shadow:0 4px 12px 0 rgba(9,32,76,.05)}
.post-pagenav .current{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,0.54);cursor:not-allowed;box-shadow:none}
.post-pagenav .page.current{margin:0;cursor:default;}

Sau đó chèn mã Javascript này lên trên thẻ đóng </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='post-pagenav post-clearfix' id='post-pager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('post-pager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('post-pager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('post-pager').innerHTML += "<a href='"+url+"?page="+i+"' rel='nofollow' title='Page "+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('post-pager').innerHTML += "<a href='"+url+"?page="+nn+"' rel='nofollow' title='Next Page'>Next</a>";} }); /*]]>*/</script>

HƯỠNG DẪN SỬ DỤNG TRƯỚC KHI DÙNG

Trước hết, hãy tạo bài viết ở chế độ Trình chỉnh sửa HTML , tính năng này không thể được kích hoạt nếu bạn tạo bài viết ở chế độ Soạn.

Thêm mã <div id='postsplit'> ở đầu bài viết và thêm mã </div> ở cuối bài. hiển thị mã như dưới đây:


<div id='postsplit'>
// Nội dung bài viết
</div>

Tiếp theo bạn thêm đoạn  vào nơi cần phần trang cụ thể


<div id='postsplit'>
// Nội dung 1

<!--nextpage-->
// Nội dung 2

<!--nextpage-->
// Nội dung 3

</div>

Trước khi bài viết được xuất bản, vui lòng nhấp vào xem trước để xem tính năng này có hoạt động hay không, nếu đúng mã thì tính năng này sẽ tự động hoạt động như trong ví dụ của bài đăng này.

Lưu ý: Cần lưu ý rằng phương pháp này thực tế không tốt cho SEO vì nó khiến người dùng khó click vào trang để đọc bài tiếp theo, chưa kể việc phải chờ tải blog mà nhiều khi tải chán. Cá nhân tác giả không thích sử dụng tính năng này, ví dụ như Blog Tribune cắt các bài viết ngắn thành nhiều trang, khiến tác giả rất lười đọc các bài viết từ blog.

Lời khuyên của tác giả để làm cho nội dung / bài viết đơn giản nhưng nặng nề để người dùng thoải mái hơn, nếu bài viết thực sự dài thì bạn sẽ sử dụng tính năng này.