Как не потерять правки в шаблоне. Делаем дочерний шаблон

Обновлено для 2.17.0

Зачем

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

Про modern

В этой записи я расскажу, как сделать дочерний шаблон от modern. В 2.14.0 появился новый шаблон на bootstrap, а также существенно улучшен механизм создания дочерних тем.

Поехали. Шаг 1. manifest.php

Откройте папку templates. Создайте в ней папку для будущего шаблона. Например zwd. Это имя, как пример, я буду использовать в дальнейшем
Создайте там файл manifest.php с таким содержанием

<?php
/**
 * Массив опций и свойств шаблона
 */
return [
    // Наследование от шаблона
    'inherit' => ['modern'],
    'title' => 'ZWD',
    // Авторство
    'author' => [
        'name' => 'Zau4man',
        'url'  => 'https://www.zau4man.ru',
        'help' => ''
    ],
    // Свойства шаблона
    'properties' => [
        'vendor'                     => 'bootstrap4',
        'style_middleware'           => 'scss',
        'has_options'                => true,
        'has_profile_themes_support' => false,
        'has_profile_themes_options' => false,
        'is_dynamic_layout'          => true,
        'is_backend'                 => false,
        'is_frontend'                => true
    ]
];
 

чтобы icms поняла, что ваш шаблон наследуется от шаблона modern

Шаг 2. Наслаждайтесь

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

Шаг 3. Копирование виджетов, строк и столбцов

Даже после этих шагов главная страница останется пустой, в разделе Виджеты админки сетка будет пустой, так как сетка bootstrap и расположение виджетов привязаны к шаблону.
Значит их надо скопировать, заменив имя шаблона со старого на новое. Именно скопировать, чтобы всегда можно было вернуться к modern шаблону и сделать новый дочерний шаблон.

С версии 2.14.1 появился штатный механизм копирования сетки и расположения виджетов. Над сеткой виджетов есть ссылка Импортировать схему. Жмем. В открывшемся окне указываем



Жмем Сохранить. Схема позиций и виджеты будут скопированы в дочерний шаблон. Вы можете смело их менять. Изменение схемы и виджетов не затронет Modern. И вы можете повторить Импорт заново, если что-то пойдет не так.

Шаг 4. Форма опций шаблона

Если не планируете что-то менять в настройках шаблона, этот шаг можно пропустить. Если есть желание добавить полей (и понимание, как это сделать), или удалить поля, то скопируйте из папки шаблона modern в свой шаблон файл options.form.php В скопированном файле замените Modern на Zwd в названии класса.

Шаг 5. Правки в scss

Очередной необязательный шаг для тех, кто хочет большего. Если вы планируете внести изменения в scss файлы, или добавить свои scss файлы в шаблон, то создайте в своем шаблоне папку scss. В ней папку theme. И скопируйте в нее только те файлы из папки templates/modern/scss/theme, которые планируете изменять. Копировать всю папку scss целиком не нужно.

Например, вы можете скопировать в /templates/ваш_шаблон/scss/theme/ (или создать с нуля) файл _custom.scss Внести в него изменения, и при нажатии «Сохранить и скомпилировать SCSS» в настройках темы, эти изменения будут включены в сгенерированный templates/ваш_шаблон/css/theme.css
Свои стили всегда лучше добавлять в /templates/ваш_шаблон/scss/theme/_custom.scss Так как он пустой в modern, и своими правками вы ничего «не затрете». Вы можете вносить правки и в другие scss файлы из папки theme, предварительно скопировав их в свой дочерний шаблон, если понимаете, для чего этот файл, и для чего ваши правки в нем.

Обратите внимание, что после этого стили библиотеки photoswipe будут созданы в вашем шаблоне, и потребуется скопировать изображения photoswipe из папки /templates/modern/images/photoswipe/ в /templates/ваш_шаблон/images/photoswipe/

Если вы планируете вносить правки в подпапки папки vendors, в дочернюю тему в папку vendors копируйте только те папки, которые вы изменяли. 

Например, в своих шаблонах я часто использую папку templates/мой_шаблон/scss/vendors/style для того, чтобы сгенерировать файл templates/мой_шаблон/css/style.css а затем подключаю его в шаблоне, как написано в Шаге 6

Например,

И это не все. Но следующая возможность больше пригодится для разработчиков шаблонов, шаблонов виджетов и т.п.
В 2.17.0 добавлен механизм генерации всех scss файлов в определенной папке в один файл стилей. Для этого создайте в вашем дочернем шаблоне в папке scss папку sections, а в ней еще одну папку. Находящиеся в ней scss файлы попадут в файл templates/ваш_шаблон/css/sections/имя_папки

Например,

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

Все

Теперь точно все.

Шаг 6. Необязательный

На примере нового шаблона посмотрим, для чего мы это делали.

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

В modern логотип выводится с помощью виджета template. Скопируем его шаблон из modern в свой шаблон. Затем откроем файл templates/zwd/widgets/template/template.tpl.php
И в самом конце файла замените

<?php if($core->uri) { ?>
        <a class="navbar-brand mr-3 flex-shrink-0" href="<?php echo href_to_home(); ?>">
            <img src="<?php echo $logos['small_logo']; ?>" class="d-sm-none" alt="<?php html($config->sitename); ?>">
            <img src="<?php echo $logos['logo']; ?>" class="d-none d-sm-block" alt="<?php html($config->sitename); ?>">
        </a>
    <?php } else { ?>
        <span class="navbar-brand mr-3 flex-shrink-0">
            <img src="<?php echo $logos['small_logo']; ?>" class="d-sm-none" alt="<?php html($config->sitename); ?>">
            <img src="<?php echo $logos['logo']; ?>" class="d-none d-sm-block" alt="<?php html($config->sitename); ?>">
        </span>
    <?php } ?>

на

<a class="navbar-brand mr-3 flex-shrink-0" href="<?php echo href_to_home(); ?>">
            <img src="/templates/<?php echo $this->name ?>/images/logo.png" class="" alt="<?php html($config->sitename); ?>">
        </a>
 

Конечно, файл logo.png должен находиться в папке images вашего шаблона, для примера это будет templates/zwd/images/logo.png

Перейдем на сайт. Вы увидите новый логотип



Подключим свой файл стилей

Это очень частая необходимость. Скопируем файл templates/modern/main.tpl.php из modern в свой шаблон Откройте и в начале файла добавьте имя своего файла в список. Должно получиться так для файла my.css

<?php $this->addMainTplCSSName([
            'theme','my'
        ]); ?>

Файл разместите в папке templates/zwd/css/my.css
Вы можете писать в нем свои стили. Они никуда не пропадут при обновлении.

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

Итог

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



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

Файлы дополнений сторонних авторов вы можете по-прежнему размещать в шаблоне default (так делается в большинстве архивов для установки), так как icms все равно проверит его на наличие файлов шаблона, даже если default не указан в списке родителей.
А в свой шаблон копировать только те файлы, которые вы планируете изменить.

Скачать шаблон-пример из этой записи вы также можете из файлов моего профиля.