4. Подключим новый стиль¶

Мы уже создали собственный файл styles.css. Теперь нам нужно сообщить платформе, что добавился новый стиль. Платформа его подключит, закэширует и отдаст в браузер.

Файлы стилей подключаются в шаблонах.

Все шаблоны для витрины расположены в папке:

/design/themes/[название_темы]/templates/

Все шаблоны модулей в папке

/design/themes/[название_темы]/templates/addons

Непосредственное подключение стилей выполняет шаблон:

/design/themes/[название_темы]/templates/common/styles.tpl

Приступим к подключению:

1. Откройте файл /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. Обратим внимание на 2 и 16 строки и теги {hook name="index:styles"} и {/hook}.

   Это хук шаблона smarty . Эти тэги позволяют расширить данный шаблон с помощью модуля. Все хуки во всех шаблонах выглядят так и позволяют расширение без грубого вмешательства в шаблон.

   Тег {hook name="index:styles"} содержит в поле name:

   index — папка хука

   styles — название хука

3. Пройдите в папку design/themes/[название_темы]/templates/addons .

   Она содержит все шаблоны и подключения к хукам разных модулей.

4. Создайте новую папку для вашего модуля, с названием соответствующим id вашего модуля. В нашем примере: first_addon.

   Пройдите в только что созданную папку:

   /design/themes/[название_темы]/templates/addons/first_addons

5. Создайте новую папку hooks .

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

   Пройдите в только что созданную папку:

   /design/themes/[название_темы]/templates/addons/first_addons/hooks

6. Создайте папку index .

   — Почему index?

   — Потому что хук к которому мы подключаемся говорит {hook name=” index :styles”}

7. Откройте созданную папку:

   /design/themes/[название_темы]/templates/addons/first_addons/hooks/index

8. Создайте новый файл styles.post.tpl .

   — Почему styles.post.tpl?

   — Потому что хук к которому мы подключаемся содержит {hook name=”index: styles “} . А добавленное окончание .post. означает, что созданный файл подключится после хука (после закрывающего тега {/hook}).

9. Откройте файл:

   /design/themes/[название_темы]/templates/addons/first_addons/hooks/index/styles.post.tpl

10. Вставьте код для подключения файла styles.css:

    1	{style src="addons/first_addon/styles.css"}

11. Проверяем результат.

    Модуль выключен	Модуль включен

Если стиль не подключился то:

1. Возможно вы забыли включить модуль.
2. Возможно вы допустили ошибку в названии файла или папки.
3. Возможно нужно очистить кэш.

Далее о кэше.