Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 1
Рамках данного урока мы создадим шаблон 1С-Битрикс и натянем на него базовую статическую html+css вёрстку, не реализуя ни одного динамического шаблона. В каждом последующем уроке мы будем постепенно забирать функционал из шаблона и интегрировать в компоненты.
В уроке не рассматривается процесс установки и настройки 1С-Битрикс. Данный вопрос хорошо описан в документации 1С-Битрикс.
Для реализации этого урока автор создал чистую пустую установку 1С-Битрикс без демо-контента. После создания администратора процесс установки был прерван.
Обязательно поле "ID" - он будет использоваться для вызова шаблона в настройках сайта, а так же станет названием папки с шаблоном (заполняем латинскими буквами и цифрами, рекомендуется без пробелов и спец-символов).
Рекомендуется поле "Название" - используется для выбора шаблона в списке. Лучше заполнить кратким уникальным текстом, позволяющим однозначно идентифицировать шаблон и то, где он используется если в системе предполагается наличие нескольких шаблонов.
По желанию поле "Описание" - выводится только на старнице редактирования шаблонов и в списке шаблонов. Используется для краткого описания технических особенностей шаблона для администратора.
Обязательно ставим метку "#WORK_AREA#" в поле "Внешний вид шаблона сайта"
Ждём кнопку "сохранить"
Наш пустой шаблон создан и располагается в папке /bitrix/templates/stylish/
Откроем созданный шаблон из списка шаблонов (нажав на название шаблона в списке) и перейдём в папку шаблона (нажав на путь к папке напротив поля ID):
Как мы видим несмотря на то, что мы создали абсолютно пустой шаблон в папке присутствует несколько файлов:
В том числе footer.php и header.php (пока пустые), которые мы упоминали в 1 уроке.
В дальнейшем мы опишем назначение каждого из файлов и поработаем со всеми из них, а так же дополним структуру.
Интегрируем статическую html+css вёрстку
Из исходного шаблона берём 3 папки с файлами:
css
img
js
и копируем в папку /bitrix/templates/stylish/
Пока не будем обращать внимания на тот факт, что в нашем шаблоне папка img содержит не только изображения из шаблона, но и контент! На взгляд автора данной статьи это ошибка верстальщика, с которой нам ещё предстоит разобраться.
Настал этап, когда мы приступим к добавлению кода HTML разметки шаблона. Для этого возьмём макет главной страниц index.html из исходного кода шаблона.
Цветами отмечены участки кода, которые относятся к разным блокам в соответствии с разметкой, проведённой в УРОКЕ 0:
Красный - header.php (или в шаблон сайта ВЫШЕ #WORK_AREA#
Жёлтый - footer.php (или в шаблон сайта НИЖЕ #WORKAREA#)
Зелёный - тело страницы
Мы рекомендуем не брать код напрямую из урока, а самостоятельно найти границы блоков (например использую редактор кода notepade++ с подсветкой синтаксиса). Во-первых, это важная часть обучения процессу интеграции дизайна - правильно определить где заканчивается какой блок. А во-вторых, здесь могла быть сбита табуляция, так что код может быть менее читабелен, чем в оригинале.
Как можно заметить, мнение автора статьи о разбитии вёрстки на рабочую область подвал и шапку не совпадает с мнением автора шаблона.
/index.php (зелёный код добавляем в содержимое страницы в корне сайта)
Теперь применим наш статический шаблон к имеющемуся сайта (состоящему пока из 1 страницы), для этого в административном разделе выбираем:
Настройки → Настройки продукта → Сайты → Сайты
Нажмём на ID интересующего нас сайта (в данном случае он один, поскольку мы используем чистую систему, однако у вас может быть список):
На странице редактирования настроек сайта нас интересует самый нижний блок - "Шаблоны". Здесь мы выберем шаблон и установим условия для его использования на сайте. Поскольку у нас всего 1 шаблон и он используется для всего сайта, то мы не будем использовать условия и оставим индекс сортировки по-умолчанию:
Если вы интегрируете шаблон на уже работающем сайте (или делаете не 1й шаблон в рамках проекта), то имеет смысл ставить для него низкий индекс сортировки и/или правило, применяющее шаблон только к конкретной папке, чтобы ваше правило с не до конца готовым шаблоном не сказалось на других разделах.
Если сейчас мы посмотрим страницу в публичной части, то увидим, что она представляет из себя текст без разметки, стилей и картинок, поскольку пути к ним в статической вёрстке отличаются от тех, что должны быть в структуре 1С-Битрикс. Для того, чтобы это исправить необходимо:
Добавить константу <?=SITE_TEMPLATE_PATH?> к пути всех статических файлов (в частности изображений), которая определяет путь к шаблону сайта относительно пути сайта.
Например, заменив <img src="img/img-4.png" alt=""> на <img src="<?=SITE_TEMPLATE_PATH?>/img/img-4.png" alt="">
Пренебрежём пока тем, что некоторые картинки, такие как баннеры в слайдере следует хранить не в шаблоне - мы будем облегчать его постепенно, перенося картинки в шаблоны компонентов или контент по мере необходимости (в идеале в общей папке в шаблоне страницы не должно остаться картинок не универсального значения, чтобы в дальнейшем было проще работать).
Добавим подключение пролога и языковых файлов в header.php начале шаблона (1-й строкой):
Внутри тега <head> вместо <title>Home</title> динамически генерирующийся заголовок:
<title><?$APPLICATION->ShowTitle()?></title>
Добавим служебную функцию <?$APPLICATION->ShowHead();?> (она заменит нам множество других статических вызовов.
Удалим <meta charset="utf-8"> - реальную информацию о кодировке (из настроек сайта) на страницу выведет предыдущая функция.
Установим динамическое подключение стилей с помощью функции SetAdditionalCSS (это нужно для того, чтобы одни и те же стили не подключались дважды, а так же для того, чтобы 1С-Битрикс проверял изменение в стилях и сообщал об этом браузеру пользователя при повторном заходе на сайт) - $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/НАЗВАНИЕ_СТИЛЯ.css');. Сгруппируем все стили вместе с ShowHead для облегчения процесса редактирования в будущем:
Поскольку данная функция не поддерживает параметр media, перенесём и его значение из старых статических ссылок в текст CSS файлов.
Например, для /css/bootstrap.css первой строкой добавим:
@media screen
Установим динамическое подключение JS библиотек аналогично стилям (обратим внимание читателя, что проблема дублирования подключения библиотек JS важнее, поскольку может приводить к ошибкам работы функционала). Воспользуемся функцией AddHeadScript - $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/НАЗВАНИЕ_БИБЛИОТЕКИ.js");. Сгруппируем их так же вместе с CSS и ShowHead:
Это библиотека, отвечающая за раскрытие выпадающего меню. Она вызывается в bootstrap.js, однако автор вёрстки сделал её подключение зависящим от местонахождения страницы, что приводит к ошибке в случае динамического шаблона (как у нас). Поэтому мы вынесли подключение в шаблон.
Важно не забыть добавить при их подключении константу <?=SITE_TEMPLATE_PATH?>, как и для картинок.
Добавляем константу <?$APPLICATION->ShowPanel();?> после открытия <body> для вывода панели инструментов в публичной части сайта (для пользователей обладающих соответствующим административным доступом).
Их динамические значения уже выводятся с помощью $APPLICATION->ShowHead();
Удаляем <meta name="author" content="Your name"> - в будущих уроках мы реализуем её вывод программно.
Опционально размещаем файл screen.gif в корне шаблона - он будет использоваться для иллюстрации шаблона в административном разделе и его наличие не обязательно. Файл может быть размещён в натуральную величину - для списка система автоматически сгенерирует миниатюру.
В заключении урока 1
Получившийся статический шаблон 1С-Битрикс и статичную же страницу Index.php для корня сайта вы можете скачать в репозитории на GitHub. На этом урок 1 закончен - мы получили полноценный (хотя и статичный) шаблон для 1С-Битрикс на основе HTML шаблона BootStrap. Теперь на его основе можно создать сайт.
В последующих уроках мы последовательно разберём перевод статичного контента данного шаблона в формат компонентов 1С-Битрикс, а так же частично переработаем структуру стилей для более удобной работы редакторов.