إنشاء جدول المحتويات التلقائي بالجافا سكريبت لبلوجر حصرياً 2018
كما يفعل موقع موضوع وباقي المواقع المشهورة التي إنتشرت مؤخراً قائمة المحتويات الخاصة بالمقال بشكل تلقائي عبر إضافات وردبريس تقوم بذلك عوضاً عنهم ولكن المعضلة الكبري هي لمسختدمي بلوجر فلا يوجد إضافات جاهزة لبلوجر كما نعلم لذلك للاسف قبل الان لم يكن هناك طريقة لذلك, لذا أحببت أن اجلب لكم هذه الاضافة التي وجدتها أثناء بحثي في أحدي المواقع الاجنبية وبالاخص لمدون هندي وسأشارك معكم حقوق الاضافة في نهاية المقال.
الاضافة تعمل بشكل تلقائي فقط كود في بداية المقال او في المكان الذي تريد ظهور القائمة فيه وكود أخر في نهاية المقال وتضع في المقال الهيدينج H2 لكي تظهر في القائمة وهو ما سنشرحه الان, المقالة ليست منسوخة ولا مترجمة فقط قد قمت بقراءة المقال الخاص بالاضافة لدي مطورها وقمت بكتابته بنفسي ووضعت حقوق الاضافة كما يطلب صاحبها في نهاية المقال لذا تابعوا معي الشرح التالي.
ما هو جدول المحتويات ؟
في مواقع الويب، يتم اختصار جدول المحتويات الخاص بالمقالة كاملة في صندوق بسيط، وهو عبارة عن قائمة روابط، تكون عادةً بعد اول فقرة أو ثاني فقرة في المقال كما بالمواقع الكبيرة مثل موقع موضوع. ينقلك كل رابط موجود في القائمة الي المكان الخاص به في القائمة وذلك أعتماداً علي ال H2.
توفر الاضافة طريقة سريعة للانتقال إلى القسم المطلوب من الصفحة. وعادة ما تتضمن عناوين رؤوس المستوى الأول (العناوين) أو رؤوس المستوى الثاني (العناوين الفرعية).
ما هي TOC Plugin؟
TOC هي أضافة قائمة المحتوي التي طورت بواسطة MBT لمنصة التدوين بلوجر، هو الحل التلقائي لطريقة شاقة من إنشاء جدول المحتويات يدويا لكل مقالة عليحدي. فالاضافة تقوم تلقائياً بانشاء قائمة محتويات للتدوينة الخاصة بك اعتماداً علي بعض العوامل التي سأقوم بعرضها اليوم في هذه المقالة. تم تطوير الاضافة بواسطة الجافاسكريبت التي تقوم بالتحميل بسرعة البرق ولا تبطئ موقعك نهائياً. جدول المحتويات التي تم إنشاؤها باستخدام TOC يتم الزحف إليها بسهولة وفهرستها من قبل روبوتات البحث.
علي لسان المطور أنه بعد ما نشر المقالة ببضع دقائق لم تقم جوجل بفهرسة روابط الاضافة بحسب بل أضافة اليها عبارة "Jump to" لتحديد انها تنتمي لجزء معين كما بالصورة التي بالاسفل الخاصة بالكاتب.
مميزات TOC Plugin:
للعلم أن هذه الاضافة هي مكتوبة بلغة الجافا سكربت الخام التي لا تعمل علي بط موقعك نهائياً بل هي تقوم بالتحميل بسرعة البرق.
- كتبت بلغة جافاسكريبت النقية - 10 خطوط فقط من الاسطور البرمجية!.
- خفيفة الوزن وسريعة.
- مناسبة للسيو.
- لإضافة معرف فريد إلى كل قسم تلقائيا.
- يحتوي على زر تبديل.
- تعرض في اي مكان تحتاجه.
- تخصيص بسهولة.
- استجابة علي الهواتف.
- تنفذ فقط عندما تستدعيها!.
كيفية تثبيت الاضافة علي مدونات بلوجر؟
في الشرح التالي المبني علي شرح صاحب الاضافة ستتعرف علي كيفية وضع الاضافة في مدونتك واستخدامها ببساطة وبسهولة وبدون تعقيد لذا تابعوا معي.
اتبع الخطوات التالية لتثبيته في المدونة:
- تسجيل الدخول في بلوجر> قالب Blogger > Template
- النسخ الاحتياطي القالب الخاص بك
- انقر على "Edit HTML"
- قم بوضع الكود التالي بعض الوسم </head> مباشرة
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'
rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin by MyBloggerTricks.com
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i <
headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")
[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute
("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead
+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt
= document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display =
'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
أذا لاحظت وجود اشارة الي خطوط Oswald font و Font-Awesome يمكنك استخدامهم او ازالتهم اذا كنت قد وضعتهم مسبقاً في القالب
إجراء هذا التغيير فقط إذا لزم الأمر:
علامة العنوان الرئيسية في المدونة هي H2 ولكن إذا كنت تقوم بتحديد علامة العنوان الفرعي في محرر المدونة ثم العلامة الافتراضية ستكون H3. إذا كنت تستخدم علامة العنوان الفرعي كعنوان رئيسي في مشاركات مدونتك، فيرجى استبدال h2 ب h3 ثلاث مرات في الشفرة أعلاه. لن تعمل TOC plugin إذا كانت علامة العنوان غير صحيحة.
- ابحث عن الكود التالي ]]></b:skin> وضع بعده الاكواد التالية الخاصة بالتنسيق
/*####Automatic TOC Plugin by MyBloggerTricks####*/
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-
color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-
family:oswald, arial;display: block;width: 70%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul {list-style:none;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative;
outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px;
font-size:20px;}
- وأخيرا ابحث عن <data:post.body/> واستبدله بالرمز أدناه
ستجد ثلاثة اكواد مثل الكود السابق استبدلهم جميعا بالكود التالي وذلك لنجاح العملية.
<div id="post-toc"><data:post.body/></div>
- احفظ القالب الخاص بك وها قد تم التركيب!
عرض جدول المحتويات تلقائيا في مشاركات المدونة
في كل مرة قد ترغب في عرض الاضافة TOC داخل موضوع معين، اتبع هاتين الخطوتين.
الخطوة رقم 1 أشهر الي الاضافة TOC في التدوينة .
من الأفضل عرض TOC مباشرة بعد فقرة البداية أو إظهارها قبل العنوان الأول على مشاركة مدونتك.
للقيام بذلك، التبديل إلى وضع "HTML" محرر بلوجر ومن ثم لصق شفرة HTML التالية فقط قبل العنوان الأول أو في أي مكان آخر قد ترغب.
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
يمكنك استبدال النص "Contents" مع أي نص آخر قد ترغب.
إذا كان في العناوين الخاصة بك تحتوي بالفعل علي أرقام في البداية ثم استبدال ol مع ul.
الخطوة # 2 تفعيل TOC
وأخيرا، وقت ما تريد استدعاء الاضافة في اي صفحة او اي تدوينة قم بلصق هذا الكود في نهاية الصفحة في محرر ال Html.
<script>mbtTOC();</script>