Кастомизация шаблона DLE под свой дизайн: практические приёмы

Кастомизация DLE обычно ломается не из-за CSS, а из-за правок в одном огромном main.tpl. Через несколько месяцев в нём смешиваются шапка, рекламные блоки, условия показа и разметка контента, а обновление движка превращается в ручное сравнение сотен строк. Ниже — рабочая схема для DLE 17.x: как собрать собственную тему, разделить шаблон на части и оставить себе возможность обновлять систему без полной переделки сайта.

Сначала определите границы темы

Шаблон DLE отвечает за HTML-представление, а не за бизнес-логику движка. Поэтому дизайн лучше менять внутри каталога темы, не редактируя файлы самого ядра и стандартные PHP-модули.

Перед началом подготовьте:

• резервную копию базы данных и каталога сайта;
• доступ к файлам по SFTP, SSH или через панель хостинга;
• локальную копию текущей темы;
• браузер с инструментами разработчика;
• отдельную тестовую копию сайта, если проект получает трафик.

Основные файлы темы обычно находятся в каталоге templates/имя_темы/. Названия и состав отдельных шаблонов могут отличаться между версиями DLE и конкретными темами, поэтому перед правкой проверьте структуру именно вашей установки.

Хороший шаблон DLE — это не самый красивый main.tpl, а тот, в котором через полгода понятно, где менять шапку, карточку новости и мобильное меню.

Не превращайте main.tpl в единственный файл проекта

main.tpl должен описывать каркас страницы: подключение ресурсов, шапку, навигацию, основной контейнер и подвал. Повторяющиеся части лучше выносить в отдельные файлы через механизм включения шаблонов.

Упрощённый каркас может выглядеть так:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="{charset}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    {headers}
    <link rel="stylesheet" href="{THEME}/css/style.css">
</head>
<body>
    {include file="header.tpl"}

    <main class="site-container">
        {content}
    </main>

    {include file="footer.tpl"}
</body>
</html>

Синтаксис {include file="..."}, переменные {content}, {title}, {headers} и {THEME} относятся к шаблонной системе DLE. Точный набор доступных тегов зависит от версии и контекста вывода, поэтому незнакомые переменные сначала сверяйте с документацией вашей версии.

Что выносить в отдельные файлы

• header.tpl — логотип, меню, поиск и верхняя панель;
• footer.tpl — подвал, ссылки и нижние скрипты;
• sidebar.tpl — боковая колонка, если она повторяется на разных страницах;
• login.tpl — форма авторизации или блок профиля;
• шаблоны новостей, комментариев и списков — в отдельные файлы, если их структура заметно отличается.

Не дробите файл ради самого дробления. Если блок используется один раз и занимает несколько строк, отдельный файл не обязательно упростит проект.

Условные блоки: показывайте элементы только там, где они нужны

Одна из сильных сторон DLE — условия в шаблонах. С их помощью можно не дублировать всю страницу для главной, полной новости и статической страницы.

<header class="site-header">
    {include file="header.tpl"}
</header>

[available=main]
    <section class="hero">
        <h1>Последние материалы</h1>
        <p>Короткое описание раздела сайта.</p>
    </section>
[/available]

[not-available=main]
    <nav class="breadcrumbs">{navigation}</nav>
[/not-available]

<section class="content-layout">
    <div class="content-column">{content}</div>
</section>

Условие [available=main] предназначено для показа блока на главной странице, а [not-available=main] — для остальных страниц. Такие конструкции нужно закрывать парными тегами. Если условие не срабатывает, сначала проверьте фактический URL и режим страницы, а не переписывайте разметку.

Для нескольких режимов используйте отдельные ветки только там, где действительно меняется интерфейс. Большой набор условий в одном файле сложнее тестировать, чем два небольших шаблона.

Выберите подход к перестройке темы

Есть три практических сценария. Выбор зависит от того, насколько сильно новый дизайн отличается от текущей темы и нужно ли сохранить её обновляемость.

Для большинства проектов безопаснее второй вариант: скопировать тему, дать ей отдельное имя и менять уже копию. Так можно быстро вернуться к рабочей версии, если новый шаблон вызовет ошибку или нарушит вывод контента.

Стили подключайте через тему, а не через случайные вставки

Все CSS-файлы и изображения держите внутри каталога темы. В ссылках используйте переменную {THEME}, чтобы тема не зависела от конкретного домена или глубины каталога.

<link rel="stylesheet" href="{THEME}/css/style.css">
<link rel="stylesheet" href="{THEME}/css/components.css">

