آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

كودإضافة جدول محتويات المقاله لمدونات بلوجر

هذا الكود يتكون من جزأين رئيسيين: HTML/CSS وJavaScript. الكود يعمل على إنشاء جدول محتويات (Table of Contents) تفاعلي يمكن للمستخدمين النقر عليه ......
كودإضافة جدول محتويات المقاله لمدونات بلوجر
اضافة جدول محتويات الموضوع فى بلوجر ، فى هذا الموضوع سنشارك معكم اداة جديدة تستخدم فى الانتقال السريع بين محتويات الموضوع، وهذه الاداة تسمى روابط الانتقال السريع او جدول المحتويات والذى يحتوى على اقسام عناوين الموضوع، الاستخدام سهل للغاية باستخدام معرفات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.

كيف يعمل الكود؟

  1. عند النقر على زر "محتويات"، يتم إظهار أو إخفاء جدول المحتويات (#toc) عن طريق تغيير display بين block وnone.
  2. عند النقر على أي رابط في جدول المحتويات، يتم الانتقال بسلاسة إلى القسم المقصود في الصفحة.
  3. يتم استخدام 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>
    

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

Post a Comment