Кастомизация шаблона DLE под свой дизайн с первого раза

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

Что подготовить до начала

Ниже — схема для DataLife Engine 17.x. Точный минорный релиз проверьте в панели управления: в разных версиях названия отдельных настроек и набор шаблонных тегов могут отличаться.

• доступ к файлам сайта по SFTP, FTP или через панель хостинга;
• доступ к админ-панели DLE с правом работы с шаблонами;
• копию базы данных и каталога /templates/;
• готовый макет с состояниями главной страницы, новости, списка категорий, поиска, регистрации и комментариев;
• локальный редактор с подсветкой HTML, CSS и JavaScript;
• отдельный тестовый домен или копию сайта, если проект уже получает посетителей.

Не редактируйте файлы ядра. Шаблон отвечает за разметку, а файлы в /engine/ — за работу движка. Изменения в ядре сложнее обновлять и проверять.

Хороший шаблон DLE — это не только красивый main.tpl. Это набор экранов, в котором каждый системный тег сохранил своё место и смысл.

Шаблонный тег — специальная запись DLE в фигурных скобках или квадратных блоках. Движок заменяет её контентом либо показывает нужный участок страницы при выполнении условия.

Шаг 1. Сделайте копию стандартного шаблона

Скачайте каталог текущей темы из /templates/ целиком. Если сайт использует стандартный шаблон Default, не превращайте его в единственную рабочую копию: создайте рядом каталог с собственным именем, например mydesign. Имя должно быть простым: латинские буквы, цифры и дефис.

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

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

Шаг 2. Разберите роли файлов DLE

Не начинайте с массовой замены разметки. Сначала найдите, какой файл отвечает за каждый экран.

• main.tpl — общий каркас: шапка, навигация, контейнер контента, боковые колонки и подвал;
• shortstory.tpl — карточка новости в списках и на главной странице;
• fullstory.tpl — полная новость;
• static.tpl — статическая страница;
• comments.tpl, addcomments.tpl — список комментариев и форма отправки;
• navigation.tpl — постраничная навигация;
• search.tpl, feedback.tpl, login.tpl, registration.tpl — отдельные системные формы;
• style/ и папки изображений — стили, шрифты и графика темы.

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

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

Шаг 3. Перенесите дизайн в общий каркас

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

Минимальная схема каркаса выглядит так:

<!doctype html>
<html lang="ru">
<head>
    {headers}
    <link rel="stylesheet" href="{THEME}/style/style.css">
</head>
<body>
    <header class="site-header">
        <a class="site-logo" href="/">Название сайта</a>
        {login}
    </header>

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

    <footer class="site-footer">Подвал сайта</footer>
</body>
</html>

Это каркас для DLE 17.x, а не готовая тема. Сохраните все обязательные теги из исходного шаблона вашей версии, включая служебные элементы в <head>. Если сомневаетесь в назначении тега, сравните его с копией стандартной темы и документацией DLE.

Проверка: на главной открывается список новостей, в категории — список этой категории, а на странице новости отображается полный текст. Если вместо контента пустой блок, первым делом ищите удалённый или перемещённый системный тег.

Шаг 4. Перенесите карточку новости

Стили карточки не должны зависеть от того, где она показана. Один и тот же shortstory.tpl может выводиться на главной, в категории и в результатах поиска, поэтому не привязывайте его к единственному URL.

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

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

Проверка: откройте карточку с коротким и длинным заголовком, без изображения и с несколькими метками. Ни один блок не должен вылезать за пределы карточки или оставлять необъяснимый пустой отступ.

Шаг 5. Соберите CSS без конфликтов

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

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

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

.story-card__title {
    margin: 0;
    color: var(--color-text);
}

.story-card__title a {
    color: inherit;
    text-decoration: none;
}

.story-card__title a:hover {
    color: var(--color-accent);
}

Если стандартная тема подключает несколько CSS-файлов, временно оставьте их подключёнными и отключайте по одному. Так проще понять, какой файл отвечает за конфликт.

Проверка: в инструментах разработчика браузера нет ошибок загрузки CSS, а в мобильном режиме ширина страницы не становится больше ширины экрана.

Шаг 6. Проверьте формы и условия DLE

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

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

Проверка: пройдите сценарий в двух состояниях — гостем и авторизованным пользователем. Гость видит форму входа, пользователь видит меню профиля, а отправка комментария не ломает страницу.

Если не получилось

• 404 Not Found для CSS или изображения. Проверьте регистр букв, путь через {THEME} и наличие файла на сервере. На Linux Style.css и style.css — разные имена.
• На странице остался текст вроде {content}. Файл не обработан как шаблон DLE либо тег записан с ошибкой. Сравните написание с исходной темой вашей версии.
• Появился PHP Parse error после правки шаблона. Ищите незакрытый PHP-фрагмент или случайно вставленный серверный код. В обычном HTML-шаблоне PHP лучше не использовать.
• Форма есть, но кнопка ничего не делает. Проверьте, что вместе с оформлением не были удалены служебные поля формы и обязательные атрибуты.
• Изменения не видны. Очистите кеш DLE, кеш браузера и кеш прокси, если он есть. Затем откройте страницу в приватном окне.

Проверка перед публикацией

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

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

После публикации включите мониторинг ошибок сервера и регулярно проверяйте страницы, которые редко открывают: регистрацию, восстановление пароля, поиск и форму обратной связи. Перед обновлением DLE сохраняйте резервную копию темы и список изменённых системных тегов. Следующим этапом вынесите повторяющиеся визуальные элементы в единые CSS-классы, а не копируйте стили между shortstory.tpl и fullstory.tpl.