Онлайн-руководство разработчика NetCat
Модуль «Поиск по сайту» 12.2.1Начало работы с модулем 12.2.2Язык запросов 12.2.3Способы хранения индекса 12.2.4Интерфейс модуля в панели управления сайтом 12.2.5Области индексирования 12.2.6Области HTML-страниц 12.2.7Области поиска на сайте 12.2.8Индексирование по расписанию, запуск индексирования в фоновом режиме 12.2.9Правила индексирования 12.2.10Постановка задачи переиндексирования в очередь 12.2.11Интеграция модуля в макеты дизайна сайта 12.2.12Простая форма поиска 12.2.13Расширенная форма поиска 12.2.14Вывод результатов поиска 12.2.15Стилизация списка подсказок 12.2.16Расширенные настройки 12.2.17Разработка расширений модуля 12.2.18Обзор архитектуры модуля 12.2.19Обработчики документов различных типов 12.2.20Текстовые фильтры 12.2.21Анализаторы текста 12.2.22Корректировщики запросов 12.2.23Подключение других поисковых систем 12.2.24Решение проблем с поиском 12.2.25Решение проблем с индексированием 12.2.26Справочник API

Стили шаблонов компонентов

Начиная с версии 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). Это будет исправлено в будущих версиях системы.

Описание проекта