كيف يمكنك الحصول على جدول المحتويات في بلوجر و بدون أكواد js-css

جدول المحتويات

_طريقة إضافة جدول المحتويات بدون أكواذ جافا سكريبت.

فقرة

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

ما هوا جدول المحتويات في المدونة

يقدم جدول المحتويات عناوين الفقرة التي قمة بكتابتها على المدونة ، وغالبا ما تأتي الجداول مع القالب جاهزة ، يسهل على الزائر قرائة المحتويات الموجودة في المقالة ، و كذلك يساعد محركات البحث "العنكبوتية" في أرشفة المقالة وتصدر نتائج البحث في كوكل ، نعم جدول المحتويات مهم جدا لأنه يساعد في تصدر نتائج البحث ، و يوسهل على الزوار القرائة و يورتب المقالة.

فائدة جدول المحتويات في بلوجر

لي الجدول المحتويات فائدة كبيرة في صفحات بلوجر أو وورد بريس ، عندما تقوم بكتابة جملة على محركات البحث على كوكل أو موزيلا أو أي متصفح ، من السهل على "العناكب" البحث على أفضل ترتيب للمقالات في المحرك ، هذا لكي تتحصل على أفضل محتوى متوفر على الموضوع الذي تقوم بالبحث عليه ، لهذا السبب أنصحكم بجدول المحتويات.

أنواع جدول المحتويات

بالنسبة للجدول المحتويات هنالك نوعان منه ، النوع الأول تلقائي ومعه ألأكواذ ، والثاني بدون أكواذ.

جدول المحتويات التلقائي في صفحات بلوجر

إن الجدول المحتويات التلقائي ، تقوم بي إضافة أكواذ جافا سكريبت و أكواذ css ذاخل المحرر القالب ، ويكون الجدول موجوذ في جميع الصفحات ، ولكن غير مرتب في الصفحة قد يكون في الجهة العلوية للصفحة أو من الأسفل ، هذا غير مناسب ، و هنالك طريقة أخرى لي وضع جدول المحتويات في وسط المقالة و بشكل إحترافي ، ولكن المشكلة أنك أضفت أكواذ js ذاخل المحرر وهذا ينتج عن ثقل في تحميل الصفحة.

جدول المحتويات بدون أكواذ جافا سكريبت

أفضل طريقة للحصول على جدول المحتويات في الصفحات على بلوجر ، هي أنك تقوم بتطبيق حيلة ذكية في الصفحة نفسها ، بدون التوجه إلى إضافة أكواذ جافا سكريبت.

طريقة إضافة جدول المحتويات التلقائي

1-توجه إلى بلوجر خد نسخة إحتياطية للقالب ، إذخل إلى تحرير html ثم إبحث على هذا الوسم <head/> وضع هذا الكوذ فوقة جافا سكريبت.

<style>
/* CSS Table of Contents by androidlamine.com */
#toc{border-right:6px dotted rgba(121,128,136,0.24);padding-right:20px;padding-right:1.25rem;margin:0 0 20px;margin:0 0 1.25rem;font-size:14px;font-size:.875rem}@media only screen and (max-width : 480px){#toc{padding-right:.75rem}}#toc a{text-decoration:none}#toc b.toc{text-transform:uppercase}#toc ol{padding-right:0;margin:0}#toc ol li{margin:8px 0}#toc ol li ol{padding-right:32px;padding-right:2rem;margin:0}#toc ol li ol li{list-style-type:disc}#toc>ol{counter-reset:item;list-style:none}#toc>ol>li:before,#toc>ol li>li:before{content:counters(item,".") " ";counter-increment:item;margin-left:5px}#toc>ol>ol{padding-right:16px;padding-right:1rem}#toc>ol>ol li{list-style-type:disc}#toc-0::before,#toc-1::before,#toc-2::before,#toc-3::before,#toc-4::before,#toc-5::before,#toc-6::before,#toc-7::before,#toc-8::before,#toc-9::before,#toc-10::before,#toc-11::before,#toc-12::before,#toc-13::before,#toc-14::before,#toc-15::before{content:" ";margin-top:-72px;height:72px;display :block;visibility:hidden}.toc button{background:transparent;border:0;padding:0;outline:0;margin:0 4px;cursor:pointer;text-transform:lowercase;font-weight:normal}
</style>

