اضافة جدول محتويات الموضوع فى بلوجر ، فى هذا الموضوع سنشارك معكم اداة جديدة تستخدم فى الانتقال السريع بين محتويات الموضوع، وهذه الاداة تسمى روابط الانتقال السريع او جدول المحتويات والذى يحتوى على اقسام عناوين الموضوع، الاستخدام سهل للغاية باستخدام معرفاتHTML، لمشاهدة الاداة بالتفصيل وكيف تعمل من صندوق المعاينة بالسايدبار.
و بشكل عام تستخدم اداة جدول المحتويات بشكل عام فى مدونات الووردبريس، ولكن ماذا لو هذه المرة تم استخدامها على بلوجر لإنشاء جدول محتويات الموضوع، ربما سوف يكون اكثر جاذبية.
بالإضافة الى ذلك، يشتبه الصندوق فى التصميم صندوق محتويات الموسوعة الحرة - ويكيبيديا - مع ذلك سيجذب قراء لمحتوى مدونتك، وهنا الاضافة لا تعمل بشكل تلقائي حيث اذا تم استعمالها بشكل تلقائي تصبح الاداة لا تعمل بكل المواضيع، لذا يجب استخدامها و تركيبها بشكل يدوى.
واخيرا، تعمل هذه الاداة باستخدام كودHTML برمجي فقط، بالاضافة الى كودcss لستايل الاداة، وكود JavaScript للتنقل داخل المحتوى.
شرح كود جدول المحتويات التفاعلي
هذا الكود يتكون من جزأين رئيسيين: HTML/CSS وJavaScript. الكود يعمل على إنشاء جدول محتويات (Table of Contents) تفاعلي يمكن للمستخدمين النقر عليه للانتقال إلى أقسام محددة في الصفحة. سأشرح كل جزء بالتفصيل:
الهيكل العام (HTML)
<div id="btn-cm">: هذا العنصر يعمل كحاوية رئيسية تحتوي على زر جدول المحتويات (#btn_toc) وجدول المحتويات نفسه (#toc).<div id="btn_toc">: هذا الزر الذي يمكن النقر عليه لإظهار أو إخفاء جدول المحتويات. يحتوي على نص "محتويات" وأيقونة (SVG) تمثل سهمين لأعلى ولأسفل.<div id="toc">: هذا العنصر يحتوي على قائمة مرتبة (<ol>) بالعناوين الرئيسية للصفحة. كل عنصر في القائمة (<li>) يحتوي على رابط (<a>) يشير إلى قسم معين في الصفحة باستخدامhrefمع معرف (id) مثل#toc_1.<script>: يتم تضمين مكتبة jQuery من خلال رابط خارجي لتسهيل التعامل مع الأحداث والتحريك.
التصميم (CSS)
#btn-cm: يعطي تصميمًا للحاوية الرئيسية، مثل الحدود (border)، زوايا مدورة (border-radius)، ولون خلفية (background-color).#btn_toc: يعطي تصميمًا للزر، مثل وزن الخط (font-weight)، مؤشر الماوس (cursor)، وهوامش (margin).#btn_toc:focus, #toc li:focus, .back_toc:focus: يزيل الحدود الزرقاء الافتراضية عند النقر على العناصر (التركيز عليها).#toc li: يجعل عناصر القائمة قابلة للنقر عليها (مؤشر الماوس يتغير إلى يد).#toc: يعرض جدول المحتويات كشبكة (display: grid).:target::before: يستخدم لإضافة مسافة عند الانتقال إلى قسم معين في الصفحة لمنع المحتوى من الاختفاء خلف القائمة الثابتة.
JavaScript/jQuery
$(document).ready(function(){ ... }): يتم تنفيذ الكود الموجود بداخله بمجرد تحميل الصفحة بالكامل.$("a").on('click', function(event){ ... }): يتم إضافة حدث النقر (click) لجميع الروابط (<a>) في الصفحة.if (this.hash !== "") { ... }: يتم التحقق مما إذا كان الرابط يحتوي على معرف (hash) مثل#toc_1.event.preventDefault(): يمنع السلوك الافتراضي للرابط (الانتقال الفوري إلى القسم).$('html, body').animate({ scrollTop: $(hash).offset().top }, 800): يقوم بتحريك الصفحة بسلاسة إلى القسم المحدد خلال 800 مللي ثانية.window.location.hash = hash: بعد الانتهاء من التمرير، يتم إضافة المعرف (hash) إلى عنوان URL.
كيف يعمل الكود؟
- عند النقر على زر "محتويات"، يتم إظهار أو إخفاء جدول المحتويات (
#toc) عن طريق تغييرdisplayبينblockوnone. - عند النقر على أي رابط في جدول المحتويات، يتم الانتقال بسلاسة إلى القسم المقصود في الصفحة.
- يتم استخدام jQuery لتسهيل عملية التمرير السلس وإضافة المعرف (
hash) إلى عنوان URL.
ملاحظات إضافية
- الكود يعتمد على jQuery، لذا يجب تضمين مكتبة jQuery قبل استخدامه.
- يمكن تحسين الكود باستخدام JavaScript خالص (بدون jQuery) إذا رغبت في ذلك.
- يمكن تعديل التصميم والألوان لتناسب احتياجاتك.
طريقة تركيب الكود
اذهب الي لوحة تحكم بلوجر
حدد السمة تحرير HTML
الآن انسخ كود Css والصقه فوق ]]></b:skin> في المظهر الخاص بك.
/* Table of Contents (melafndey) */#btn-cm {
border: 1px solid #dadada;
border-radius: 5px;
background-color: #f9f9f9;
}
#btn_toc {
font-weight: 700;
cursor: pointer;
margin: 10px;
}
#btn_toc:focus,#toc li:focus,.back_toc:focus {
outline: none;
}
#btn_toc svg {
vertical-align: middle;
}
#toc li {
cursor: pointer;
}
#toc {
display: grid;
}
.back_toc {
cursor: pointer;
text-align: left;
}
:target::before {
content: "";
display: block;
height: 40px;
margin-top: -40px;
visibility: hidden;
}
قم بنسخ الكود التالى وضعه فى المكان الذى تريده وتخصيصه بنفسك.
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
</div>
ضع الكود التالى فوق </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jquery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
