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

شرح كود جدول المحتويات (Table of Contents)

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

(1) الجزء الأول: CSS (<style>)

<style>
  /* CSS Table of Contents by aweywashk.xyz/ */
  #toc {
    border-right: 6px dotted rgba(121, 128, 136, 0.24);
    padding-right: 1.25rem;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
  }

  @media only screen and (max-width: 480px) {
    #toc {
      padding-right: 0.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: 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: 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>
    

• #toc: يتم تخصيص جدول المحتويات باستخدام حدود منقطة على الجانب الأيمن، وحشوة داخلية، وحجم خط محدد.
• #toc a: يتم إزالة التزيين من الروابط (text-decoration: none).
• #toc ol: يتم تخصيص القوائم المرتبة داخل جدول المحتويات.
• #toc ol li: يتم تخصيص عناصر القائمة، بما في ذلك التباعد بين العناصر.
• #toc>ol: يتم استخدام counter-reset لإنشاء أرقام تسلسلية للعناوين.
• #toc-0::before إلى #toc-15::before: يتم إضافة مساحة خفية قبل كل عنوان لضمان عدم قطع الروابط عند النقر عليها.
• .toc button: يتم تخصيص زر "عرض/إخفاء" جدول المحتويات.

(2) الجزء الثاني: JavaScript (<script>)

<script type='text/javascript'>
  //<![CDATA[
  //toc by aweywashk.xyz/
  !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>
    

• الوظيفة p(e): تحدد مستوى العنوان (مثل h1, h5, h3, إلخ) بناءً على رقم العلامة.
• الوظيفة o(e): تنشئ جدول المحتويات بناءً على العناوين الموجودة في المقال.
• الوظيفة t(e): تهيئة جدول المحتويات وتحديد العناوين التي سيتم تضمينها.
• الوظيفة h(e, t): تساعد في إنشاء التسلسل الهرمي للعناوين (مثل h5 داخل h1, h3 داخل h5, إلخ).
• الوظيفة tocShowHide(): تضيف زر "عرض/إخفاء" لجدول المحتويات، مما يسمح للقراء باختيار ما إذا كانوا يريدون رؤية الجدول أم لا.
• الوظيفة tocOption(): تسمح بتخصيص نص الزر وخيارات جدول المحتويات.

(3) الجزء الثالث: HTML (<div>)

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

• <div id='toc'>: يتم إنشاء عنصر div لعرض جدول المحتويات داخله.
• <b class='toc'></b>: يتم استخدامه لعرض عنوان جدول المحتويات (مثل "جدول المحتويات").

أهمية هذا الكود في المدونة

• تحسين تجربة المستخدم (UX): يساعد القراء على التنقل بسهولة بين أجزاء المقال، خاصة إذا كان المقال طويلًا أو يحتوي على العديد من العناوين.
• تحسين SEO: يعتبر جدول المحتويات إشارة إيجابية لمحركات البحث، حيث يساعد في فهم هيكل المقال وتحسين ترتيبه في نتائج البحث.
• توفير الوقت: يسمح للقراء بالانتقال مباشرة إلى الأجزاء التي تهمهم دون الحاجة إلى التمرير يدويًا.
• تحسين التفاعل: يزيد من تفاعل القراء مع المحتوى، حيث يمكنهم الوصول إلى المعلومات المطلوبة بسرعة.
• تخصيص سهل: يمكن تعديل الكود بسهولة لتغيير مظهر جدول المحتويات أو إضافة خيارات إضافية (مثل زر "عرض/إخفاء").

كيفية استخدام هذا الكود في المدونة

1. إضافة الكود إلى القالب: انسخ الكود وألصقه في قالب المدونة (مثل HTML/JavaScript widget).
2. تعديل الإعدادات: يمكنك تعديل المتغيرات في JavaScript لتغيير العناوين التي سيتم تضمينها في جدول المحتويات (مثل h5, h3).
3. اختبار الجدول: تأكد من أن جدول المحتويات يعرض العناوين بشكل صحيح وأن الروابط تعمل.

مثال على استخدام الكود

<div id='toc'><b class='toc'>جدول المحتويات</b></div>

طريق التركيب

اذهب إلى لوحة تحكم مدونتك في بلوجر.

ثم انقر على زر Theme.

ثم انقر على زر Customize.

ثم انقر على زر تحرير HTML.

ثم ابحث عن </head> والصق كود Css التالي أعلاه.

<style>
  /* CSS Table of Contents by aweywashk.xyz/ */
  #toc {
    border-right: 6px dotted rgba(121, 128, 136, 0.24);
    padding-right: 1.25rem;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
  }

  @media only screen and (max-width: 480px) {
    #toc {
      padding-right: 0.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: 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: 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>
    

ابحث عن <data:post.body/> والصق كود HTML التالي أسفله مباشرةً.

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

ابحث عن وسم </body> والصق جافا سكريبت التالي فوقه مباشرة.

<script type='text/javascript'>
  //<![CDATA[
  //toc by aweywashk.xyz/
  !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>
    

الخلاصة

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