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

+30
2774

Зачем

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

Про modern

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

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

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

  1. <?php
  2. /**
  3.  * Массив опций и свойств шаблона
  4.  */
  5. return [
  6. // Наследование от шаблона
  7. 'inherit' => ['modern'],
  8. 'title' => 'ZWD',
  9. // Авторство
  10. 'author' => [
  11. 'name' => 'Zau4man',
  12. 'url' => 'https://www.zau4man.ru',
  13. 'help' => ''
  14. ],
  15. // Свойства шаблона
  16. 'properties' => [
  17. 'vendor' => 'bootstrap4',
  18. 'style_middleware' => 'scss',
  19. 'has_options' => true,
  20. 'has_profile_themes_support' => false,
  21. 'has_profile_themes_options' => false,
  22. 'is_dynamic_layout' => true,
  23. 'is_backend' => false,
  24. 'is_frontend' => true
  25. ]
  26. ];
  27.  
чтобы icms поняла, что ваш шаблон наследуется от шаблона modern

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

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

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

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

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

Иллюстрация

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

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

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

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

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

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

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

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

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

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

  1. <?php if($core->uri) { ?>
  2. <a class="navbar-brand mr-3 flex-shrink-0" href="<?php echo href_to_home(); ?>">
  3. <img src="<?php echo $logos['small_logo']; ?>" class="d-sm-none" alt="<?php html($config->sitename); ?>">
  4. <img src="<?php echo $logos['logo']; ?>" class="d-none d-sm-block" alt="<?php html($config->sitename); ?>">
  5. </a>
  6. <?php } else { ?>
  7. <span class="navbar-brand mr-3 flex-shrink-0">
  8. <img src="<?php echo $logos['small_logo']; ?>" class="d-sm-none" alt="<?php html($config->sitename); ?>">
  9. <img src="<?php echo $logos['logo']; ?>" class="d-none d-sm-block" alt="<?php html($config->sitename); ?>">
  10. </span>
  11. <?php } ?>
на

  1.  
  2. <a class="navbar-brand mr-3 flex-shrink-0" href="<?php echo href_to_home(); ?>">
  3. <img src="/templates/<?php echo $this->name ?>/images/logo.png" class="" alt="<?php html($config->sitename); ?>">
  4. </a>
  5.  
Конечно, файл logo.png должен находиться в папке images вашего шаблона, для примера это будет templates/zwd/images/logo.png

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

Иллюстрация

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

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

  1. <?php $this->addMainTplCSSName([
  2. 'theme','my'
  3. ]); ?>
Файл разместите в папке templates/zwd/css/my.css
Вы можете писать в нем свои стили. Они никуда не пропадут при обновлении.

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

Итог

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

Иллюстрация

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

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

Скачать шаблон-пример из этой записи вы также можете из файлов моего профиля.
0
Реклама Реклама #
0
islyaeFF islyaeFF 9 месяцев назад #
Вот спасибо!
0
vikont vikont 9 месяцев назад #
Все замечательно! +
Но есть какая то непонятка, при попытке сохранить какие либо изменения в настройках нового шаблона выскакивает куча сообщений о невозможности сохранения в файле .... с кучей вариантов папок в файле .../styles.css и все в новом шаблоне, но там нет таких файлов!
Скопировать все сообщения не получается, быстро скрываются. Вот типа такого
Спойлер
И если раньше цвет шапки менялся при замене основного цвета, то теперь это не работает