2-الأن إبحث على هذا الوسم <body/> ثم ضع هذا الكوذ فوقه.

<script type='text/javascript'>          
//<![CDATA[   
//toc by androidlamine.com
!function(e){"use strict";function p(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1}function o(e){var i,c,n,t,o,r,a=e.selector,l=e.scope,u=document.createElement("ol"),d=u,s=(i=e.overwrite,c=e.prefix,function(e,t,n){e.textContent;var o=c+"-"+n;t.textContent=e.textContent;var r=!i&&e.id||o;r=encodeURIComponent(r),e.id=r,t.href="#"+r});return n=a,t=l,o=[],r=document.querySelectorAll(t),Array.prototype.forEach.call(r,function(e){var t=e.querySelectorAll(n);o=o.concat(Array.prototype.slice.call(t))}),o.reduce(function(e,t,n){var o=p(t.tagName),r=h(d,o-e)||u,i=document.createElement("li"),c=document.createElement("a");return s(t,c,n),r.appendChild(i).appendChild(c),d=i,o},p(a)),u}function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n=location.hash;return n&&setTimeout(function(){location.hash="",location.hash=n},0),o(e)}var h=function(e,t){return t<0?h(e.parentElement,t+1):0<t?function(e,t){for(;t--;){var n=document.createElement("ol");e.appendChild(n),e=n}return e}(e,t):e.parentElement};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var e=document.querySelector(".toc"),t=document.createElement("button"),n=document.querySelector("#toc ol");e.appendChild(t),t.innerHTML="(عرض)",n.style.display="none",t.addEventListener("click",function(e){"none"==n.style.display?(n.style.display="",t.innerHTML="(اخفاء)"):(n.style.display="none",t.innerHTML="(عرض)")})}function tocOption(){var e=document.querySelector(".toc");"undefined"==typeof linkMagzSetting&&(linkMagzSetting={judulTOC:"عرض جدول المحتوى",showHideTOC:!0}),e.innerHTML=linkMagzSetting.judulTOC,1==linkMagzSetting.showHideTOC&&tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption());
//]]>          
</script>

3-الخطوة الأخيرة إبحث على هذا الكوذ </data:bost.body> ثم ضع الكوذ فوقه مباشرة.

ملاحطة : قد تجد الكوذ مكرر ، في بعض القوالب يكون الكوذ المطلوب الأول أو الثاني ، عليك بالتجربة لمعرفة المكان المناسب.

<div id='toc'><b class='toc'></b></div>

طريقة إضافة جدول المحتويات بدون أكواذ جافا سكريبت

الأن عليك بالذخول إلي مشاركة جديدة ثم كتابة مقالة بعدة عناوين ، ثم بعد ذلك عليك بتحويل الصفحة إلى وضع html الأن إضغط على مفتاح ctrl + f وبحث على هذا الوسم ..h2> يمثل هذا الوسم عنوان المقالة ، مباشرة أضف هذا الرمز أمامه كما هوا موضح أمامك "id="1 ، وهكذا في كل عنوان المتغير هنا هوا "1" في العنوان الثاني أضف هكذا"2" إلى آخر عنوان بالمقالة ، هذه صورة توضح لك الطريقة للحصول على العنوان.

وبعد الإنتهاء من تحديد العناوين تقوم الأن ، بنسخ جميع العناوين التي تم تحديدها ، وتبدأ الأن بي إنشاء رابط خاص لكل عنوان قمة بتحديده ، مثال : كل رابط تكتب فيه #1 ،#2 ،#3 وهكذا في كل عنوان تم تحديده ، هذه العملية أستعملها أنا شخصيا في هذه المقالة ، أنطر في الأعلى جدول المحتويات الخاص بي كيف يبدو.