[Median UI] Chia bài viết thành nhiều trang

Fitur Split Post Untuk Membagi Postingan Menjadi Beberapa Halaman
Source: jagodesain.com

Một cách khác bạn có thể chia sẻ bài viết của mình là sử dụng Chia bài (Split post). Cũng giống như các tính năng trên wordpress, các blog lớn như standee ... cũng sử dụng tính năng này

Lợi ích của việc sử dụng các bài viết chia nhỏ là lượt xem trang của các bài viết cao hơn, số lượt hiển thị quảng cáo cũng ngày càng nhiều hơn. Hạn chế của tính năng này là nó không thể được sử dụng trên các Blog AMP, cũng như mã javascript sử dụng document.write() không được Google Pagespeed và Lighthouse khuyên dùng. Một nhược điểm nữa là tính năng này không cung cấp nút toàn trang như trong wordpress nên người dùng không thể đọc trực tiếp toàn bộ bài viết

Nếu bài viết bạn đang làm quá dài, bạn nên sử dụng tính năng này để chia sẻ nó mà không cần tạo bài viết tiếp theo (phần 2) của nó.

Thủ tục

Nếu như trước khi chia bài viết với chức năng các tab thì lần này với các nút điều hướng được đánh số tùy theo số lượng chia trang mà bạn thực hiện. Khách truy cập có thể chọn chuyển đến bất kỳ trang nào họ muốn, chỉ là không có nút 'Tất cả các trang' có chức năng tải toàn bộ một bài báo dài.

Mã mẫu cho bài đăng nhiều phần trông giống như sau:

<div id='post-split'>

 <!-- Điền vào nội dung của bạn ở đây -- >
      
</div>

Để chia sẻ bài viết, hãy thêm mã <!--nextpage--> trong phần bạn muốn được chia bài viết không giới hạn có thể từ 3 trang trở lên tùy thuộc vào số lượng mã <!--nextpage--> mà bạn nhập.

Hướng dẫn và Xem trước

Ví dụ, nếu bạn muốn chia một bài báo thành 3 trang, mã phải được viết như sau:

<div id='post-split'>
  Nội dung trang đầu tiên

  <!--nextpage>
  Nội dung trang thứ hai

  <!--nextpage>
  Nội dung trang thứ hai

  // và như vậy không giới hạn ở một vài trang
      
</div>

Gói mẫu đã cung cấp một mẫu cho bài viết chia bài cùng với javascript, tất cả những gì bạn cần làm là thêm bài viết của mình vào phần được đánh dấu trong mẫu. Bạn có thể xem bản xem trước trực tiếp trong bài viết này.

Nếu mẫu Median UI của bạn chưa có tính năng này hãy thêm mã Javascript sau trước </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, 'post-split').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('post-split').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('post-split').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>