Начиная с версии 5.7 шаблоны компонентов, сохранённые в файлах (так называемые «Компоненты v5») могут иметь таблицы стилей CSS, привязанные к этим компонентам, для использования в режимах просмотра и редактирования.

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

Режим совместимости для старых шаблонов

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

Вы можете включить или отключить режим совместимости для конкретного шаблона на странице редактирования данного шаблона на вкладке «Настройки».

Компоненты v4 всегда работают только в режиме совместимости.

Все новые компоненты по умолчанию создаются с поддержкой стилей компонентов и выводятся с добавлением дополнительной разметки, что необходимо учитывать при вёрстке и внедрении макетов дизайна. Значение по умолчанию для параметра «отключить дополнительную разметку» для создаваемых компонентов можно указать в настройках системы в блоке «Компоненты».

В режиме просмотра сайта (но не в режиме редактирования или администрирования) для страниц, запрошенных с параметром isNaked=1, дополнительная разметка не добавляется.

Расположение стилей шаблонов компонентов

Стили шаблона компонента можно изменить:

в панели управления при редактировании соответствующего компонента и шаблона на вкладке «Редактирование компонента»;
в папке компонента или его шаблона в файле SiteStyles.css.

Автоматически добавляемая разметка и дополнительные переменные в шаблонах

При выводе на сайте (в режиме просмотра или редактирования, но не в режиме администрирования) ряд блоков оборачиваются в дополнительный блок <div>.

Служебный блок <div> имеет следующие CSS-классы:

tpl-block-тип-блока:
- список объектов из инфоблока — tpl-block-list
- страница полного вывода — tpl-block-full
- форма добавления объекта — tpl-block-add-form
- форма изменения объекта — tpl-block-edit-form
- форма поиска и выборки — tpl-block-search-form
tpl-component-ключевое-слово-компонента (см. ниже);
tpl-template-ключевое-слово-шаблона (при использовании шаблона компонента).

Для блоков основной части страницы в режиме вывода списка объектов в начале блока-обёртки также добавляется <div> с идентификатором, равным ключевому слову инфоблока (для hash-ссылок на эти блоки).

Название CSS-класса, соответствующего компоненту, формируется из префикса tpl-component- и ключевого слова компонента (или, если ключевое слово компонента не задано, его идентификатора).

Название CSS-класса, соответствующего шаблону, формируется из префикса tpl-template- и ключевого слова шаблона компонента (или его идентификатора).

При использовании ключевых слов в названиях CSS-классов они преобразуются в dash-case, то есть части названия разделены символом «-». Например, ключевые слова mysite_news и MysiteNews будут преобразованы в mysite-news.

При использовании «основного» шаблона компонента (самого компонента) блок будет иметь класс типа блока и класс tpl-component-ключевое-слово-компонента. При использовании шаблона компонента блок будет иметь также класс tpl-template-ключевое-слово-шаблона.

В шаблонах списков объектов, полного вывода объектов, формах добавления и изменения, доступны следующие дополнительные переменные:

$nc_component_css_class — классы, соответствующие компоненту, например «tpl-component-mysite-news tpl-template-frontpage»
$nc_component_selector — CSS-селектор, соответствующий классам компонента, например «.tpl-component-mysite-news.tpl-template-frontpage».

Там, где данные переменные недоступны, для получения CSS-классов шаблона компонента можно использовать метод $nc_core->component->get_css_class_name($component_template_id), где $component_template_id — идентификатор шаблона или его компонента.

Блок-обёртка также содержит атрибут id, содержащий уникальный идентификатор данного блока в DOM. Идентификатор доступен в шаблоне компонента в переменной $nc_block_id. Этот идентификатор удобно использовать для инициализации JavaScript-кода, относящегося к данному блоку, например:

<script>
    // в данном примере используется jQuery
    $(function() {
        $('#<?= $nc_block_id ?>').click(my_click_handler);
    });
</script>

Пример автоматически добавляемой разметки

Пример разметки, добавляемой при выводе списка объектов из инфоблока с ключевым словом «ключевое_слово_инфоблока» из компонента «mysite_news» с использованием шаблона с ключевым словом «frontpage»:

<div class="tpl-block-list tpl-component-mysite-news tpl-template-frontpage">
     <div id="ключевое_слово_инфоблока" style="display: none"></div>
     … префикс списка объектов …
     … объекты …
     … суффикс списка объектов …
</div>

Подключение стилей шаблонов компонентов на сайте

При использовании шаблона в любой части сайта его стили автоматически добавляются в общий CSS-файл со стилями шаблонов компонента (отдельный для каждого сайта). При изменении стилей шаблона они автоматически обновляются в общем CSS-файле.

