18
- 0
- Автор: ИИ
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Все привет.
И так сегодня решал не большую проблемку и по пути так чтобы было удобно пользователям, добавил там одну интересную и простую плюшку.
Поскольку такая проблема может быть у многих ,распишу по подробнее и про саму плюшку.
- Народ собираетесь переехать на другой хостинг или просто тормознуть сайт, чтобы потом возобновить, делайте полный бэкап сайта и базы
- Если у вас осталась только база и название шаблона, то не факт ,что все заработает все как надо, особенно если не сами делали правки стилей скриптов, поэтому не стесняйтесь просить помощи .
- На примере установили новый движок ,обновили базу, нашли этот шаблон , но элементарно не хватает в нем стилей для некоторых тегов , которые легко прописать и все будет красиво
- Не бойтесь просить помощи , это так напутствие
И так как я объяснил была проблемка что не было стилей для тега pre и поэтому текст ни как не выделялся на общем фоне ,решилось все просто в файл стилей шаблона добавил стили
Код:
pre {
border: 1px solid #141313;
padding: 10px;
background-color: #d7d2d2;
color: #eb0a0a;
font-family: monospace;
font-size: 16px;
overflow-x: auto;
overflow-y: hidden;
width: 90%;
}
Далее на изображении видите кнопку , это кнопка копирования содержимого блока PRE. Сейчас установим его.
Поскольку код у нас обычно в полной новости то и добавлять скрипт будем в файл news.full.tpl
Вот этот код добавляем в самый низ файла :
Код:
<script>
// Автоматически добавляем кнопки ко всем pre элементам
document.addEventListener('DOMContentLoaded', function() {
const preElements = document.querySelectorAll('pre');
preElements.forEach((pre, index) => {
if (!pre.id) {
pre.id = 'pre-' + index;
}
// Создаем контейнер
const container = document.createElement('div');
container.style.display = 'flex';
container.style.alignItems = 'center';
container.style.margin = '5px 0';
// Создаем кнопку с SVG
const button = document.createElement('button');
button.className = 'copy-btn';
button.title = 'Копировать код';
button.innerHTML = `
<svg viewBox="0 0 24 24">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
`;
// Создаем элемент для статуса
const statusSpan = document.createElement('span');
statusSpan.id = pre.id + '-status';
statusSpan.className = 'copy-status';
// Добавляем обработчик
button.onclick = function() {
copyPreContent(pre.id, button);
};
// Добавляем элементы в контейнер
container.appendChild(button);
container.appendChild(statusSpan);
// Вставляем контейнер после pre элемента
pre.parentNode.insertBefore(container, pre.nextSibling);
});
});
// Функция для копирования
function copyPreContent(preId, button) {
const preElement = document.getElementById(preId);
const statusElement = document.getElementById(preId + '-status');
if (!preElement) return;
const textToCopy = preElement.textContent;
navigator.clipboard.writeText(textToCopy)
.then(() => {
showStatus(statusElement, 'Скопировано!', 'success');
button.classList.add('copied');
setTimeout(() => {
button.classList.remove('copied');
hideStatus(statusElement);
}, 2000);
})
.catch(err => {
console.error('Ошибка:', err);
showStatus(statusElement, 'Ошибка копирования', 'error');
setTimeout(() => hideStatus(statusElement), 2000);
});
}
// Функции для отображения статуса
function showStatus(element, message, type) {
if (element) {
element.textContent = message;
element.className = 'copy-status show ' + type;
}
}
function hideStatus(element) {
if (element) {
element.className = 'copy-status';
}
}
</script>
<style>
.copy-btn {
margin-left: 10px;
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn:hover {
background: #f5f5f5;
border-color: #ccc;
}
.copy-btn.copied {
background: #e8f5e8;
border-color: #4caf50;
}
.copy-btn svg {
width: 16px;
height: 16px;
fill: #666;
}
.copy-btn:hover svg {
fill: #333;
}
.copy-btn.copied svg {
fill: #4caf50;
}
.copy-status {
margin-left: 10px;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.copy-status.show {
opacity: 1;
}
.copy-status.success {
color: #4caf50;
}
.copy-status.error {
color: #f44336;
}
</style>
Использует современный Clipboard API
Имеет fallback для старых браузеров
Показывает статус копирования
Работает с любым количеством блоков <pre>
Предоставляет визуальную обратную связь
И все , больше ни чего не надо P.S. Вот еще три варианта кнопок для скрипта ,найти и заменить соответствующий участок кода не сложно, можно и попросить помощи
Код:
// Вместо предыдущего button.innerHTML используйте этот вариант:
button.innerHTML = `
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
`;
// Или другой стиль иконки:
button.innerHTML = `
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M19 21H8V7h11m0-2H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m-3-4H4c-1.1 0-2 .9-2 2v14h2V3h12V1z"/>
</svg>
`;
// Или более минималистичная иконка:
button.innerHTML = `
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>
</svg>
`;
Можешь почитать и вот эту статейку "Хочу админку ,новую админку !!!"
Это тоже интересно
23.08.25Переезд часть 6 ..... ошибки
19.04.25Гостевая книга:
24.03.25Теги и Ключевые слова
15.05.25Плагин NSM
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.