На шаблоне Modern все работает нормально.
0
vikont vikont 9 месяцев назад #
Пока тестировал, вышел релиз. Все заново переустановил.
Работает без проблем! Спасибо!
0
Asket Asket 9 месяцев назад #
Спасибо за Ваш труд, очень полезная информация.
0
rshabalin rshabalin 9 месяцев назад #
Как исправить Warning: var_export does not handle circular references in /home/r/rshabalin/rybalka-rirov/public_html/system/core/cachefiles.php on line 26
0
IamB IamB 9 месяцев назад #
0
hard990 hard990 8 месяцев назад #
А как быть с scss стилями в частности с custom.scss? Движок компилирует из шаблона modern и игнорирует его в моём. Принципе не проблема, но хотелось всё иметь в своём шаблоне
+2
Zau4man Zau4man 8 месяцев назад #
Тут если вы решили создать _custom.scss , то придется скопировать всю папку scss в свой дочерний шаблон. И разместить уже в ней _custom.scss
Только так.
А почему
0
hard990 hard990 8 месяцев назад #
Понятно, спасибо! Тогда такой вопрос, а как быть со стилями styles.css, которые находятся в большей части контроллеров. При компиляции происходит замена файлов styles.css из шаблона modern и после этого приходится делать правки заново
0
hard990 hard990 8 месяцев назад #
Перенес всю папку scss, эффект тот же
+1
Zau4man Zau4man 8 месяцев назад #
Забыл. Да, в 2.14.0 генерирует из modern
В 2.14.1 будет поправлено, и будет генерировать из шаблона, выбранного в настройках, если в нем есть папка scss.
Обновление будет скоро.
+1
Zau4man Zau4man 8 месяцев назад #
Потестировать можно уже сейчас на версии с гита
0
hard990 hard990 8 месяцев назад #
Спасибо. Будем ждать!
Осталось понять откуда лезут styles.css после компиляции и постоянно заменяют внесенные в них изменения. Менял как в своем шаблоне, так и в modern. Эффект один и тот же
+1
Zau4man Zau4man 8 месяцев назад #
В смысле лезут?

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

Вам надо добавлять свои стили в _custom.scss
Или в свой файл стилей, подключив его в main.tpl.php
И писать свои стили так, чтобы перекрыть те стили, что вам не нравятся.

Поверьте. В масштабах сайта лишние 2-3 кб ваших стилей, перекрывающих стили modern, это копейки. Зато они сэкономят вам уйму времени в попытках заново внести правки в системные файлы.
Это как попытаться из bootstrap выпилить куски кода, которые не используются в вашем шаблоне. Да, сайт станет весить чуточку меньше, но вы не сможете корректно перейти на новую версию bootstrap - выпиливать придется снова.
0
Nikolay Nikolay 8 месяцев назад #
Подключил все работает. Спасибо! В настройке темы есть вкладка Bootstrap где можно добавить переопределяемые переменные, вопрос - в каком файле они пропишутся?
+1
Zau4man Zau4man 8 месяцев назад #
Скорее всего, как и все опции шаблона, в system/config/theme_modern.yml
+3
Scythian Scythian 8 месяцев назад #
Все работает! Огромное спасибо!
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
Откройте раздел админки Компоненты - ZWD
Скачал, но не вижу его в списке компонентов. что не так делаю?
0
Nikolay Nikolay 8 месяцев назад #
Только начал изучать вторую версию, делал так: дочерний шаблон и компонент ZWD устанавливал через установщик, который находится в странице компонентов.
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
покажите пошагово на скриншотах. установка прошла успешно, а в дополнениях zwd компонента не вижу
+1
Nikolay Nikolay 8 месяцев назад #
Надо посмотреть в базе он установлен, если нет переустановить
+1
Nikolay Nikolay 8 месяцев назад #
+1
Nikolay Nikolay 8 месяцев назад #
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
Кто может подсказать, почему у меня не устанавливается Компонент ZWD? Ни в панели в списке компонентов, ни в базе его нет. Хотя пишет что Пакет дополнения был успешно установлен.
+1
Nikolay Nikolay 8 месяцев назад #
Ignat а вы точно компонент ZWD устанавливаете? или дочернею тему ZDW?
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
спасибо за уточнение)) так и есть, устанавливат тему. внимательно, и еще раз вниметельность, друзья facepalm
0
Юран Юран 8 месяцев назад #
Zau4man, на прошлой версии icms устанавливал дополнение от Evg вот это /users/files/download7720.html
Там, чтобы нормально отображались группы на которые подписан я добавлял такой фрагмент в конец файла /templates/default/css/theme-widgets.css
Код PHP:
  1. /*меню мои подписки*/
  2. .my-logo {width: 30px;float: left;margin-right: 3px;}
  3. .my-logo img {width:24px;border-radius: 50px;}
  4. .my-space {clear: both;margin-bottom: 15px;height: 24px;}
  5. a.space {color:#899ca8;text-decoration: none;font-size: 14px;}
  6. a.space:hover, a.space.activ {color: #f56400;}
  7. a.space span {margin-top: 4px;position: absolute;}
  8. .my-menu .body {margin: 0 0 0 10px;}
  9. .my-menu h4.title {text-transform: uppercase;font-size: 12px;border-bottom: 0;padding: 1px 0 10px 10px;margin: 0;color:#899ca8;letter-spacing: 1px;
  10. }
Теперь понятно, что вносить изменения в стили нет смысла, потому что все компилируется через scss. Я проделал все, что Вы описали здесь, с созданием дочерней темы, установкой компонента ZWD и копированием через него в свою тему. Все работает нормально.
Единственно не получается вот в том виджете изменить стили, оно выводится тупо в этот дефолтный виджет и не выстраивается нормально столбиком - слева логотип группы, справа название. Файл my.css c содержимым что написал выше я создал, в своем дочернем шаблоне в main.tpl.php я его подключил.... Но не работает:( Я знаю, что 100% неправильно сделал, нужно в _custom.scss наверное этот фрагмент прописать, но там синтаксис какой то замудреный:)) Немного не так как в обычных css. Zau4man, подскажи пожалуйста как правильно куда прописать, чтобы в виджете подправить стиль.
0
Zau4man Zau4man 8 месяцев назад #
В 2.14.1 вам надо добавлять свои стили в _custom.scss, предварительно скопировав папку scss из modern шаблона в дочерний
Или в свой файл стилей, подключив его в main.tpl.php как описано в посте выше

Если стили не работают, возможно, изменилась верстка. Или стили modern перекрывают ваши правки.
Создайте тему на форуме, приложите ссылку на страницу с разработкой.
Проверим, есть ли правки в скомпилированном theme.css
Проверим, не мешает ли что-то стилям

А гадать на гуще, и тем более проверять самому, не хочется.
0
Юран Юран 8 месяцев назад #
Спасибо за ответ. Я скопировал scss из модерна в свой и подключил в main.tpl.php этот созданный my.css.... Туплю конечно по полной:)) Наверное надо либо так либо так. Сейчас еще просмотрю, может само дополнение что не так...
0
Nikolay Nikolay 8 месяцев назад #
В дочернем шаблоне уже подключен my.css. Посмотрел ваше дополнение в нем вообще другие классы.
0
Юран Юран 8 месяцев назад #
Разобрался:) Проблема была в шаблоне дополнения.
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
Не совсем понял, или так и так без разницы что лучше? скачать тему zwd у Zau4man в файлах, или создать как в Шаге номер 1?
+1
Юран Юран 8 месяцев назад #
Я так понял или свой my.css подключаешь в своем main.tpl.php или убрать my.css и естественно не подключать ничего. А вместо этого, то что прописывал в my.css - это пишешь в _custom.scss, потом в админке жмешь сохранить и компилировать scss и тогда твои изменения из _custom.scss каким то образом внедряются в theme.css и работает. А тем zwd у Zau4man в файлах я не скачивал и не устанавливал себе? Зачем если мы сами делаем свой дочерний шаблон? Я поставил его компонент, потом скопировал как написано и все. Предварительно конечно папку шаюлона, файл manifest.php и далее по тексту.
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
Все получилось, кроме одного, это невозможно скопировать логотип, и вообще в дочерней теме логотип невозможно изменить.да и в дочерней он появился какой то другой:

