Add Copy Code Button to XenForo WITHOUT Add-ons
Додавання кнопки "Скопіювати" у блоки коду XenForo без плагінів
Pure JavaScript & LESS solution for XF 2.x / Чистий JS та LESS для вашого форуму
Додавання кнопки "Скопіювати" у блоки коду XenForo без плагінів
Pure JavaScript & LESS solution for XF 2.x / Чистий JS та LESS для вашого форуму
 SUPPORT THE PROJECT / ПІДТРИМКА ПОРТАЛУЯкщо цей код став вам у пригоді і ви хочете подякувати за розвиток сайту — ви можете придбати FMJ Coins у нашому магазині або зробити добровільну пожертву на Bitcoin-гаманець: bc1q2umkchaalm4cdkl4qaqg6klwjy6s046q6c0k8g If this tutorial helped you, consider supporting the author by purchasing FMJ Coins or donating Bitcoin to the address above. Thank you! |
UA: Всім привіт! Цей гайд допоможе вам додати зручну кнопку "Copy" у всі блоки коду [ CODE ] на вашому форумі XenForo. Кнопка автоматично підлаштовується під заголовки, не дублюється при AJAX-завантаженнях і міняє колір на зелений при успішному копіюванні. Приклад роботи кнопки ви можете протестувати прямо зараз на нашому порталі fmj.world.
EN: Hello! I'm sharing a complete guide on how to add a clean, native-looking "Copy" button to all XenForo code blocks. It automatically appends to the title area (or code block corner if no title exists), supports AJAX page updates, and changes to a bold green "Copied!" state. You can see a live preview of this button right here on fmj.world.
🛠 Крок 1. Додавання Скрипта / Step 1. Adding JavaScript
UA: Перейдіть в панель адміна => Стилі => Шаблони вашого стилю. Знайдіть шаблон PAGE_CONTAINER та додайте наступний код прямо ПЕРЕД закриваючим тегом </body >:
EN: Go to your Admin Control Panel => Appearance => Styles & Templates. Open PAGE_CONTAINER template and paste this script right BEFORE the closing </body > tag:
JavaScript:
<script>
function initCodeCopyButtons() {
// Шукаємо абсолютно всі контейнери з кодом на форумі
document.querySelectorAll('.bbCodeBlock--code, .bbCodeBlock').forEach(codeBlock => {
// Якщо всередині вже є кнопка — ігноруємо, щоб не дублювати
if (codeBlock.querySelector('.bbCodeBlock-copyBtn')) return;
// Шукаємо сам блок із текстом коду
const codeElement = codeBlock.querySelector('.bbCodeBlock-code code, .bbCodeBlock-code pre, pre');
if (!codeElement) return;
// Шукаємо заголовок (де пише назву мови).
// Якщо його немає (буває при звичайному [CODE]), беремо сам блок як основу
let titleArea = codeBlock.querySelector('.bbCodeBlock-title');
const copyBtn = document.createElement('button');
copyBtn.className = 'bbCodeBlock-copyBtn';
copyBtn.textContent = 'Copy';
copyBtn.type = 'button';
// Якщо XenForo не має рідного заголовка в цьому блоці,
// ми змусимо кнопку гарно стати в куточок самого блоку коду
if (!titleArea) {
codeBlock.style.position = 'relative';
copyBtn.style.top = '10px';
copyBtn.style.right = '15px';
codeBlock.appendChild(copyBtn);
} else {
// Якщо рідний заголовок є — вставляємо кнопку в нього
titleArea.appendChild(copyBtn);
}
// Логіка кліку та копіювання
copyBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
// Беремо чистий текст без системної розмітки
const codeText = codeElement.textContent || codeElement.innerText;
navigator.clipboard.writeText(codeText.trim()).then(() => {
copyBtn.textContent = 'Copied!';
copyBtn.classList.add('is-copied');
setTimeout(() => {
copyBtn.textContent = 'Copy';
copyBtn.classList.remove('is-copied');
}, 2000);
}).catch(err => {
console.error('Помилка копіювання:', err);
});
});
});
}
// Запуск та підхоплення AJAX
document.addEventListener('DOMContentLoaded', initCodeCopyButtons);
if (window.jQuery) {
jQuery(document).on('xf:page-init xf:layout', () => setTimeout(initCodeCopyButtons, 50));
jQuery(document).ajaxComplete(() => setTimeout(initCodeCopyButtons, 100));
}
setInterval(initCodeCopyButtons, 1000); // Кожну секунду перевіряємо сторінку на нові коди
</script>
Крок 2. Стилізація Кнопки / Step 2. Styling the ButtonUA: Тепер перейдіть у шаблон extra.less вашого стилю та вставте ці CSS/LESS правила в самий кінець:
EN: Open your extra.less template and append the following style rules at the very bottom:
CSS:
/* КНОПКА COPY ДЛЯ БЛОКІВ КОДУ */
.bbCodeBlock-title {
position: relative !important; /* Робимо заголовок точкою відліку */
}
.bbCodeBlock-copyBtn {
position: absolute !important;
right: 15px !important; /* Дистанція від правого краю рамки */
top: 50% !important;
transform: translateY(-50%) !important; /* Ідеальне центрування по вертикалі */
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
/* Копіюємо рідний шрифт та колір тексту мови */
font-family: inherit !important;
font-size: 12px !important; /* Або inherit, якщо хочеш )} */
color: inherit !important;
opacity: 0.6 !important; /* Трохи приглушена */
cursor: pointer !important;
transition: opacity 0.2s ease, color 0.2s ease !important;
outline: none !important;
z-index: 10 !important;
}
/* Ефект при наведенні */
.bbCodeBlock-copyBtn:hover {
opacity: 1 !important;
text-decoration: none !important; /* ФІКС: ПРИБРАЛИ ПІД КРЕСЛЕННЯ */
}
/* Коли скопійовано — акуратно підсвічуємо зеленим */
.bbCodeBlock-copyBtn.is-copied {
opacity: 1 !important;
color: #5cb85c !important;
text-decoration: none !important;
font-weight: bold !important;
}
Готово! Якщо виникли питання щодо кастомізації під ваш унікальний стиль — пишіть у коментарях!
Done! If you have any questions regarding custom themes, feel free to drop a reply below!
Done! If you have any questions regarding custom themes, feel free to drop a reply below!
Останнє редагування: