1С-Битрикс: Управление сайтом 7.x
Руководство по интеграции. Быстрый старт.
Содержание
Введение 3
Создание и удаление сайта 3
Общие принципы интеграции 4
Шаблон сайта. Структура 4
Применение шаблонов к сайтам 8
Включаемые области и компоненты 10
Работа с компонентами 13
Размещение компонента 14
Управление содержимым компонента 15
Редактирование параметров компонента 17
Копирование шаблона компонента 18
Редактирование шаблона компонента 19
Редактирование CSS-файла шаблона компонента 21
Введение
Руководство по интеграции предназначено для разработчиков веб-сайтов на основе программного продукта "1C-Битрикс: Управление сайтом". В документе подробно рассматривается процедура интеграции продукта в новый или уже существующий сайт. При составлении документа подразумевалось, что разработчик владеет базовыми технологиями для разработки веб-сайта, такими как HTML, CSS, PHP.
Целью документа является разъяснение базовых принципов интеграции дизайна.
Руководство не является основным документом по технологии интеграции. Кроме этого документа мы рекомендуем изучить полное Руководство по интеграции, а также бесплатный онлайн курс Интеграция (BX-DEV001) . По его прохождению и успешной сдаче тестовых заданий специалист получает сертификат, подтверждающий уровень его компетентности в данной области.
Если у вас возникнут дополнительные вопросы по работе с продуктом, то вы можете обратиться в службу технической поддержки или на форумы компании "1С-Битрикс".
Создание и удаление сайта
Демонстрационная версия продукта представлена только одним сайтом. Его основная задача – ознакомление с возможностями продукта. Для более детального изучения процесса интеграции сайта с системой рекомендуется не изменять существующий, а создать новый сайт. И затем создать шаблон дизайна для вашего сайта. Управление сайтами системы выполняется в Административном разделе на странице Настройки > Настройки продукта > Сайты > Список сайтов (рис. 1.1).
Рис. 1.1. Список сайтов.
Процесс создания и удаления сайта подробно описан в учебном курсе Администрирование системы.
Общие принципы интеграции
Система "1C-Битрикс: Управление сайтом" обладает большими возможностями по интеграции дизайна в сочетании с удобством выполнения этих работ. Использование шаблона с программным кодом обеспечивает необходимую гибкость при реализации интернет-проекта, позволяет реализовать как простые шаблоны, так и шаблоны с произвольной программной логикой и индивидуальным внешним видом.
Эти возможности реализованы за счет разделения графической (оформительской) составляющей проекта и информационной (смысловой) составляющей. Задание графической части производится в шаблоне сайта, а так же с помощью файлов стилей. Задание информационной составляющей – с помощью модулей и компонентов.
Каждый из компонентов системы построен по аналогичному принципу. Компонент имеет оформительскую составляющую в виде шаблона и файла стилей и логическую составляющую, отвечающую за вывод собственно информации. Такое разделение используется в компонентах версии 2.0. Использование компонентов версии 1.0 не рекомендуется по причине сложности их адаптации под дизайн сайта.
Система допускает создание неограниченного множества шаблонов и их использование на сайте (или сайтах) в соответствии с необходимыми вам условиями.
Внимание! Суть процесса перевода шаблона от HTML-варианта к полноценному PHP-шаблону заключается в замене HTML-кода на вызов соответствующих PHP-функций, методов и программных компонентов.
Общий алгоритм действий по созданию полноценного шаблона следующий:
Создание бланка шаблона в разделе Настройки > Настройки продукта > Сайты > Шаблоны сайтов;
Добавление в бланк шаблона нарезанного HTML-варианта дизайна;
Задание разделителя #WORK_AREA#;
Замена HTML-кода на вызов соответствующих PHP-функций;
Применение шаблона к сайту.
Создание шаблона сайта рекомендуется выполнять на локальной демо-версии продукта. Готовый шаблон экспортировать в виде комплекта файлов на удаленный сервер и выполнить наполнение сайта содержанием на созданном шаблоне.
Удобство работы по созданию шаблона определяется:
возможностью использования визуального HTML-редактора;
поддержкой технологии Drag and Drop при работе с компонентами;
возможностью быстрого доступа к редактированию компонентов и свойств объектов.
Шаблон сайта. Структура
Внешний вид сайта определяется шаблоном дизайна.
-
Шаблон дизайна - это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный html-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может так же включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.
Структура дизайна сайта обычно состоит из трех основных частей (рис. 2.1):
Верхняя часть дизайна (header).
Рабочая область страницы, в которой размещаются информационные материалы сайта, компоненты или любой другой программный код (Work Area).
Нижняя часть дизайна (footer).
Рис. 2.1. Основные части дизайна.
Header - верхняя часть дизайна, заголовок. Включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы. Хранится в отдельном файле …/<�идентификатор шаблона>/header.php.
Work area - рабочая область страницы, в которой размещаются собственно информационные материалы сайта.
Footer - нижняя часть дизайна со статической информацией (как правило: контактная информация, сведения об авторе и владельце сайта и так далее), нижним горизонтальным меню и правым меню (если они есть в дизайне). Может включать в себя информационные материалы. Хранится в отдельном файле …/<�идентификатор шаблона>/footer.php.
Рассмотрим, как в шаблоне настраиваются части дизайна на примере шаблона Корпоративный сайт, который включен в поставку продукта.
Управление шаблонами дизайна осуществляется в Административном разделе на странице: Настройки > Настройки продукта > Сайты > Шаблоны сайтов. Форма, представленная на этой странице, позволяет просмотреть, отредактировать существующие шаблоны, а также добавить новые.
На закладке Шаблон представлен внешний вид шаблона дизайна сайта. Начиная с версии 6.0, стало возможным создание шаблона дизайна сайта в визуальном режиме (рис. 2.2) с использованием программных компонентов.
Рис. 2.2. Редактирование шаблона в визуальном режиме.
В основном все компоненты, необходимые для создания шаблона, располагаются в разделе Служебные. Остальные – в соответствующих тематических группах (Контент, Сервисы и т.д.).
Возможность визуального редактирования шаблона определяется настройками Главного модуля (рис. 2.3).
Рис. 2.3. Настройки Главного модуля.
Внимание! Редактирование шаблона дизайна сайта в визуальном режиме будет происходить корректно, если в атрибутах HTML-тегов не содержится php-код, а также, если, например строки и ячейки таблицы не прерываются php-кодом при формировании таблицы. Если в коде шаблона дизайна сайта есть такие особенности, то редактировать его следует только в режиме кода.
Шаблоны демонстрационной версии специально адаптированы для работы в данном режиме. Не рекомендуется включение данного режима на других шаблона, если вы не уверены, что он отвечает заданным требованиям – шаблон может быть утерян при сохранении.
При редактировании шаблона в визуальном редакторе отображаются объединенные верхняя и нижняя части дизайна сайта. В HTML-код вставляются компоненты и функции на языке программирования PHP, которые обеспечивают показ различного рода информации: метаданных, заголовка страницы, таблицы каскадных стилей, административной панели и последующее управление этой информацией с использованием визуальных инструментов.
Обратите внимание на наличие в шаблоне разделителя #WORK_AREA#, который используется для указания границы между верхней (header) и нижней (footer) частью дизайна. Именно в этом месте выполняется подключение рабочей области страницы. Такой разделитель можно вставить непосредственно в коде шаблона, а можно воспользоваться кнопкой  , расположенной в панели инструментов визуального редактора. По нажатии на нее в рабочую область вставится разделитель  . При создании шаблона необходимо учесть, что его сохранение без этого разделителя невозможно.
Внимание! Система не устанавливает никаких ограничений в шаблонах и внешнем виде сайта.
Каскадные стили, используемые в шаблоне, рекомендуется разделять на две таблицы стилей, хранящиеся в двух разных файлах. Оба файла находятся в директории /bitrix/templates/<�идентификатор_шаблона>/. Один из файлов носит название styles.css и содержит стили для представления информационного содержания страницы на сайте. Содержимое этого файла отображается при редактировании шаблона на закладке Стили сайта. Во втором файле – с именем template_styles.css - описаны стили для отображения текстов в самом шаблоне дизайна. Содержимое этого файла отображается при редактировании шаблона на закладке Стили шаблона.
Все шаблоны хранятся в директории /bitrix/templates/. Набор файлов каждого шаблона находится в поддиректории, название которой соответствует идентификатору шаблона. В рассматриваемом нами примере шаблон размещается в каталоге: /bitrix/templates/books/.
Примечание: При создании нового шаблона через интерфейс задается его имя, название, описание для показа в списке, код шаблона внешнего вида сайта, таблицы стилей и набор используемых включаемых компонентов и картинок. При сохранении шаблона автоматически создается поддиректория /bitrix/templates/<�идентификатор_шаблона>.
Каждый шаблон имеет схожую структуру файлов и поддиректорий. Простейший шаблон может состоять всего из нескольких основных файлов: header.php, footer.php, styles.css, template_styles.css.
Все графические элементы, используемые в шаблоне, размещаются в директории /bitrix/templates/<идентификатор_шаблона>/images/.
В каталоге шаблона могут быть также размещены другие файлы и компоненты. Посмотреть состав шаблона в Менеджере файлов можно, перейдя по ссылке, показанной рядом с идентификатором шаблона.
В виде отдельных файлов могут быть представлены любые области дизайна, которые предполагается использовать в шаблоне сайта, и к редактированию которых необходимо иметь быстрый доступ. Примерами таких областей могут служить: область с указанием авторских прав (copyright), область с контактной информацией и т.п.
Применение шаблонов к сайтам
Продукт "1C-Битрикс: Управление сайтом" поддерживает многосайтовость, что позволяет создать несколько сайтов на одной копии продукта. Каждый сайт может характеризоваться собственным доменным именем, внешним видом, языком интерфейса и информационным наполнением.
Для каждого сайта может быть назначено неограниченное количество шаблонов. Использование шаблонов открывает широкие возможности для настройки внешнего вида сайта и изменения его дизайна в зависимости от различных условий. Один и тот же шаблон может быть использован многократно для любых сайтов при различных условиях.
Продукт позволяет гибко настроить дизайн для различных сайтов, разделов сайта, использовать специальный праздничный дизайн в течение определенного времени, задать отдельные шаблоны дизайна для различных групп посетителей сайта, в зависимости от определенного параметра в адресе и т.п. (рис. 2.4).
Рис.2.4. Шаблоны и сайты.
Выбор и назначение шаблонов для каждого сайта выполняется в Административном разделе: Настройки > Настройки продукта > Сайты > Список сайтов.
Для каждого шаблона дизайна может быть задано условие, при котором данный шаблон будет применен к страницам сайта (рис. 2.5). Если условие не задано, то шаблон применяется по умолчанию как основной. Рассмотрим условия применения того или иного шаблона в настройках демо-сайта:
Рис. 2.5. Настройка условий применения шаблонов.
В соответствии с условиями, представленными на рисунке 2.5, шаблоны дизайна будут применяться к страницам сайта следующим образом:
Корпоративный сайт (на главную страницу выведен каталог книг) будет использоваться в качестве основного шаблона сайта, так как для него не задано условие показа.
Шаблон Прохождение курса обучения будет использован для страниц раздела /communication/learning/course/ на сайте.
Шаблон Версия для печати будет использован, если адрес страницы содержит параметр print=Y. Например, ссылка на странице сайта http://www.site2.com/?print=Y позволит посетителю получить версию документа для печати.
Внимание! Условие может содержать любой программный код на языке PHP, в том числе вызовы API-функций продукта. Для получения дополнительной информации смотрите документацию к продукту.
Внимание! При настройке условий применения шаблонов обязательно указывайте индекс сортировки. Порядок применения шаблонов к сайту определяется в соответствии с указанной сортировкой. Если для страницы (раздела) может быть применено несколько шаблонов, то в итоге будет применен шаблон с большей сортировкой. Если индекс сортировки задан не будет, то может быть применен неверный шаблон.
Вы можете убедиться, что шаблон настроен правильно, нажав на иконку  рядом с выпадающим списком шаблонов. Вы увидите сайт с выбранным шаблоном в режиме предварительного просмотра, еще до применения изменений.
При создании шаблона сайта возможно использование различных программных условий, влияющих на отображение тех или иных элементов шаблона для различных разделов сайта. Подобные условия можно вводить для любых элементов шаблона. Например, можно отключать показ включаемых областей или управлять показом навигационной цепочки, и т.п.
Включаемые области и компоненты
Некоторые элементы дизайна в шаблоне представлены в виде программных компонентов. Это облегчает процесс создания и управления сайтом.
Вернемся к шаблону Корпоративный сайт и познакомимся с основными программными компонентами и включаемыми областями. На рисунке 2.6 выделены компоненты и включаемые области в данном шаблоне.
Рис. 2.6. Включаемые области в шаблоне.
В исходном HTML-коде проводятся замены выделенных областей на код вызова соответствующих компонентов системы "1С-Битрикс: Управление сайтом", которые обеспечивают показ различного рода информации: метаданных, заголовка страницы, подключение таблицы каскадных стилей, вывод административной панели, навигационная цепочка, меню сайта.
После создания HTML-прототипа и проведения требуемых подстановок функций и вызовов для программных компонентов, в вашем распоряжении будет PHP-шаблон дизайна сайта.
Информация, размещенная во включаемых областях и компонентах, доступна для быстрого редактирования из публичного раздела при работе в режиме редактирования контента (закладка  на административной панели, рис. 2.7).
Рис. 2.7. Режим редактирования контента.
Так, например, с помощью элементов управления информационным блоком можно перейти к форме добавления нового элемента или раздела в инфоблок (рис. 2.7).
Включаемые области оформляются отдельными файлами и могут быть показаны, например, только для текущего раздела либо только для текущей страницы и т.п. Элемент управления каждой включаемой областью позволяет перейти к редактированию ее содержимого.
Управление параметрами включаемых областей, компонентов, редактирование стилей сайта и шаблона выполняется в режиме разработки и настройки сайта (закладка  на административной панели, рис. 2.8).
Рис. 2.8. Режим разработки и настройки сайта.
Режим Разработка включает в себя не только те действия, которые необходимы для разработки и верстки сайта, но и все действия, доступные в режиме Редактирование.
Работа с компонентами
Часто используемые области на сайте могут быть оформлены как программные компоненты. Практически любой программный скрипт может быть представлен компонентом.
Начиная с версии 6.0 продукта, выпускаются компоненты новой версии. Отличие компонентов версии 2.0 от первой версии состоит в том, что в них разделены логика и представление. Для одной логики может быть создано несколько представлений, в том числе зависящих от шаблона текущего сайта. Представление (шаблон вывода) может быть написано на любом шаблонном языке, который можно подключить из PHP. Например, шаблоны могут быть на PHP, Smarty, XSLT и т.д. Нет необходимости изменять логику компонента для изменения особенностей его показа. Поэтому управлять внешним видом информации, выводимой компонентом, стало значительно проще, т.к. для этого разбираться в логике компонента совсем не обязательно.
Компоненты централизованно хранятся в одной папке (/bitrix/components/). Это обеспечивает большую целостность и понятность структуры сайта. Папка доступна для обращений, а значит, компонент и его шаблоны могут легко подключать свои дополнительные ресурсы. Компоненты определяются пространством имен. Так, системные компоненты, поставляемые с продуктом и обновляемые системой обновлений, относятся к пространству имен bitrix и располагаются в каталоге /bitrix/components/bitrix/.
Внимание! Изменять содержимое папки /bitrix/components/bitrix/ не рекомендуется! При выполнении обновлений эта папка перезаписывается и вы потеряете все изменения.
Пользовательские компоненты рекомендуется размещать в своей папке, например, /bitrix/components/my_folder/ либо в разделе /bitrix/components/.
Компоненты версии 2.0 делятся на простые (одностраничные) и комплексные (многостраничные). Простые компоненты создают какую-либо область на одной странице (например, лента новостей, фотография детально, таблица курсов валют и т.д.). Комплексные компоненты создают разделы сайта. Например, компонент каталога создает на сайте весь раздел каталога: и список каталогов, и список групп, и страницы товаров. То есть, комплексный компонент состоит из набора страниц при визуальном просмотре сайта, но из одной страницы на физическом уровне.
Имена компонентов имеют вид «идентификатор1.идентификатор2....». Например, «catalog», «catalog.element», «catalog.section.list» и т.п. Рекомендуется строить имена иерархически, начиная с общего понятия и заканчивая конкретным назначением компонента. Например, компонент, показывающий список товаров данной группы, может называться «catalog.section».
Папка компонента 2.0 содержит следующие подпапки и файлы:
подпапку templates, в которой расположены шаблоны вывода (отображения) компонента (может отсутствовать, если у компонента нет шаблонов вывода).
файл component.php, который содержит логику (код) компонента. Этот файл должен всегда присутствовать в папке компонента.
файл .parameters.php, который содержит описание входных параметров компонента для редактора. Если у компонента есть входные параметры, то этот файл должен присутствовать в папке компонента.
папку images, в которой хранятся необходимые изображения.
файл .description.php с названием, описанием компонента и его положением в дереве компонентов в редакторе и т.д.
другие подпапки и файлы:
help с файлами помощи по компоненту;
lang с языковыми файлами.
Размещение компонента
При размещении компонентов в шаблон последовательность действий должна быть следующей:
Удаление из оригинального html-кода участка, соответствующего функции компонента.
Добавление вместо html-кода php-кода вызова компонента.
Редактирование шаблона компонента и его файла стилей под дизайн сайта (при необходимости).
Число размещаемых компонентов в шаблоне сайта не ограничено. Так, например, подключение средств навигации по сайту, создание рекламных и включаемых областей, размещение формы авторизации и т.п. выполняется с помощью соответствующих компонентов. Описание всех компонентов системы приведено в документации продукта.
Для размещения компонентов на странице разработан специальный интерфейс на базе визуального редактора. При редактировании страницы можно выбрать компонент из списка и переместить его в рабочую область страницы. Для этого достаточно просто перетащить на страницу иконку компонента.
После помещения на страницу компонента его параметры могут быть настроены в панели Свойства визуального редактора. При установке курсора на значок компонента в рабочей области в нижней части экрана будет выведен список параметров, доступных для данного компонента (рис. 3.1).
Рис. 3.1. Размещение компонента.
Непосредственно в коде страницы подключение компонентов производится с использованием функции IncludeComponent(). В качестве параметров функции указываются название компонента, название шаблона, а также параметры компонента, заданные при его добавлении на страницу.
Управление содержимым компонента
Управление содержимым сайта, выводимым с помощью компонента, осуществляется как через публичную, так и через административную часть. Для создания и редактирования контента средствами публичного интерфейса необходимо перейти на закладку Редактирование. Для каждого компонента отображается кнопка, содержащая меню команд управления содержимым (рис. 3.2).
Рис. 3.2. Меню команд кнопок для управления контентом.
Данные пункты меню также доступны в режиме разработки и настройки сайта (закладка Разработка). Они отделены от команд редактирования компонентов горизонтальной линией (рис. 3.3).
Рис. 3.3. Меню команд компонента.
Команды управления содержимым для разных компонентов могут различаться в зависимости от компонента и информации, которую он выводит (рис. 3.2).
Типовые команды:
Создать элемент - открывается форма создания элемента инфоблока.
Создать раздел - открывается форма создания раздела инфоблока.
Редактировать пункты меню - открывается форма редактирования пунктов меню.
Редактировать включаемую область - открывается формы редактирования содержимого включаемой области. Может варьироваться в зависимости от настроек компонента. Например, редактировать как HTML или PHP, редактировать область страницы или раздела.
Редактирование параметров компонента
Система позволяет управлять параметрами компонента из публичной части в режиме разработки и настройки сайта (закладка Разработка). Переход к форме редактирования параметров компонента возможен с помощью:
пункта Редактировать параметры компонента меню команд компонента (рис.3.4);
Рис. 3.4. Переход к редактированию параметров компонента.
Внимание! Данный пункт меню отображается для всех компонентов, за исключением подкомпонентов в составе комплексного.
пункта с названием компонента меню кнопки Компоненты Административной панели (рис. 3.5).
Рис. 3.5. Переход к редактированию параметров компонента.
В обоих случаях открывается следующая форма настройки параметров компонента (рис. 3.6):
Рис. 3.6. Форма редактирования параметров компонента.
Копирование шаблона компонента
Если требуется изменить системный шаблон компонента под нужды конкретного дизайна сайта, то его необходимо сначала целиком скопировать в папку шаблона сайта, а только потом перейти к редактированию скопированного шаблона.
Копирование шаблона компонента выполняется с помощью удобного интерфейса публичного раздела. Для этого воспользуйтесь пунктом Копировать шаблон компонента меню команд кнопки управления компонентом (рис. 3.7).
Рис. 3.7. Переход к копированию шаблона компонента.
В открывшейся форме укажите параметры копирования шаблона (рис. 3.8).
Рис. 3.8. Форма копирования шаблона компонента.
Шаблон компонента, скопированный в один из шаблонов сайта, называется пользовательским. Теперь его можно изменять под конкретные требования дизайна.
Редактирование шаблона компонента
Чтобы начать работу по редактированию шаблона компонента, требуется скопировать системный шаблон компонента в один из шаблонов сайта, т.е. сделать компонент сделать пользовательским.
Обратите внимание! Не рекомендуется производить редактирование системных компонентов и их шаблонов, расположенных в папке /bitrix/components/bitrix/. Эта папка обновляется системой обновлений, поэтому все изменения, произведенные пользователем, будут потеряны.
Быстрый переход к редактированию шаблона компонента выполняется из публичного раздела в режиме разработки и настройки сайта (закладка Разработка). Для этого служит пункт Редактировать шаблон компонента меню команд кнопки управления компонентом (рис. 3.9).
Рис. 3.9. Переход к редактированию шаблона компонента.
Если данный пункт меню выбран для простого компонента, то откроется форма редактирования файла template.php (файл шаблона простого компонента, рис. 3.10).
Рис. 3.10. Редактирование шаблона простого компонента.
Если же пункт меню был выбран для комплексного компонента, то откроется форма редактирования файла имя_компонента.php (файл-шаблон, определяющий расположение подкомпонентов, рис. 3.11).
Рис. 3.11. Редактирование общего шаблона комплексного компонента.
Поскольку комплексный компонент является многостраничным, т.е. состоит из подкомпонентов, то невозможно сразу отредактировать весь его шаблон. Выполняется редактирование шаблонов необходимых включенных в него простых компонентов. Переход к редактированию шаблона подкомпонента выполнятся с помощью пункта Редактировать шаблон компонента меню команд кнопки управления подкомпонентом (рис. 3.12).
Рис. 3.12. Переход к редактированию подкомпонента.
Редактирование CSS-файла шаблона компонента
Задание внешнего оформления компонента осуществляется с помощью редактирования файла стилей style.css. Для быстрого перехода к редактированию стилей шаблона компонента используйте команду Редактировать CSS-файл шаблона (рис. 3.13).
Примечание: данная команда доступна в том случае, если для компонента применен пользовательский шаблон.
Рис. 3.13. Переход к редактированию файла стилей компонента.
Редактирование файла стилей осуществляется в соответствии с общими правилами CSS, система не накладывает на это никаких ограничений.
|