вот не меняется логотип и все. лого меняю в свг. в модерне все меняется нормально. У вас норм все с логотипом? Что я сделал: скачал дочернюю тему ZWD в файлах Заучмана, установил ее и поставил по умолчанию. Далее скачал компонент ZWD, далее зашел в компонент ZWD и из шаблона Модерн скопировал виджеты в дочерний шаблон ZWD. и все чудесно, еще раз повторяю, кроме логотипа.
0
Nikolay Nikolay 8 месяцев назад #
Все работает, просто не внимательно прочитали шаг №5. Замените файл templates/zwd/widgets/template/template.tpl.php из шаблона Modern
0
Антон {ignat} Антон {ignat} 8 месяцев назад #
Цитата:
Zau4man:
Например, хотим установить новый логотип не через опции админки, а вручную в коде
читал я шаг №5, но мне не нужно логотип меня в коде. по идеи автора, дочерняя тема полноценно установлена если логотип меняется в админке.
0
Юран Юран 8 месяцев назад #
Все получилось, кроме одного, это невозможно скопировать логотип, и вообще в дочерней теме логотип невозможно изменить.да и в дочерней он появился какой то другой:
Ничего не понятно... почему невозможно изменить и какой другой он появляется? Я просто настройки -> настройки темы -> логотип - выбрал файлы в png формате и загрузил, все там меняется, логотип меняется из админки. Или я не понял о чем речь вообще....
+1
Nikolay Nikolay 8 месяцев назад #
Речь шла если устанавливаем шаблон ZWD то там в файле templates/zwd/widgets/template/template.tpl строка 71 логотип вписан жестко /images/logo.png" если его изменить, надо поменять картинку в папке /images/ в формате png. Чтоб изменить логотип через адмику надо заменить файл template.tpl в шаблоне ZWD взять его в шаблоне Modern.
0
Юран Юран 7 месяцев назад #
Блин, теперь у меня ерунда какая то с логотипом.... На нескольких сайтах все получилось нормально. Теперь вставляю картинку лого, обычный png размером 60х64 px из админки - он почему то у меня увеличивается до размера 1200х1164 px...Причем и на модерн и на дочерней теме... Есть какие то предположения ребята? Куда копать подскажите пожалуйста.

