إضافة زر نسخ الكود في XenForo

كيفية إضافة زر نسخ الكود في XenForo بسهولة

مقدمة 

إذا كنت تدير منتدى XenForo وترغب في تسهيل عملية نسخ الأكواد من صناديق [CODE] [/CODE]، يمكنك ببساطة إضافة زر نسخ تلقائي باستخدام JavaScript و CSS فقط. في هذا الدليل، سنشرح الطريقة خطوة بخطوة.

1. إضافة كود JavaScript

أضف الكود التالي في قالب XenForo داخل footer أو في قسم JavaScript المخصص:

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".bbCodeBlock").forEach(function(block) {
        let button = document.createElement("button");
        button.innerText = "📋 نسخ";
        button.className = "copyButton";
        block.appendChild(button);

        button.addEventListener("click", function() {
            let codeContent = block.querySelector(".bbCodeBlock-content code");
            if (codeContent) {
                navigator.clipboard.writeText(codeContent.innerText).then(() => {
                    button.innerText = "✅ تم النسخ!";
                    setTimeout(() => button.innerText = "📋 نسخ", 2000);
                }).catch(err => console.error("فشل النسخ:", err));
            }
        });
    });
});
            

2. إضافة كود CSS لتحسين المظهر

بعد إضافة JavaScript، ضع الكود التالي في extra.less أو أي ملف CSS مخصص:

.copyButton {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
}
.copyButton:hover {
    background: #0056b3;
}
.bbCodeBlock {
    position: relative;
    padding-top: 30px;
}
            

كيف يعمل هذا الكود؟

• ✔️ يحدد جميع مربعات [CODE] [/CODE] في المنتدى تلقائيًا.
• ✔️ يضيف زر "📋 نسخ" في أعلى كل مربع كود.
• ✔️ عند الضغط على الزر، يتم نسخ محتوى الكود إلى الحافظة مباشرةً.
• ✔️ يعرض إشعار ✅ "تم النسخ!" لفترة قصيرة، ثم يعود الزر لحالته الأصلية.

الخاتمة

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

💡 إذا واجهت أي مشاكل، أخبرنا بها في التعليقات وسنساعدك!

🔗 منتديات العرائش