كود البسملة في بداية الموضوع للزين فورو

[Admin]

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

في هذا الموضوع، سنستعرض طريقة بسيطة وفعّالة لإضافة صورة البسملة تلقائيًا في بداية المواضيع على منتديات XenForo. هذه الإضافة لا تُعتبر فقط تحسينًا بصريًا، بل تضفي طابعًا دينيًا وأنيقًا يناسب المنتديات التي تهتم بالقيم الإسلامية وتقديم محتوى هادف.​

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

​

تركيب الكود​

توجه نحو لوحة الادارة - المظهر - البحث في القوالب - ابحث عن القالب التالي : thread_view وألقص الكود التالي في بدايته

الكود في حال اردت البسملة تظهر في الموضوع والردود

<xf:if is="$template == 'thread_view'">
<script>
document.addEventListener("DOMContentLoaded", function() {
    var messageContents = document.querySelectorAll(".message-content");

    if (messageContents.length > 0) {
        var bismillahSrc = "https://i.servimg.com/u/f61/20/45/64/34/6_by_e10.png";
        messageContents.forEach(function(content) {
            var bismillahImage = document.createElement("img");
            bismillahImage.src = bismillahSrc;
            bismillahImage.alt = "بسملة";
            bismillahImage.style.display = "block";
            bismillahImage.style.margin = "0 auto 20px";

            // إدراج الصورة في بداية المحتوى
            content.insertBefore(bismillahImage, content.firstChild);
        });
    }
});
</script>
    </xf:if>

الكود في حال اردت البسملة تظهر في الموضوع فقط

<xf:if is="$template == 'thread_view'">
<script>
document.addEventListener("DOMContentLoaded", function() {
    var firstMessageContent = document.querySelector(".message-content");

    if (firstMessageContent) {
        var bismillahSrc = "https://i.servimg.com/u/f61/20/45/64/34/6_by_e10.png";
        var bismillahImage = document.createElement("img");
        bismillahImage.src = bismillahSrc;
        bismillahImage.alt = "بسملة";
        bismillahImage.style.display = "block";
        bismillahImage.style.margin = "0 auto 20px";
        firstMessageContent.insertBefore(bismillahImage, firstMessageContent.firstChild);
    }
});


</script>
    </xf:if>

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