كيفية إضافة ميزة "جدول المحتويات" التلقائي في بلوجر

    <style>.hidden{display:none}.jistwebtocI:checked~.jistwebtocL{right:0;z-index:9999}.jistwebtocI:checked~.jistwebtocL .jistwebtocC{opacity:0;visibility:hidden}.jistwebtocI:checked~.jistwebtocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible}@media screen and (min-width:768px){.jistwebtocC{top:40px}}.fCls{display:block;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;z-index:1;transition:all .1s ease;background:0 0;opacity:0;visibility:hidden}.jistwebtocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:all .1s ease;z-index:9999}.jistwebtocLi{width:100%;height:100%;position:relative;background:#fff;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px}.jistwebtocLs{position:relative;top:20px;background:inherit}.fixH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2}.jistwebtocC{position:absolute;left:-45px;top:105px;transition:all .1s ease}.jistwebtocC span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:15px 0 0 15px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.1);transition:inherit;z-index:1}.jistwebtocC span svg{opacity:.95;width:22px;height:22px}.jistwebtocT{display:flex;width:100%}.fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7;font-family:inherit}.fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px}.jistwebtocIn{padding:50px 0 0;overflow-y:auto;width:100%;height:calc(100vh - 60px)}.jistwebtocIn ol{list-style:none;padding:0;margin:0;line-height:1.5em}.jistwebtocIn li:not(:last-child),.jistwebtocIn ol ol{margin-bottom:5px}.jistwebtocIn li a{flex:1 0 calc(100% - 23px)}.jistwebtocIn a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none}.jistwebtoc-list{width:100%;position:relative;box-shadow:2px 0 0 0 rgba(0,0,0,.1) inset}.jistwebtoc-list.is-collapsible .jistwebtoc-link{padding-left:2.25rem}.jistwebtoc-list.is-collapsed{display:none}.jistwebtoc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s}.jistwebtoc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset}.docs-jistwebtoc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent}ul.jistwebtoc-list li:before{all:unset}.jistwebtocIn ul{all:unset}.jistwebtocIn ul{list-style:none;padding:0;margin:0;font-family:Arial,sans-serif}.jistwebtocIn li{margin-bottom:8px}.jistwebtocIn a{display:block;color:#333;text-decoration:none;padding:10px 15px;border-radius:5px;transition:background-color .3s ease,color .3s ease;font-size:14px;line-height:1.4;font-weight:500}.jistwebtocIn a:hover{background-color:#f0f0f0;color:#007bff}.jistwebtocIn a.is-active{background-color:#007bff;color:#fff;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.1)}.jistwebtocIn ul ul{padding-left:20px;margin-top:5px;border-left:2px solid #e0e0e0}.jistwebtocIn ul ul a{padding-left:30px;font-size:13px}</style>
<input class='jistwebtocI hidden' id='forjistwebtocJs' type='checkbox'/><div class='jistwebtocL'><div class='jistwebtocLi'><div class='jistwebtocLs'><label aria-label='Close TOC' class='jistwebtocH fixH' for='forjistwebtocJs'><div class='jistwebtocC'><span><svg class='bi bi-card-list' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/><path d='M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0z'/></svg></span></div><div class='jistwebtocT fixT' data-text='جدول المحتويات'><span class='c cl' data-text='Close'/></div></label><div class='jistwebtoc jistwebtocIn scroll' id='jistwebtocAuto'/></div></div><label class='fCls' for='forjistwebtocJs'/>
</div>
<script type='text/javascript'>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded",function(){const a=document.querySelector(".post-body"),b=a.querySelectorAll("h2, h3, h4, h5, h6"),c=document.querySelector("#jistwebtocAuto"),d=document.createElement("ul");d.classList.add("jistwebtoc-list"),b.forEach(function(a,e){const f=a.id||"heading-"+(e+1);a.id=f;const g=document.createElement("li"),h=document.createElement("a");if(h.href="#"+f,h.textContent=a.textContent,g.appendChild(h),d.appendChild(g),"h2"!==a.tagName.toLowerCase()){const d=function(a){const d=a.tagName.toLowerCase();let e;if("h3"===d?e="h2":"h4"===d?e="h3":"h5"===d?e="h4":"h6"===d&&(e="h5"),e)for(let a=b.length-1;0<=a;a--)if(b[a].tagName.toLowerCase()===e){const d=c.querySelector("a[href=\"#"+b[a].id+"\"]");if(d)return d.parentElement}return null}(a);if(d){let a=d.querySelector("ul");a||(a=document.createElement("ul"),a.classList.add("jistwebtoc-list"),d.appendChild(a)),a.appendChild(g)}}}),c.appendChild(d)});/*]]>*/</script>