ماهو جدول المحتويات
ماهي فوائد جدول المحتويات؟
هل جدول المحتويات صديق لسيو؟
مميزات جدول المحتويات
إمكانية إظهار وإخفاء الأداة بسهولة من خلال زر بسيط
يوفر جدول المحتوى تنقل حركي ناعم عند التوجه الى العنوان الذي تم إستدعاءه
إظهار سهم متحرك بجانب العنوان الذي تم التوجه اليه لتنبيه المستخدم إليه مباشرة
إمكانية التحكم في المسافة بين العنوان المتوجه إليه و أعلى صفحة (مفيدة في حالة Header الصفحة تابث)
متجاوب مع الوضع الليلي
كيفية تركيب جدول المحتويات
من السهل جدًا إنشاء جدول محتويات في مقال مدونة بلوجر ، ولكن يبدو أن العديد من الأشخاص ما زالوا لا يعرفون كيفية إعداده ، أو ربما لأن المنشورات التي تم نشرها ليست طويلة جدًا ولا تتطلب جدول محتويات . حسنًا ، بدون مزيد من اللغط ، دعنا نبدأ تركيب جدول التنقل.
توجه إلى المظهر على منصة بلوجر، إضغط تعديل HTML
قم بنسخ كود
.mhtoc *{box-sizing: border-box;}.mhtoc .mtochead,.mhtoc .mtoclist{display:flex;padding:8px 10px}
.mhtoc .mtoclist ul,.mhtoc .mtoclist ul li{padding:0;margin:0;background-color:transparent}@font-face{font-family:toc-font;src:url('https://cdn.jsdelivr.net/gh/hamianemohssine/7amian/font-icons/tableofcontenticons.woff2')}
.mhtoc{display:block;width:100%;height:auto;text-align:right;direction:rtl;overflow:hidden;border-radius:3px;user-select:none;background-color:#cccccc20;border:1px solid #aaaaaa60;margin:0 0 10px}
.mhtoc .mtochead{flex-direction:row;justify-content:space-between;align-items:center;width:100%;border-bottom:1px solid #aaaaaa60;cursor:pointer}
.mhtoc .mtochead:after{content:"إخفاء";transition:transform .3s ease-out;padding:0 10px;border:1px solid #aaaaaa50;border-radius:3px}
.mhtoc .mtocon{border:none}
.mhtoc .mtocon:after{content:"إظهار"}
.mhtoc .mtoctitle{display:flex;flex-direction:row;align-items:center;column-gap:6px;line-height:0}
.mhtoc .mtoctitle:before{content:"\f0cb";font-family:toc-font}.mhtoc .mtoclist ul{counter-reset:section;list-style-type:none}.mhtoc .mtoclist ul li{list-style:none;line-height:1.8}.mhtoc .mtoclist ul li:before{counter-increment:section;content:counters(section, ".") ".";margin:0 0 0 5px}.mhtoc .mtoclist ul li>ul{margin:0 30px 0 0}.mhtoc .mtoclist a{text-decoration:none;color:inherit}@keyframes ichara{0%,100%{transform:translateY(0) scaleX(1)}25%{transform:translateY(10px) scaleX(.5)}50%{transform:translateY(-10px) scaleX(1)}}
.tocmatch:after{display:inline-block;content:"\e800";font-family:toc-font;animation:.5s linear infinite ichara;margin:0 10px}
قم بنسخ كود
<script>
//<![CDATA[
!function(){
var TocMarginTop = 75;
var TocSpeed = 800;
var TocHidden = false;
var Tocheader = "h1,h2,h3,h4";
var headersDiv = ".post-body";
$("#Blog1 "+ headersDiv).each(function(){var t=$("<div class='mhtoc'><div class='mtochead'><div class='mtoctitle'>جدول المحتويات</div></div><div class='mtoclist'></div></div>"),a=$(this),i=a.find(Tocheader);if(i.length){var d=$("<ul></ul>");for(let e=0;e<i.length;e++){var l=i[e];d.append("<li data-head='"+$(l).prop("tagName").substring(1,2)+"' ><a href='#xxtoc"+e+"'>"+$(l).text()+"</a></li>"),$(l).attr("id","xxtoc"+e)}var n=d.find("li");for(let o=0;o<n.length-1;o++){var s=n.eq(o),c=n.eq(o+1);if(s.data("head")<c.data("head")){s.append("<ul class='inside'></ul>");for(var f=o+1;f<n.length;f++){var h=n.eq(f);s.data("head")<h.data("head")&&s.find("ul").append($(h))}}}t.find(".mtoclist").append(d),t.find(".mtochead").click(function(){var a=$(this);t.find(".mtoclist").slideToggle(300,"swing",function(){a.toggleClass("mtocon")})}),t.find(".mtoclist a").each(function(){var t=$(this);t.click(function(a){a.preventDefault();var i=$(t.attr("href")),d=i.offset().top;$("html,body").animate({scrollTop:d-TocMarginTop},TocSpeed,"swing"),i.addClass("tocmatch"),setTimeout(function(){i.removeClass("tocmatch")},4e3)})}),t.find(".mtoclist ul li"),TocHidden&&(t.find(".mtoclist").css("display","none"),t.find(".mtochead").addClass("mtocon")),a.prepend(t)}});
}()
//]]>
</script>
قبل حفظ المظهر لا تسنى التعديل في متغييرات
جدول المحتويات يدعم مجموعة من الخصائص التي يمكن التحكم فيها من خلال جافا سكريبت وذلك بتغيير قيم المتغييرات المشار اليها فوق.
المتغير TocMarginTop يسمح لك بتحديد المسافة التي يجب تركها عند التوجه الى اي عنوان، ونقصد هنا المسافة بين العنوان ورأس الصفحة الظاهر وهي مفيدة في حالة وجود Header تابث في الموقع، حيث يمكنك تحديد قيمة المتغير بقيمة ارتفاع Hieght Header لتفادي ظهور Header فوق العنوان الذي تم التوجه إليه.
المتغيير TocSpeed ويفيد الوقت المستغرق لتوجه الى اي عنوان ويمكنك تحديد قيمته بالميلي ثانية.
المتغيير TocHidden إذا كانت قيمته true فهو يسمح لك بإخفاء العناوين في جدول المحتويات حتى يتم الضغط على زر إظهار.
المتغيير TocHeader يفيد وسوم العناوين التي سيتم إستهذافها لجلبها من داخل المحتوى يمكنك إضافة المزيد لكن ضع بينها فواصل.
المتغيير headersDiv يشير إلى العنصر الذي يحتوي على محتوى الموضوع حيث يجب إضافة Class او Id هذا العنصر في قيمة هذا المتغيير وفي حالة كانت class نضع قبلها نقطة . وفي حالة كانت Id نضع قبلها #.
