سكربت تقسيم المحتوى وإضافة ترقيم

مدونة عبدو تكنولوجي تعود إليكم مجددًا بموضوع جديد. في هذا الدرس، سنتناول طرق مبتكرة لتجعل محتواك أكثر تنظيمً  وفعّالة تستهدف تحسين تجربة قراءة مستخدمي موقعك مما يتيح للقرّاء تصفح المحتوى بسهولة وسلاسة. لا داعي للقلق إذا كنت تعتقد أن هذا يتطلب مهارات برمجية عالية، فالسكربت الذي سنتحدث عنه يمكن تنفيذه بسهولة حتى لمن ليس لديه خلفية برمجية. سنقدم لكم خطوات واضحة وبسيطة لتطبيق هذه التقنية على موقعك بخطوات قليلة.

ضع الكود التالي فوق ال </head

<b:if cond='data:view.isSingleItem'>
<style type='text/css'>
/*<![CDATA[*/ 
.page-navig {--navig-bg : #fff;--navig-color : #000;display: none;margin: 30px 0 10px 0;align-items: center;width: 100%}
.page-navig #page-number,.page-navig a{background:var(--navig-color);display:flex}.page-navig.is-active{display:flex}.page-navig #page-number{margin:0 auto;font-size:18px;padding:4px 13px;color:var(--navig-bg);border-radius:5px;width:30px;height:30px;line-height:24px;justify-content:center}.page-navig a{padding:10px 25px;border-radius:4px;border:none;outline:0;cursor:pointer;text-transform:uppercase;margin-top:0;font-family:inherit;width:fit-content;align-items:center}.page-navig a svg{width:30px;height:30px}.page-navig a:hover{background:var(--navig-bg)}.page-navig a span{color:var(--navig-bg)}.page-navig a:hover span{color:var(--navig-color)}
/*]]>*/        
</style> 
</b:if>

ضع الكود التالي فوق ال </body

<b:if cond='data:view.isSingleItem'>
<script type='text/javascript'>
//<![CDATA[
let splitWord = "_split";
document.addEventListener("DOMContentLoaded",function(){var e=function(e){for(var t=decodeURIComponent(window.location.search.substring(1)).split("&"),r=0;r<t.length;r++){var n=t[r].split("=");if(n[0]===e)return void 0===n[1]?void 0:n[1]}}("page"),t=document.querySelector(".page-navig"),r=document.querySelector(".page-navig .next"),n=document.querySelector(".page-navig .prev"),i=document.querySelector(".post-body:not(#content-page)"),a=document.querySelector("#content-page"),o=document.querySelector("#page-number");if(i){var l=i.innerHTML.split(splitWord);if(i.remove(),void 0===e||1==e)n&&(n.style.display="none"),r&&r.querySelector("a").setAttribute("href","?page=2"),a&&(a.innerHTML=l[0]),o&&(o.innerHTML="1");else{e=parseInt(e),l.length<=e&&r&&(r.style.display="none");var s=e+1,p=e-1;r&&r.querySelector("a").setAttribute("href","?page="+s),n&&n.querySelector("a").setAttribute("href","?page="+p),a&&(a.innerHTML=l[p]),o&&(o.innerHTML=e.toString())}i.innerHTML.includes(splitWord)&&t&&t.classList.add("is-active")}});
//]]>
</script>
</b:if>

إبحث على

<b:include data='post' name='postBody'/>

ضع الكود التالي اسفله

<div class='post-body' id='content-page' />
<div class='page-navig'>
	<div class='next'>
		<a aria-label='Next' href='javascript:;' rel='nofollow'><span>التالي</span>
		</a>
	</div>
	<div id='page-number' />
	<div class='prev'>
		<a aria-label='Previous' href='javascript:;' rel='nofollow'><span>السابق</span>
		</a>
	</div>
</div>