كيفية إضافة "فهرس الموضوع" في المواضيع

[Admin]

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

بعد تركيب الكود سيتم البحث داخل المواضيع عن جميع العناوين التي تكون بين هذا الوسم "h3"، ثم يقوم بإنشاء فهرس يحتوي على روابط لهذه العناوين. [h3] هنا النص[/ h3] عند النقر على أحد الروابط في الفهرس، يتم التمرير إلى العنوان المعني مع تغييره بلون الخلفية مؤقتًا.​

معاينة الكود​

تركيب الكود​

توجه نحو لوحة الادارة - مظهر المنتدى - الوان وورقة Css - واضف الكود التالي في ورقة الـ Css

.sceditor-dropdown.sceditor-customMessagesDropdown a{
  display: block;
  padding: 10px;
  cursor: pointer;
}
.sceditor-dropdown.sceditor-customMessagesDropdown {
    padding: 0;
}

.sceditor-dropdown.sceditor-customMessagesDropdown:hover {
  background-color: #ddd;
}

a.sceditor-button.sceditor-button-customMessages div {
    background-image: url(https://i.servimg.com/u/f20/16/85/77/67/1-8810.png) !important;
    background-size: 100%;
    border: solid #3fd745 1px;
}
   table.Index-of-topics {
width: 100%;
    border: dotted 1px #9b9b9b;
        padding: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
        margin-bottom: 20px;
      cursor: pointer;
    }

  .Index-of-topics h2 {
  width: 100%;
    padding: 4px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
}

    .Index-of-topics h2 span {
        margin-left: 10px;
        font-weight: normal;
    }

    .Index-of-topics ul {
        list-style-type: none;
        padding: 0;
        display: none;
    }

    .Index-of-topics.show ul {
        display: block;
    }

    .Index-of-topics li {
        margin: 5px 0;
    }

    .Index-of-topics li a {
        text-decoration: none;
        color: #333;
    }

    .Index-of-topics li a:hover {
        color: #007bff;
    }

ثم اضف الكود التالي الى الجافا واختار جميع الصفحات

$(function() {
    $('.post').each(function(index) {
        let $post = $(this);
        let indexHtml = `<h2>فهرس &nbsp;الموضوع<span>+</span></h2><ul>`;
        let hasIndex = false;

        $post.find('h3').each(function() {
            let text = $(this).text().trim();
            if (text !== "") {
                hasIndex = true;
            }
            let id = `post-${index}-${text.replace(/\s+/g, '-').replace(/[^\w\u0600-\u06FF-]/g, '')}`;
            $(this).attr('id', id);

            indexHtml += `<li><a href="#${id}" class="smooth-scroll">${text}</a></li>`;
        });

        indexHtml += '</ul>';

        if (hasIndex) {
            $post.find('.Index-of-topics').html(indexHtml);
        } else {
            $post.find('.Index-of-topics').html('');
        }
    });

    let timeoutId;

    $('.Index-of-topics').on('click', 'a.smooth-scroll', function(e) {
        e.preventDefault();
        let targetId = $(this).attr('href');
        let target = $(targetId);

        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 70
            }, 500, function() {
                $('.post h3').css('background-color', '');

                target.css('background-color', '#ffeb3b');
                clearTimeout(timeoutId);

                timeoutId = setTimeout(() => {
                    target.css('background-color', '');
                }, 20000);
            });
        }
    });

    $('.Index-of-topics h2').on('click', function() {
        $(this).parent().toggleClass('show');
        let symbol = $(this).find('span');
    
        if ($(this).parent().hasClass('show')) {
            symbol.text('-');
        } else {
            symbol.text('+');
        }
    });
});

$(function() {
  if (!$.sceditor) return;
 
  $.sceditor.command.set('customMessages', {
    dropDown : function(editor, caller, callback) {
      var messages = {
        'إضافة الفهرس' : '[table class="Index-of-topics"][tr][td][/td][/tr][/table]'
      },
      linkElement, container = document.createElement('DIV'), key;
 
      for (key in messages) {
        linkElement = document.createElement('A');
        linkElement.className = 'sceditor-custom-option-' + Math.random().toString(36).substr(2, 9);
        linkElement.title = messages[key];
        linkElement.innerHTML = key;
        linkElement.onclick = function() {
          callback(this.title);
          editor.closeDropDown(true);
          return false;
        };
        container.appendChild(linkElement);
      }
 
      editor.createDropDown(caller, 'customMessagesDropdown', container);
    },
 
    exec : function(c) {
      var e = this;
      $.sceditor.command.get('customMessages').dropDown(e, c, function(content) {
        e.insertText(content);
      });
    },
 
    txtExec : function(c) {
      var e = this;
      $.sceditor.command.get('customMessages').dropDown(e, c, function(content) {
        e.insertText(content);
      });
    },
 
    tooltip : 'Custom Preset Messages'
  });
 
  toolbar += '|customMessages';
});

"لا يقتصر دور الفهرس في المقالات على كونه عنصراً شكلياً فحسب، بل يُعد أداةً محورية لتعزيز التنظيم البنيوي وتمكين القارئ من الوصول السريع إلى المحتوى الرئيسي. فمن خلال قائمة مُنظمة تحوي العناوين الفرعية والمواضيع الأساسية، يُسهِّل الفهرس على المستخدمين التنقل بين أقسام المقال بسلاسة، دون الحاجة إلى بحث مضنٍ أو تمرير طويل عبر الصفحات. كما يُسهم في توفير الوقت والجهد، ويُعزز تجربة القراءة عبر جعلها أكثر تركيزاً وفعالية، مما يعكس اهتمام الكاتب باحتياجات جمهوره ويُبرز احترافية العمل المكتوب."

تم كتابة الكود بواسطة @كونان2000 باستخدام الــAI
منقول من منتدى الدعم

بالتوفيق للجميع
والسلام ختام​