Advertisement

Tạo phân trang cho Median UI (Split post)

Minh CRISTIANO
tháng 10 30, 2021
Last Updated

Với những bài viết quá dài hoặc bạn muốn phân chia thành từng bài, từng mục. Ví dụ như 1 bài học gồm có 5 phần, 1 câu chuyện có 4 phần... Thì hãy sử dụng tính năng phân trang hay còn gọi là Split post.

Hãy chuyển qua trang 2 để lấy code nhé.

Tạo phân trang cho Median UI (Split post)

Có 1 lưu ý đó chính là các nội dung phải được nằm trong thẻ <div id='postSplit'>, các trang được phân với nhau bằng đoạn <!--nextpage-->. Ngoài ra các nội dung nằm ở bên ngoài thì sẽ lỗi không hoạt động nhé.


<div id='postSplit'>
Nội dung trang 1

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

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

<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.postBody').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'>Trang:</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>
Hết rồi, trang thứ 3 chỉ là demo thôi không có gì cả.

TrendingMore

Xem thêm