Если вы хотите удалить из общего CSS-файла стили шаблонов, которые более не используются, просто удалите общий CSS-файл, и он будет пересобран для используемых на сайте шаблонов. Общий CSS-файл находится в папке /netcat_template/css/<идентификатор_сайта>/components.css.

Общий CSS-файл добавляется автоматически перед закрывающим тегом </head>, дополнительных действий для его подключения не требуется.

Если необходимо вставить подключение общего CSS-файла в другую часть страницы, используйте в макете дизайна метод:
<?= $nc_core->page->get_site_component_styles_tag(); ?>

В общем CSS-файле будут убраны все имеющиеся в исходных стилях комментарии и дополнительные пробелы.

Особенности таблиц стилей шаблонов компонентов

Ко всем селекторам в CSS-правилах стилей шаблонов компонентов при сборке общего CSS-файла добавляется в виде префикса соответствующий класс, соответствующий шаблону компонента (далее — «префикс»). Благодаря этому стили распространяются только на данный шаблон.

Для стилей компонента данный префикс будет равен .tpl-component-ключевое-слово-компонента, для стилей шаблонов компонента — .tpl-component-ключевое-слово-компонента.tpl-template-ключевое-слово-шаблона. Правила формирования названий CSS-классов указаны выше.

При необходимости можно вставить префикс в любую часть селектора при помощи символа «&».

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

Рекомендуем при сохранении дополнительных ресурсов (таких как изображения или шрифты) использовать для них подпапки со стандартными названиями: images, fonts, assets, styles, css, scripts, js.

Поддерживаются @-правила со вложенными блоками: @media, @supports, @document.

Наследование стилей компонента в его шаблонах

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

Примеры преобразований правил стилей шаблона компонента

Для краткости в примерах предполагается, что компонент имеет ключевое слово «x», а шаблон — ключевое слово «y».

Правило в стилях шаблона компонента	Результирующий CSS в общем файле стилей
`a { text-decoration: none; }`	`.tpl-component-x.tpl-template-y a { text-decoration: none; }`
`p .highlight { background: yellow }`	`.tpl-component-x.tpl-template-y p .highlight { background: yellow; }`
`h1, h2 { margin-bottom: 10px }`	`.tpl-component-x.tpl-template-y h1, .tpl-component-x.tpl-template-y h2 { margin-bottom: 10px; }`
`.site1 & a { color: red; }`	`.site1 .tpl-component-x.tpl-template-y a { color: red; }`
`& { float: left; }`	`.tpl-component-x.tpl-template-y { float: left; }`
`&.tpl-block-full img { cursor: zoom-in; }`	`.tpl-component-x.tpl-template-y.tpl-block-full img { cursor: zoom-in; }`
`@media (max-width: 640px) { img { max-width: 500px; } }`	`@media (max-width: 640px) { .tpl-component-x.tpl-template-y img { max-width: 500px; } }`
`.cover { background-image: url('images/bg.png'); }`	`.tpl-component-x.tpl-template-y .cover { background-image: url('/netcat_template/class/x/y/images/bg.png'); }`
`button { background: url('../images/btn.png'); }`	`.tpl-component-x.tpl-template-y button { background: url('/netcat_template/class/x/images/btn.png'); }`
`.fancy-divider { background-image: url('/img/hr.png'); }`	`.tpl-component-x.tpl-template-y .fancy-divider { background-image: url('/img/hr.png'); }`

Примеры преобразований правил стилей компонента

Стили, заданные в компоненте (не в его шаблоне), преобразуются аналогично стилям шаблонов компонента, но в качестве префикса используется только CSS-класс tpl-component-x. Как следствие, стили, заданные в настройках компонента, распространяются на все шаблоны данного компонента.

Правило в стилях шаблона компонента	Результирующий CSS в общем файле стилей
`a { text-decoration: none; }`	`.tpl-component-x a { text-decoration: none; }`
`p .highlight { background: yellow }`	`.tpl-component-x p .highlight { background: yellow; }`
`&.tpl-block-full img { cursor: zoom-in; }`	`.tpl-component-x.tpl-block-full img { cursor: zoom-in; }`

Ограничения

На момент написания данной статьи (версия 5.7.0.16086) при экспорте компонентов в архив экспорта не добавляются дополнительные подпапки и файлы (например, папка с дополнительными изображениями шаблона компонента images). Это будет исправлено в будущих версиях системы.

← Назад 10.11 Шаблоны компонентов 10.13 Пользовательские настройки компонента Далее →

Наверх