شرح إضافة جدول محتويات تلقائي متعدد المستويات (ToC) على بلوجر

تلقيت الكثير من الأسئلة حول "كيفية إنشاء جدول محتويات أو جدول محتويات (ToC) تلقائيًا في بلوجر  حسنًا ، سأوضح لك هنا كيفية إضافة هذه الأداة المهمة فقط مع Vanilla JavaScript و CSS3!.

ما هو جدول المحتوى؟

بالنسبة للمدونين الذين يكتبون مقالات طويلة وغالبًا ما يقسمون المقالات إلى أقسام ، قد يواجه الزوار صعوبة في قراءتها دون التنقل. أحد الحلول لإنشاء مقالات طويلة وسهلة للتنقل هو إنشاء جدول المحتويات / (ToC) 
جدول المحتوايات أو Table Of Content هي إحدى الميزات التي قد تراها غالبًا على مواقع الويب / المدونات الشهيرة ، على سبيل المثال Wikipedia ومفيدة لتسهل علي الزوار قراءة و تصفح المقالات الطويلة.

هل جدول المحتويات مناسب لـ SEO؟

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

كيفية تثبيت جدول المحتويات على بلوجر

يمكن تثبيت كود جدول المحتوي  الذي سننشئه هذه المرة على أي نظام أساسي. سواء  وردبريس أو بلوجر  أو HTML.
ولكن هذه المرة ، سأناقش فقط خطوات تثبيته لـ بلوجر فقط.
اتبع الخطوات التالية: انتقل إلى لوجة تحكم بلوجر  المظهر. قم أولاً بنسخ  القالب الذي تستخدمه احتياطيًا. انقر فوق الزر  تحرير HTML.
ابحث عن الوسم </head> وأضف رمز جافا سكريبت التالي فوقه مباشرةً:

<script>
    //<![CDATA[
    function elcreativeToc() {
        var number = 0,
        counter = 0,
        space = "";

        document.getElementById("postToc").innerHTML = document.getElementById("postToc").innerHTML.replace(/<h([\d]).*?>\n(.*?)<\/h([\d]).*?>/gi, function(d, e, f, g) {
            return e != g ? d : (e > number ? space += new Array(e - number + 1).join("<ol class='toc" + number + "'>") : e < number && (space += new Array(number - e + 1).join("</ol></li>")), counter += 1, space += '<li><a href="#toc' + counter + '">' + f + "</a>", number = parseInt(e), "<h" + e + " id='toc" + counter + "'>" + f + "</h" + g + ">")
        }), number && (space += new Array(number + 1).join("</ol>")), document.getElementById("elcreativeTable").innerHTML += space
    }

    function elcreativeTocToggle() {
        var table = document.getElementById("elcreativeTable"),
        toggle = document.getElementById("toggles");
        "none" === table.style.display ? (table.style.display = "block", toggle.innerHTML = "إخفاء") : (table.style.display = "none", toggle.innerHTML = "إظهار")
    }
    //]]>
</script>

بعد ذلك ، ابحث عن الكود]]> ]]></b:skin> والصق كود CSS التالي فوقه مباشرة: 


.elcreativeToc {
    padding: 15px 30px;
    margin: 0;
    border: 1px solid #dadce0;
    border-radius: 8px;
}
.elcreativeToc a {
    color: inherit;
    text-decoration: none;
}
.elcreativeToc a:hover {
    text-decoration: underline;
}
.elcreativeToc button {
    color: inherit;
    background: 0 0;
    font-size: 20px;
    position: relative;
    outline: 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-weight: 500;
}
.elcreativeToc button a:hover {
    cursor: pointer;
}
.elcreativeToc ol {
    counter-reset: section;
    list-style: none;
}
.elcreativeToc ol:first-child {
    padding: 0;
}
.elcreativeToc ol > :first-child {
    counter-reset: counter;
}
.elcreativeToc ol li::before {
    counter-increment: counter;
    content: counters(counter,".")". ";
}
.elcreativeToc li {
    margin: 5px 0;
    padding: 0;
    line-height: 1.5em;
    list-style: none !important;
}


ابحث عن الوسم <body (بدون الأعلاق >) والصق الكود التالي تحته مباشرة: 

 <b:attr cond='data:view.isSingleItem' value='postToc' name='id'/>



أخيرًا ، احفظ القالب الخاص بك.

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

يمكنك إضافة جدول المحتويات ديناميكيًا إلى مشاركاتك باستخدام الخطوات البسيطة التالية:أدخل لوحة تحكم بلوجر  إعدادات قائمة النشر والتعليق والمشاركة.في قسم المشاركاتنموذج المشاركات ، انقر على الزر "إضافة" وأدخل الكود التالي: 

هنا تضع ممقدمة المقال <br/>
<div class="elcreativeToc">
    <button>جدول المحتويات <span><a onclick="elcreativeTocToggle()" id="toggles">إخفاء</a></span></button>
    <div id="elcreativeTable"></div>
</div>
إكتب الموضوع هنا
<br/>
<script>elcreativeToc();</script>

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

يرجى تغيير البيان بعناية كما تريد (لا تمحو النصوص) .

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