Inna Inna 7 месяцев назад #
Комментарий удален
+1
Make Make 7 месяцев назад #
Может быть, потому что это личное дело каждого - что выкладывать и что писать?
+2
Zau4man Zau4man 7 месяцев назад #
Вы с какой целью интересуетесь?
Если подискутировать, то создайте тему на форуме, я обязательно в ней отпишусь.
0
fincheck fincheck 7 месяцев назад #
Не сочтите за наезд, но симметрично)) А какие ваши шаблоны или может записи в блогах есть?
0
fincheck fincheck 7 месяцев назад #
К Inna вопрос.
+2
Zau4man Zau4man 7 месяцев назад #
Inna существенно вложилась в складчину modern.
Просто, чтобы не продолжать тут флуд, лучше переехать в тему форума.
0
fincheck fincheck 7 месяцев назад #
Просьба, удалите мой вопрос.
0
KoRn KoRn 6 месяцев назад #
Здравствуйте, поправьте пожалуйста.
Не забывайте увеличивать счётчик в Настройки сайта во вкладке Внешний вид, чтобы браузер увидел изменения в стилях, а не грузил из кеша.
Теперь вкладка "Интерфейс". С версии 2.14.1
0
KoRn KoRn 6 месяцев назад #
И вопрос.
Если я создаю свой шаблон для виджета, я могу разместить его в своем шаблоне? Используя аналогичный путь и папки как в модерн.
0
Zau4man Zau4man 6 месяцев назад #
Можете. И лучше именно так и делать.
Тогда будет сразу понятно, что этот файл или новый, или измененный.
0
Tolya Tolya 6 месяцев назад #
И только у меня одного сразу 503 шаблон не найден?
0
Олег Васильевич я Олег Васильевич я 6 месяцев назад #
Tolya, решили разделить славу местных загадывателей загадок? stuk
0
Tolya Tolya 6 месяцев назад #
rofl Решил слиться с общей массой.

KoRn спрашивает:
Если я создаю свой шаблон для виджета, я могу разместить его в своем шаблоне?
Zau4man отвечает
Можете. И лучше именно так и делать.
и тут Я
И только у меня одного сразу 503 шаблон не найден?

Но я потом вспомнил, у меня 503 было когда я создаю своё поле, и файл шаблона ложу только в дочерний шаблон, то получаю 503 (что шаблона нет в папки дефолт) . И ещё с чем-то так было, не помню ))) И сейчас не вспомню, надо свой шаблон пересматривать...

А разговор о виджитах rofl а вот сними что-то не помню насколько всё хорошо)) но скоро узнаем от KoRn laugh
0
Олег Васильевич я Олег Васильевич я 6 месяцев назад #
у меня 503 было когда я создаю своё поле, и файл шаблона ложу только в дочерний шаблон, то получаю 503 (что шаблона нет в папки дефолт)
Так есть же форум на этом сайте. Давайте не будем вешаться на шею г-ну Zau4man со всеми нашими проблемами
0
Karbofos Karbofos 5 месяцев назад #
А несколько шаблонов можно создать с помощью этого компонента?
0
Zau4man Zau4man 5 месяцев назад #
Так нет никакого компонента...
Есть архив дочерней темы.
0
Karbofos Karbofos 5 месяцев назад #
Я уже понял, просто писал думая о другом, ZWD был компонент для переноса виджетов, а сейчас это есть в 14.2 , просто подумал, можно ли было им переносить ещё в одну дочернюю тему. Его похоже можно удалить теперь.
0
Zau4man Zau4man 5 месяцев назад #
Да, можно удалить.
Копирование сетки и виджетов в рамках одного сайта появилось еще в 2.14.1 Инструкция была обновлена.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.