4. Подключим новый стиль¶
Мы уже создали собственный файл styles.css. Теперь нам нужно сообщить платформе, что добавился новый стиль. Платформа его подключит, закэширует и отдаст в браузер.
Файлы стилей подключаются в шаблонах.
Все шаблоны для витрины расположены в папке:
/design/themes/[название_темы]/templates/
Все шаблоны модулей в папке
/design/themes/[название_темы]/templates/addons
Непосредственное подключение стилей выполняет шаблон:
/design/themes/[название_темы]/templates/common/styles.tpl
Приступим к подключению:
Откройте файл
/design/themes/[название_темы]/templates/common/styles.tpl
В моём примере открыта тема с адаптивным дизайном «Responsive».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
{styles use_scheme=true reflect_less=$reflect_less} {hook name="index:styles"} {style src="styles.less"} {style src="tygh/responsive.less"} {* Translation mode *} {if $runtime.customization_mode.translation || $runtime.customization_mode.design} {style src="tygh/design_mode.less"} {/if} {* Theme editor mode *} {if $runtime.customization_mode.theme_editor} {style src="tygh/theme_editor.less"} {/if} {/hook} {/styles}
Данный файл подключает стили less (css) в теме c адаптивным дизайном.
Обратим внимание на 2 и 16 строки и теги
{hook name="index:styles"}
и{/hook}
.Это хук шаблона smarty . Эти тэги позволяют расширить данный шаблон с помощью модуля. Все хуки во всех шаблонах выглядят так и позволяют расширение без грубого вмешательства в шаблон.
Тег
{hook name="index:styles"}
содержит в полеname
:index
— папка хукаstyles
— название хукаПройдите в папку
design/themes/[название_темы]/templates/addons
.Она содержит все шаблоны и подключения к хукам разных модулей.
Создайте новую папку для вашего модуля, с названием соответствующим id вашего модуля. В нашем примере: first_addon.
Пройдите в только что созданную папку:
/design/themes/[название_темы]/templates/addons/first_addons
Создайте новую папку hooks .
В данной папке ваш модуль сможет подключаться к любым хукам в разных шаблонах платформы.
Пройдите в только что созданную папку:
/design/themes/[название_темы]/templates/addons/first_addons/hooks
Создайте папку index .
— Почему index?
— Потому что хук к которому мы подключаемся говорит {hook name=” index :styles”}
Откройте созданную папку:
/design/themes/[название_темы]/templates/addons/first_addons/hooks/index
Создайте новый файл styles.post.tpl .
— Почему styles.post.tpl?
— Потому что хук к которому мы подключаемся содержит {hook name=”index: styles “} . А добавленное окончание .post. означает, что созданный файл подключится после хука (после закрывающего тега
{/hook}
).Откройте файл:
/design/themes/[название_темы]/templates/addons/first_addons/hooks/index/styles.post.tpl
Вставьте код для подключения файла styles.css:
1
{style src="addons/first_addon/styles.css"}
Проверяем результат.
Модуль выключен Модуль включен
Если стиль не подключился то:
- Возможно вы забыли включить модуль.
- Возможно вы допустили ошибку в названии файла или папки.
- Возможно нужно очистить кэш.
Далее о кэше.