Разделите стили хотя бы на базовые правила и компоненты. В первом файле оставьте типографику, сетку и переменные, во втором — карточки, меню, формы и модальные окна. Не добавляйте один и тот же класс сначала в стандартный CSS, затем в пользовательский и наконец в код страницы: каскад быстро становится непредсказуемым.

:root {
    --color-text: #202124;
    --color-muted: #6b7280;
    --color-accent: #1769e0;
    --content-width: 1180px;
}

.site-container {
    width: min(100% - 32px, var(--content-width));
    margin-inline: auto;
}

.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
}

@media (max-width: 800px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
}

Такой CSS-фрагмент совместим с современными браузерами, но не заменяет проверку на реальных устройствах. Особенно внимательно тестируйте горизонтальный скролл, длинные заголовки и изображения без заданных размеров.

Карточка новости: меняйте разметку, не ломая данные

При переделке списка новостей не удаляйте служебные теги только потому, что они не видны в макете. Сначала определите, какие данные карточка должна показывать: заголовок, дату, автора, категорию, изображение и краткое описание. Затем оставьте только нужные элементы, но сохраняйте проверенные DLE-теги из исходного шаблона вашей версии.

Практический порядок такой:

1. Скопируйте исходный шаблон короткой новости в отдельный файл и сохраните его рабочую версию.
2. Замените внешнюю HTML-структуру: обёртку, сетку и классы, не меняя теги данных без проверки документации.
3. Откройте страницу со списком новостей и проверьте длинный заголовок, отсутствие изображения и несколько категорий.
4. Проверьте полную новость, комментарии, поиск, архив и страницу ошибки, если эти режимы входят в дизайн.

Изображения лучше ограничивать CSS, а не обрезать исходные файлы вручную. Так редактор сможет загружать материалы в привычном формате, а карточка сохранит одинаковую высоту.

Что ломается чаще всего

После сохранения пропала страница

Частая причина — незакрытый условный блок или повреждённая кавычка в атрибуте. Верните последнюю рабочую копию файла и добавляйте изменения небольшими порциями.

В браузере виден старый дизайн

Проверьте, активна ли новая тема в настройках DLE, затем очистите кеш движка и кеш браузера. Если версия темы переключается параметром в адресе или настройкой пользователя, проверяйте страницу в приватном окне.

Не загружаются CSS и изображения

Откройте вкладку Network в инструментах разработчика. Ошибка 404 обычно означает неправильный путь или имя файла. Для ресурсов темы используйте {THEME}, а не путь, рассчитанный под локальную папку.

На мобильном экране появляется горизонтальная прокрутка

Ищите элементы с фиксированной шириной, длинные URL, таблицы и изображения, которым задана ширина больше контейнера. Проверяйте не только главную, но и страницу полной новости с реальным текстом.

После обновления DLE часть блоков перестала выводиться

Сравните изменённые шаблоны с чистой темой той же версии. В DLE могли появиться новые обязательные теги или измениться доступность отдельных переменных. Не переносите шаблоны между версиями без проверки документации и тестовой установки.

Где кастомизация начинает мешать

Собственная тема перестаёт быть удобной, когда в ней много копий одного блока, десятки исключений по URL и CSS с постоянным повышением специфичности. Это сигнал остановить визуальные правки и пересобрать структуру: вынести повторяемые части, сократить условия и удалить неиспользуемые стили.

Не пытайтесь решить шаблонами задачи, которые относятся к модулю, кешированию или серверу. Форму, которая должна сохранять данные нестандартным способом, безопаснее реализовать отдельным расширением или штатным механизмом DLE, а не набором скрытых полей и JavaScript в main.tpl.

Сноска. Каскад CSS — правило, по которому браузер выбирает итоговый стиль, если несколько селекторов задают разные значения одному элементу. Чем выше специфичность и ближе правило к элементу, тем сложнее его переопределить.

Что делать дальше

После сборки темы создайте чек-лист релиза: главная, список категории, полная новость, поиск, регистрация, авторизация, комментарии, мобильное меню и страница 404. Затем сохраните тему в системе контроля версий или хотя бы в архиве с датой и номером версии DLE.

В продакшене следите за четырьмя показателями: ошибки 404 ресурсов, ошибки JavaScript, время загрузки страниц и доля мобильных пользователей, у которых появляется горизонтальный скролл. После этого отдельно проверьте кеширование и оптимизацию изображений — это следующий слой работы, а не часть перестройки HTML.