50  /  380
Справочник

Особенности интеграции с Битрикс

Просмотров: 27532
Дата последнего изменения: 14.09.2021
Роберт Басыров
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
2
3
4
5

Шаблон сайта и компоненты

В рамках продукта верстку можно разделить на два вида:

  • Верстка компонентов
  • Верстка шаблона сайта

Компонент - логически и функционально независимый компонент страницы, инкапсулирует в себе поведение (JavaScript), шаблоны и стили. Независимость компонентов обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.

Шаблон сайта определяет внешний вид сайта. Включает в себя HTML и CSS для layout'а страницы (header, footer, колонки), оформление текста и другие элементы, общие для всех страниц сайта.

Контекст

Контексты продуктов и шаблонов сайтов

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

  • Стандарт HTML (HTML5, HTML4, XHTML)
  • Standard Mode и/или Quirks Mode
  • Гибкость верстки
  • Устойчивость к внешним стилям
  • Тестирование
  • Кросс-браузерность

Существует следующие контексты использования верстки:

  • Корпоративный портал. Данный продукт поставляется с шаблоном Bitrix24. Компоненты должны хорошо отображаться в этом шаблоне.
  • Управление сайтом. Именно с помощью этого продукта клиенты создают новые сайты. Компоненты будут работать в абсолютно разных по дизайну и по верстке проектах. Как правило, партнер, интегрируя стандартный компонент на сайте, идет по пути наименьшего сопротивления. Сначала пробует изменить только CSS шаблона и если этого недостаточно - копирует шаблон и на его основе создает новый.
  • Публичные интерфейсы. Административная верхняя панель, диалоги создания и редактирования страницы - это все примеры публичных интерфейсов, которые должны хорошо отображаться в любом дизайне. Здесь важно, чтобы верстка была "пуленепробиваемой" - внешние стили шаблона не должны влиять на ее отображение.
  • Административный раздел. Представляет собой по сути отдельный сайт со своим шаблоном и интерфейсами. Однако часть этих интерфейсов могут отображаться в публичной части сайта.
  • Сайты готовых решений. Для данных сайтов создается отдельный набор шаблонов, использование которых предназначено только для соответствующего шаблона сайта.
  • Решение Интернет-магазин. Несмотря на то, что сайт интернет-магазина является готовым решением, его шаблоны используются в компонентах как стандартные (по умолчанию). Это значит, что такие шаблоны могут использоваться в любых других дизайнах.
  • Мобильное приложение. Данный продукт использует браузер на основе движка WebKit.

Bootstrap

Bootstrap в Bitrix Framework

В Bitrix Framework для вёрстки шаблонов сайта и компонентов используется Bootstrap. При вёрстке шаблонов учитывайте что:

  1. В БУС подключается не собственный вариант Bootstrap, а оригинальная, не изменённая поставка фреймворка в 4-ой версии.
  2. Bootstrap подключается не в конкретном компоненте, а в целом на продукте из модуля main.
  3. В Bootstrap рекомендуют кастомизировать стили в отдельном файле, обычно он называется bootstrap-theme.css. В случае с Bitrix Framework он называется template_style.css - для основного шаблона и style.css в каждом отдельном компоненте. В этом случае выше перечисленные файлы подключатся после основной библиотеки.

Если верстальщик не следует рекомендациям Bootstrap и нашей документации, то возможна ситуация, когда "плывёт" дизайн.


13
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии