Руководство для разработчика битрикс

• Контент-менеджерам
• Администраторам
• Разработчикам

Контент-менеджерам

Задачи по работе с системой	Информация
Перед началом работы. Работа над контентом невозможна без авторизации. Как авторизоваться на сайте? Что такое одноразовые пароли и как с ними работать?	Авторизация
Интерфейс программы. Работать с любой программой невозможно, если не понятно назначение той или иной кнопки или команды. Как работать с новым интерфейсом Эрмитаж? Как работать с интерфейсом в старых версиях программы?	Элементы управления
Как работать с информацией. Информация бывает разной: статической и динамической, текстовой и графической. Как управлять той или иной информацией? Как размещать ее на страницах сайта? Как создать саму страницу или раздел и задать их свойства?	Информация на сайте и работа с ней
Структура сайта. Любой сайт состоит из разделов и страниц. Как легко и просто управлять структурой сайта в текущей работе? Приемы работы. Медиабиблиотека, как хранилище видео, фото и аудиофайлов.	Управление структурой
Визуальный редактор — это основной инструмент контент-менеджера при работе с сайтом. Все о работе с редактором: как вставлять текст, форматировать и редактировать его, работа с графикой и таблицами. Сниппеты и настройка редактора «под себя». Видео по работе с визредактором.	Визуальный редактор
Информационные блоки — основное место хранения динамически выводимой информации. Необходимый уровень знаний для работы с этим инструментом системы.	Информационные блоки
Компоненты. Любая динамическая информация выводится не сама по себе, а с помощью специальных программных инструментов — компонентов. Основные моменты по работе с этими инструментами: как добавить компонент на страницу, как настроить, как работать с ним.	Компоненты
Практика. Теория — это хорошо. Но вот попробовать «ручками» — это всегда лучше. Помогут освоить работу многочисленные примеры с описанием как выполнять типовые, самые частые задачи, стоящие перед контент-менеджером.	Примеры работы с системой
Типичные ошибки. Помочь в освоении системы поможет и список наиболее частых ошибок и способов их решения.	Типичные ошибки при работе с системой

Вы можете импортировать на свой сайт курс Контент-менеджер из этого архива. Курс без вопросов для тестов.
Версия курса от 5.06.2015 года.

Администраторам

Администраторские задачи	Информация
Перед началом работы. Необходимый минимум сведений о системе: как работает, термины, структура.	Основные сведения
Установка и настройка. Как правильно установить, обновить или перенести сайт. Возможные ошибки этих процессов. Виртуальная машина для «1С-Битрикс: Управление сайтом».	Установка и настройка
Основы администрирования. Основные принципы администрирования в системе: управление сайтами, пользователями, доступом к модулям и информации, настройка интерфейса, рабочие инструменты администратора, обеспечение безопасности.	Основы администрирования
Поиск. Все о поиске информации на сайте. Настройка модуля Поиск, статистика, облако тегов и другие инструменты. Типичные ошибки.	Поиск
Информационные блоки. Подробно о самом важном модуле системы. Экспорт и импорт, примеры работы.	Информационные блоки
Примеры операций. Несколько практических примеров по работе с системой.	Примеры операций
Модули системы. В «1С-Битрикс: Управление сайтом» более 40 различных модулей, позволяющих выполнять самые разные задачи: от проведения опросов до AD/LDAP интеграции и облачных хранилищ. Детальное описание настройки и работы с модулями системы некоммерческой направленности.	Администратор. Модули
Интернет-торговля. Организация виртуального магазина и задачи, связанные с этим: работа с валютами, интеграция с 1С, торговый каталог и настройка интернет-магазина. Примеры работы.	Администратор. Бизнес

Разработчикам

Документация для разработчиков — это описание API системы. Документация для пользователей — это описание компонентов и настроек системы.

Документация доступна как в он-лайн, так и в виде файла в формате chm. Рекомендуется пользоваться он-лайн версией, как более актуальной. Файлы формата chm обновляются периодически, в них может отсутствовать информация по последним изменениям в справочной системе.

Внимание! Если вы не видите содержимое файла формата .chm, то причина — настройки безопасности операционной системы. В свойствах файла нужно снять блокировку файла от просмотра. Подробнее читайте в FAQ.

Системы помощи		.chm
Документация для разработчиков	Онлайн-версия	bsm_api.chm Версия документа от 04.05.2022
Документация по API D7	Онлайн-версия	api_d7.chm Версия документа от 04.05.2022
Документация для пользователей	Онлайн-версия	bsm_user.chm Версия документа от 04.05.2021
REST API для разработчиков	Онлайн-версия	b24_rest.chm Версия документа от 04.05.2022

Документация — это справочная информация. Начинающему разработчику её не достаточно для работы с системой. В освоении принципов программирования в Bitrix Framework вам поможет специальный курс:

Разработчик Bitrix Framework	Разделы
Перед началом работы. Что такое Bitrix Framework и чем эта платформа отличается от других систем. Сообщество разработчиков.	Что такое Bitrix Framework?
Золотые правила работы с Bitrix Framework. Универсальные правила работы с продуктами Bitrix Framework на каком бы уровне подготовки вы не находились.	Золотые правила
Как создать простой сайт. Чтобы уметь создавать сайты на начальном уровне необходимо освоить систему на уровне работы штатным функционалом. Практически без кодирования. Кодирование нужно только при создании шаблона и это кодирование — знание HTML.	Junior
Средний уровень подготовки. Вы уже можете работать со штатным функционалом. Теперь надо овладеть API и другим возможностями системы: настройка системы, ORM, SEF, кастомизация компонентов, агенты и события и многое другое.	Middle
Senior — высший уровень квалификации. Программист этого уровня должен уметь читать исходный код, уметь работать с Базой данных, разбираться в вопросах производительности и безопасности, уметь кастомизировать административный раздел и создавать новые компоненты и модули.	Senior

Как отформатирован текст в курсе

Читать монотонный текст сложно. Форматирование — один из способов облегчить понимание смысла. Опишем правила форматирования, чтобы вам было легче ориентироваться.

Что такое Bitrix Framework?

Bitrix Framework — это созданная на основе PHP платформа для разработки веб-приложений. На этой платформе компанией «1C-Битрикс» созданы два популярных продукта: «1C-Битрикс: Управление сайтом» и «1С-Битрикс: Корпоративный портал».

Продукт «1C-Битрикс: Управление сайтом» представляет собой программное ядро для всестороннего управления веб-проектами любой сложности.

Продукт «1С-Битрикс: Корпоративный портал» — готовый продукт, позволяющий создать корпоративный портал компании, с возможностью доработки штатного функционала под потребности компании.

В отличие от Zend Framework при разворачивании Bitrix Framework мы получаем не только набор классов, но и развитый интерфейс администрирования.

В базовой поставке идёт большой набор компонентов, и именно он обеспечивает быстрое развёртывание и внедрение проектов.

Продукты на базе Bitrix Framework выходят в нескольких редакциях. Изучая систему и повторяя уроки необходимо быть уверенным, что ваша локальная установка имеет модуль, с которым вы экспериментируете. Помодульное сравнение редакций: для 1С-Битрикс: Управление сайтом, для 1С-Битрикс: Корпоративный портал.

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

Список ссылок по теме:

• Продукты, созданные на Bitrix Framework
• Решения на базе продуктов
• Виртуальная лаборатория для изучения продуктов и решений Bitrix Framework
• Маркетплейс сайт продуктов и решений от партнёров 1С-Битрикс.

Как изучать Bitrix Framework?

Где брать информацию?

Все продукты компании «1С-Битрикс» сопровождаются полной документацией, которая расположена на сайте в разделе Документация.

Сообщество разработчиков

За время развития продукта сложилось свое сообщество разработчиков на Bitrix Framework. Это сообщество представлено на сайте компании «1C-Битрикс» и обменивается опытом работы и результатами работы на форуме компании, в группах социальной сети и на собственных сайтах.

Совет: Пока вы не овладеете в полной мере терминологией Bitrix Framework, рекомендуем при описании проблемы избегать терминологии, известной вам по другим CMS.

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

Внимание! Форум сайта не является службой техподдержки. Техподдержка работает согласно регламенту и в другом разделе сайта.

Рекомендуется познакомиться с опытом разработок сайтов на системе Bitrix Framework, который описывается в блогах разработчиков Bitrix Framework и в группах Социальной сети сайта компании 1С-Битрикс. Так же будет полезно заглядывать на ХаброБитрикс и официальный блог Битрикса на Хабре.

Для тех, кто переходит на Bitrix Framework с других платформ

Глоссарий

Каждая платформа имеет свои термины, используемые в работе. Чтобы без проблем ориентироваться в документации, учебных курсах, при общении с разработчиками желательно объяснять ваши трудности не «на пальцах», а на языке понятном специалистам. Ниже в помощь вам приведен глоссарий терминов системы и несколько общих терминов, активно используемых в системе.

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

require($_SERVER["DOCUMENT_ROOT"].
"/bitrix/modules/main/include/prolog_before.php");
...
require($_SERVER["DOCUMENT_ROOT"].
"/bitrix/modules/main/include/prolog_after.php");

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");

require($_SERVER["DOCUMENT_ROOT"].
"/bitrix/modules/main/include/epilog_before.php");
...
require($_SERVER["DOCUMENT_ROOT"].
"/bitrix/modules/main/include/epilog_after.php");

Золотые правила работы с Bitrix Framework

Перед тем как начать работать в Bitrix Framework, необходимо понять основные правила, следование которым поможет избежать многих и многих ошибок:

• Что важно помнить при работе над сайтом:
  1. Нельзя править на «боевом» сайте. Необходимо вести разработку на копии сайта с использованием режима [ds]Установка для разработки[/ds][di]Начиная с версии 16.5.7 и старше, в продуктах «1С-Битрикс» можно пометить новую или существующую установку продукта специальным маркером Установка для разработки. Маркер позволяет проводить тестирование, не устанавливая продукт локально.

     Подробнее …[/di]

  2. Если в силу каких-то причин [dw]приходится править[/dw][di]При должном уровне квалификации и обоснованных доводах почему именно так нужно.[/di] на живом сайте, то нужно всегда иметь доступ к FTP или SSH, так как административная часть из-за ошибок в коде может оказаться недоступной.
  3. Всегда должен быть наготове свежий бекап.
  4. Для случая, когда доработки значительны, когда работает команда из нескольких человек крайне рекомендуется использовать [ds]систему контроля версий[/ds][di]Организовать сопровождение проекта с помощью системы контроля версий не сложно, если ограничиваться файлами. Для этого можно использовать, например, Mercurial — кроссплатформенную распределённую систему управления версиями, разработанную для эффективной работы с очень большими репозиториями кода.

     Подробнее …[/di].

• Если вы хотите внести какие-то изменения в работе сайта, то:
  • Сначала формализуйте свои требования на листе бумаги, а не кидайтесь править код.
  • После этого заново просмотрите все случаи использования на сайте модифицируемого вами блока. Убедитесь, что всё логично. Очень часто делают небольшие, казалось бы, изменения, а потом оказывается, что страдает связанный функционал, о котором не подумали или забыли.
  • После того, как вы формализовали потребности в изменениях, посмотрите, какие сущности эти требования затрагивают.
  • Только после этого подумайте, какие средства использовать для достижения своих целей.
• Способы внесения изменений и желательный порядок их применения:
  • сначала попытайтесь сделать это редактированием шаблона самого сайта и файлов CSS;
  • если предыдущее невозможно, то попытайтесь сделать это средствами редактирования страницы сайта;

    Примечание: К этому пункту нужно подходить крайне осторожно. Бездумное добавление кода может привести к тому, что компоненты будут обрамляться кодом, который должен быть в шаблоне компонента, а не на странице. Размещение php-кода на странице грозит проблемами. Если контент-менеджер откроет страницу через визуальный редактор, то легко можно «все сломать»:

    • визуальный редактор на этапе разбора и визуализации содержимого страницы может допустить ошибки,
    • контент-менеджер может случайно внести правки «несовместимые с жизнью» в php-код и даже не поймет этого.
  • при невозможности реализации задачи с помощью первых вариантов переходите к редактированию шаблонов компонента и файлов CSS компонента, либо изменяйте вывод данных с помощью файлов result_modifier.php и component_epilog.php
  • используйте обработчики событий, которые позволяют решать очень широкий спектр задач.
  • кастомизация компонента или разработка собственного компонента или модуля — последний из возможных вариантов получения нештатного функционала.
• Не рекомендуется писать код HTML в код PHP для изменения представления данных. В компонентах 2.0 разделены логика и представление. Логика — это сам компонент, представление — это шаблон вывода компонента. Шаблон существенно проще, чем компонент в целом. Нет необходимости изменять логику компонента для изменения особенностей показа его данных. Для одной логики может быть несколько представлений, в том числе зависящих от шаблона текущего сайта. Представление (шаблон вывода) может быть написано на любом шаблонном языке, который можно подключить из PHP. Например, шаблоны могут быть на PHP, Smarty, XSL и т.д. Использование стороннего шаблонизатора должно быть четко обосновано, его использование должно давать какие-то преимущества перед штатными средствами.
• Собственные компоненты и шаблоны — в собственном пространстве имен. Кастомизируя штатные компоненты и шаблоны, разрабатывая собственные, размещайте их в собственном пространстве имен. При обновлении системы все внесенные изменения в пространстве bitrix затираются.
• При работе с компонентами не надо обращаться к базе напрямую. Концепция работы с продуктом предполагает работу с данными через функции API. Структура данных может меняться от версии к версии, а функции сохраняют обратную совместимость. Мы настоятельно не рекомендуем использовать прямые запросы к БД, т.к. это может нарушить целостность данных и привести к неработоспособности сайта. В силу вышесказанного структура таблиц не афишируется.
• Запрещается править код ядра в силу нескольких причин:
  • при обновлении системы внесенные изменения затрутся;
  • при изменении ядра владелец лицензии теряет право на техническую поддержку;
  • при изменении ядра разработчиком сайта возможна некорректная работа системы, так как ядро — сложная система, требующая учета работы всех модулей.

  Ядро продукта — файлы, находящиеся в директории /bitrix/modules/ а так же файлы системных компонентов: /bitrix/components/bitrix/.

  Модификация ядра — это мера, которая возможна только в крайних случаях. Допустимо только разработчиками уровня Senior при полном понимании:
  — зачем это нужно и
  — последствий в виде потери возможности штатного обновления через систему обновлений и отказа вендора от технической поддержки такого сайта.

• Если вы сопровождаете живой сайт и заказчик просит провести работы по доделке-расширению функционала, то сначала проверьте, а пользуются ли вообще этим функционалом. Проверить можно так:
  • Статистика посещаемости — Внутренняя статистика, Яндекс.Метрика, Google Analytics или Liveinternet
  • Артефакты внутри Bitrix Framework: результаты веб-форм, заказы, скачивания (в Яндекс.Метрике есть нужный отчёт и отлично работает) и т.д.
  • Карты кликов в Яндекс.Метрике.

  Если блок мёртвый, то лучше его вообще убрать или [dw]переформулировать ТЗ[/dw][di]В большинстве случаев это задача не разработки, а проектного отдела, проект менеджеров, руководства, в крайнем случае тим лида, если он контактирует с клиентами.
  Кроме того, зачастую заказчик хочет доделать функционал, вне зависимости от того, пользуются или нет им, он платит за это деньги. А экспертиза обычного разработчика может быть вовсе не достаточна для такой оценки. Возможно клиент планирует дальнейшие шаги, рекламу и т. п.[/di].

Junior, Как создать простой сайт

Самый первый и самый простой по сложности пример создания сайта на «1С-Битрикс: Управление сайтом». Освоив эту главу вы сможете назвать себя разработчиком начального уровня.

Чтобы уметь создавать сайты на начальном уровне необходимо освоить систему на уровне работы штатным функционалом. Практически без кодирования. Кодирование нужно только при создании шаблона и это кодирование — знание HTML.

К концу изучения главы вы должны уметь:

1. Устанавливать систему
2. Создавать простейший шаблон сайта и применять его к сайту, разделу, странице.
3. Интегрировать компоненты в шаблон сайта.
4. Создавать, настраивать и применять информационные блоки.
5. Управлять метаданными и заголовками.
6. Управлять штатными инструментами кеширования.
7. Создавать страницы и разделы.
8. Задавать права доступа к страницам и разделам.

Типовой порядок действий

Примерный алгоритм действий по созданию простого сайта следующий:

• Получение верстки и ознакомление с техническим заданием на сайт;
• Определение необходимого числа шаблонов и их структуры;
• [ds]Установка дистрибутива[/ds][di]Описание предварительных шагов для установки продукта, шагов мастера установки, а также выбора и первоначальной настройки решений для быстрого развертывания своего проекта.

  Подробнее …[/di] «1C-Битрикс»;

• Создание сайта в Административном разделе;
• Создание шаблонов и применение их к сайту;
• Создание и настройка необходимых элементов шаблона для SEO-продвижения сайта;
• Создание структуры сайта;
• Создание и настройка инфоблоков;
• Создание шаблонов визуальных компонентов;
• Тестирование.

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

Сайт в понятии Bitrix Framework

Сайт — это совокупность:

• Учетной записи в базе данных, которая создаётся в административном меню на странице Список сайтов (Настройки > Настройки продукта > Сайты > Список сайтов) и включает в себя следующие основные параметры:
  • идентификатор — набор символов, идентифицирующий сайт;
  • доменное имя — одно или более доменное имя сайта;
  • папка сайта — путь к каталогу, в котором будет храниться публичная часть сайта;
  • язык сайта;
  • Региональные настройки;
  • URL — протокол и доменное имя по умолчанию (например, http://www.site.ru)
  • DocumentRoot (Путь к корневой папке веб-сервера для этого сайта) — параметр заполняется при использовании многосайтовости системы.
  • условия подключения шаблонов: каждый сайт может иметь один или более шаблонов для отображения страниц публичной части, каждый такой шаблон может быть подключен по тому или иному условию.
• Публичной части — совокупности скриптов (страниц) лежащих в папке сайта и принадлежащих этому сайту.
• Настроек. Некоторые модули имеют ряд настроек связанных с сайтом, например, у модуля Информационные блоки эти настройки представляют из себя привязку информационного блока к тому или иному сайту, у модуля Техподдержка — привязку статуса, категории и т.п. к сайту.

Структура

Структура сайта в рамках Bitrix Framework:

• Шаблон — определяет представление сайта пользователям. Существуют шаблоны компонентов и шаблоны сайта.
• Компоненты — задают вывод данных.
• Страница — элемент структуры сайта.

В этой главе будут описаны Страница и Шаблон сайта, как элементы структуры. Компоненты описаны в отдельной главе.

Что такое страница

Язык и языковые файлы

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

В административной части язык определяет формат времени и даты, кодировку страниц. В публичной части — данные параметры определяются настройками сайта.

Языковые файлы

Языковой файл — PHP скрипт, хранящий переводы языковых фраз на тот или иной язык.

Данный скрипт состоит из массива $MESS, ключи которого — идентификаторы языковых фраз, а значения — переводы на соответствующий язык.

Для каждого языка существует свой набор языковых файлов, хранящихся в подкаталогах /lang/ структуры файлов системы или модуля. Языковые файлы как правило используются в административных скриптах модулей или в компонентах.

Выбор кодировки сайта

Перед создателем сайтов всегда встает проблема: в какой кодировке создавать проект. В русскоязычном интернете используются две кодировки:

UTF-8 (от англ. Unicode Transformation Format) — в настоящее время распространённая кодировка, реализующая представление Юникода, совместимое с 8-битным кодированием текста.

и

Windows-1251 (или cp1251) — набор символов и кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows.

UTF-8 более перспективна. Но у любой вещи есть недостатки. И решение об использовании какой-то кодировки только потому, что она перспективна, без учета многих других факторов, не представляется правильным. Выбор будет оптимальным только тогда, когда он полностью учитывает все нюансы конкретного проекта. Другое дело, что предусмотреть все нюансы — само по себе весьма не просто.

Мы считаем, что использование UTF-8 предпочтительнее, но решать что выбрать — это дело разработчика проекта. А для облегчения этого выбора используйте сравнительную таблицу особенностей обеих кодировок.

Список ссылок по теме:

• Конвертация сайта из cp1251 в UTF-8 (блог)
• Конвертация сайта из cp1251 в UTF-8 (учебный курс)

Техническое задание на сайт

Техническое задание — исходный документ на проектирование технического объекта. ТЗ устанавливает основное назначение разрабатываемого объекта, его технические и тактико-технические характеристики, показатели качества и технико-экономические требования, предписание по выполнению необходимых стадий создания документации (конструкторской, технологической, программной и т. д.) и её состав, а также специальные требования.

Составление технического задания — обязательный шаг для разработки качественного, удовлетворяющего пользователя сайта. Обычно клиенты обращаются за разработкой сайта, не имея ни постановки задачи, ни, тем более, технического задания. А лишь имея некое формальное описание того, чего бы им хотелось получить в итоге. Такое формальное описание называется «бриф».

Бриф может быть таким как в примере, а может быть гораздо обширнее и походить на постановку задачи.

Чтобы начать разработку проекта, необходимо подготовить всю необходимую документацию:

• Постановка задачи, составляется после анализа брифа от заказчика;
• Техническое задание, составляется после того, как с постановкой задачи разобрались;
• ER-диаграмма — инфологическая или даталогическая (т.к. в 1С-Битрикс для хранения информации используются инфоблоки, то эти модели как бы совмещены) модель. На этой диаграмме отображаются все ваши сущности (инфоблоки) и связи между ними.
• Прототип будущего сайта. Для больших проектов рисуется подробный прототип в специализированных программах, например, Axure.

Для небольших проектов острой необходимости в документации нет, есть несколько разработчиков, один заказчик и небольшой функционал. Все держится в голове. Фиксировать необходимо только основные договоренности с заказчиком.

NAME: S [1]
CODE: S [1]
PREVIEW_TEXT: S* - звёздочка у меня означает, что текст многострочный
DURATION_FROM: D
DURATION_TO: D
PRODUCT: E ----------------------------------------------------------------> здесь может выходить связь к другому блоку

Для небольших проектов достаточно «начертить» прототипы в графическом редакторе или на бумаге.

После готовности такого пакета документации можно смело приступать к реализации проекта:

• разработка дизайна;
• интеграция дизайна в систему 1С-Битрикс;
• создание структуры сайта;
• разработка функционала;
• тестирование;
• внедрение и сопровождение.

Список ссылок по теме:

• Обязательные вопросы, которые нужно задавать в первую очередь для составления ТЗ на разработку интернет-магазина (блог)
• Образец постановки задачи
• Образец Технического задания

Базовый шаблон

Веб-дизайн – это прежде всего разработка интерфейса, среды взаимодействия пользователя с информацией, а не просто «красивая картинка». Надо учитывать особенности веб-среды, такое понятие как удобство использования (usability), направленность на цели создания сайта. Важно учесть основные сценарии поведения пользователя, особенности целевой аудитории.

Когда дизайн готов, обычно применяется один из двух технологических процессов по интеграции дизайна в систему управления: либо разработчик сам верстает (т.е. переводит из графического эскиза в HTML) макет сайта, либо ему предоставляется уже готовая верстка, и он ее интегрирует в сайт. Вопросы создания верстки не входят в программу обучения Bitrix Framework, поэтому речь пойдет о готовом, сверстанном шаблоне.

Определение количества необходимых шаблонов

Перед началом работы необходимо определить, сколько различных шаблонов сайта понадобится. Обычно при разработке сайта прорисовываются все различные страницы или основные элементы сайта.

Bitrix Framework позволяет использовать неограниченное число шаблонов и назначать их по разным условиям. Рассмотрим простейший вариант, что на всех этих страницах простого сайта фактически меняется только контентная часть, а дизайн – не изменяется. Исключение составляет главная страница, у которой контентная область устроена по-другому (не содержит заголовка страницы) и разделена на две части. Это можно реализовать как дополнительными условиями в шаблоне сайта, так и созданием двух шаблонов. Рекомендуется использовать дополнительные условия, в этом случае потребуется всего один шаблон сайта.

Редактирование шаблона

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

• Создав (открыв для редактирования) нужный шаблон (Настройки > Настройки продукта > Сайты > Шаблоны Сайтов);
• Выбрав Шаблон в меню Пуск (Настройки > Настройки продукта > Сайты > Шаблоны Сайтов);
• С помощью кнопки Шаблон сайта на Панели управления (Шаблон сайта > В Панели управления > Редактировать шаблон);
• Прямое редактирование файлов header.php и footer.php в папке шаблона.

Структурное деление шаблона

Проанализируйте шаблон и определите, какая часть кода должна относиться к Прологу (файл header.php), какая к Эпилогу (файл footer.php), а какая часть — к Рабочей области страницы. Выбранные части кода должны быть размещены в соответствующих файлах, а рабочая область должна быть отмечена тегом #WORK_AREA# в шаблоне сайта.

Добавьте соответствующий этим частям код в указанные файлы. Либо, если редактирование происходит в редакторе, разделите их тегом #WORK_AREA#, удалив из шаблона контентную часть.

Служебные директивы

Необходимо заменить некоторые части верстки на служебные директивы Bitrix Framework для создания шаблона:

• Заменить подключение стилей и, возможно, javascript файлов на директиву <?$APPLICATION->ShowHead()?>
• Заменить прописанный явно заголовок страницы на <title><?$APPLICATION->ShowTitle()?></title>
• Сразу после тэга <body> добавить <?$APPLICATION->ShowPanel();?>. Если этого не сделать, Панель управления не появится.
• Перед всеми картинками добавить путь к ним <? SITE_TEMPLATE_PATH?>/images/
• Заменить контент на специальный разделитель — #WORK_AREA#

Картинки и файлы стилей

Все изображения, относящиеся к шаблону размещаются в папке /bitrix/templates/ID шаблона сайта/images/.

Описания стилей из представленной верстки переносятся в файл: /bitrix/templates/ID шаблона сайта/styles.css.

Описания стилей шаблона переносятся в файл /bitrix/templates/ID шаблона сайта/template_styles.css.

Список ссылок по теме:

• Управление шаблоном дизайна сайта в курсе Разработчик Bitrix Framework
• Верстка под битрикс и создание шаблона – особенности, проблемы, рекомендации от Алексея Валеева

Что такое Шаблон сайта

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("1C-Битрикс: Управление сайтом");
?>
Тело документа. Содержательная часть.



  


                       
  



<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>

Список ссылок по теме:

• Применение шаблона дизайна в курсе Контент-менеджер
• Шаблоны дизайна в курсе Администратор. Базовый
• Шаблон сайта в Документации для разработчиков.

Создание и управление шаблоном

Управление шаблонами дизайна осуществляется в административном разделе на странице Шаблоны сайта (Настройки > Настройки продукта > Сайты > Шаблоны сайтов), где можно:

• Создать новый;
• Отредактировать существующий шаблон;
• Импортировать/Экспортировать шаблон;

Создание шаблона

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

При создании нового шаблона через интерфейс задается:

• его идентификатор;
• название;
• описание для показа в списке;
• порядок следования в общем списке шаблонов;
• тип шаблона;
• код шаблона внешнего вида сайта;
• таблицы стилей:
  • Закладка Стили сайта служит для описания таблиц каскадных стилей (CSS), используемых на страницах сайта. Описание стилей хранится в файле styles.css в папке шаблона сайта.
  • Закладка Стили шаблона служит для описания таблиц каскадных стилей (CSS), используемых в шаблоне. Описание стилей хранится в файле template_styles.css в папке шаблона сайта.
• набор используемых включаемых компонентов и картинок.

При сохранении шаблона автоматически создается поддиректория /bitrix/templates/<идентификатор_шаблона>.

Все графические элементы, используемые в шаблоне, рекомендуется размещать в директории /bitrix/templates/<идентификатор_шаблона>/images/.

Примечание: На время создания шаблона рекомендуется отключить кеширование.

Для наглядного представления шаблона в списке может использоваться его скриншот. Скриншот размещается в папке соответствующего шаблона в файле с именем screen.gif (например, /bitrix/templates/books/screen.gif).

Редактирование шаблона

Чтобы просмотреть или поменять структуру и программный код шаблона, перейдите в режим редактирования, выбрав в меню действий пункт Изменить в списке шаблонов, либо используйте пункт [dw]Редактировать шаблон[/dw][di][/di] меню кнопки Шаблон сайта на административной панели в Публичном разделе.

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

Внимание! В шаблоне дизайна сайта крайне не рекомендуется использовать комплексные компоненты.

Экспорт/Импорт шаблона

С помощью интерфейса системы используемый на сайте шаблон может быть выгружен в файл формата <имя_шаблона>.tar.gz. Для выгрузки шаблона служит пункт контекстного меню Скачать.

Готовый шаблон можно импортировать в виде комплекта файлов с помощью менеджера файлов либо с помощью специального интерфейса системы. На странице со списком шаблонов имеется специальная кнопка контекстной панели Загрузить шаблон.

При нажатии на кнопку открывается форма:

• С помощью кнопки Обзор… укажите файл с шаблоном для загрузки.

  Примечание: Файлы шаблона должны быть в кодировке UTF-8.

При загрузке по умолчанию шаблон будет распакован и помещен в папку с именем, соответствующим имени загружаемого файла (/bitrix/templates/<идентификатор_шаблона>/). Например, если имя загружаемого файла template1.tar.gz, то шаблон будет автоматически помещен в папку .../template1/, а самому шаблону будет присвоен идентификатор (ID) template1.

• Для того чтобы шаблону был присвоен другой идентификатор, а сам шаблон был размещён в папке с соответствующим именем, в поле Код шаблона указывается нужный код шаблона.
• Также можно привязать загруженный шаблон как шаблон по умолчанию для выбранного сайта с помощью соответствующей опции.

Разработка шаблона дизайна

Процесс создания шаблона сайта включает два основных этапа:

<?if ($APPLICATION->GetProperty(“SECT_PROP”)=="Y"):?>

Включаемые области

О работе с включаемыми областями смотрите курс Контент-менеджер

Пример. Использование Включаемых областей

Задача: Сайт разделен на несколько разделов. По замыслу у каждого раздела должна быть своя «шапка» в дизайне. Более в дизайне ничего не меняется. Как лучше реализовать смену «шапок» разделов?

Решение: В шаблон подключается компонент «Включаемая область (для раздела)»:

<div id="header">
<?$APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(
   "AREA_FILE_SHOW" => "sect",
   "AREA_FILE_SUFFIX" => "headerinc",
   "AREA_FILE_RECURSIVE" => "Y",
   "EDIT_TEMPLATE" => "sect_headerinc.php"
   ),
   false
);?>
</div>

Код шапки каждого из разделов будет храниться в файле sect_headerinc.php. Параметр "AREA_FILE_RECURSIVE" => "Y" означает, что такая же «шапка» появится у всех подразделов данного раздела, если родительский sect_headerinc.php не будет специально перекрыт у кого-то из нижележащих разделов.

Цепочка навигации

Цепочка навигации — последовательный список ссылок на разделы и страницы сайта, который показывает уровень «погружения» текущей страницы в структуру сайта.

Значения, подставляемые в навигационную цепочку, могут быть заданы как для каждого раздела, так и для отдельного документа.

Цепочка навигации помогает посетителю легко ориентироваться на сайте: быстро вернуться на главную страницу или подняться на один (или более) уровень вверх, т.е. перейти из подраздела в раздел.

В этом разделе приводится описание структуры шаблона и данных, на основе которых выполняется построение и отображение цепочки навигации, а также приемы управления показом цепочки навигации на страницах сайта.

Управление навигационной цепочкой

Примеры работы с навигационной цепочкой

Как добавить свой пункт в цепочку навигации?

С помощью функции AddChainItem() :

<?
$APPLICATION->AddChainItem("Форум &quot;Отзывы&quot;", "/ru/forum/list.php?FID=3");
?>

На главной не отображается цепочка навигации

Цитата: В шаблоне сайта в цепочке навигации выводится название только инфоблоков. Заголовки страниц (допустим контакты) не выводит, заголовок «главная» тоже не отображается.
Подскажите что не так?!

Для главной страницы необходимо в свойствах страницы в поле NOT_SHOW_NAV_CHAIN установить значение N.

Для остальных страниц необходимо проверить, установлены ли заголовки в свойствах разделов. Именно заголовки разделов берутся для создания пунктов навигационной цепочки.

Главная страница может также не отображаться по причине неправильно установленной опции Номер пункта, начиная с которого будет построена навигационная цепочка в параметрах компонента Навигационная цепочка: 0 (значение по умолчанию) означает, что построение навигационной цепочки начнется от корня сайта. В случае если заполнено поле Путь, для которого будет построена навигационная цепочка, то номер пункта считается в указанном пути.

Повторение пунктов в цепочке навигации

Первое название берется из свойств директории video (файл .section.php), а второе — компонентом, расположенном на странице (в данном случае адрес страницы section.php).

Примечание: Например, у компонента Новости (bitrix:news) в его параметрах присутствуют соответствующие опции: Включать инфоблок в цепочку навигации и Включать раздел в цепочку навигации.

Повторение элементов в цепочке навигации также может быть вызвано наличием нескольких компонентов на странице, которые настроены на добавление своих пунктов в цепочку.

Как сделать, чтобы в навигационной цепочке присутствовал только физический раздел?

Используется комплексный компонент «Новости» для вывода раздела из инфоблока. В навигационной цепочке помимо физического раздела, появляется некликабельное название раздела самого инфоблока. В настройках ни раздел, ни инфоблок не включен в НЦ.

Решение: Добавьте в шаблон строку:

"ADD_SECTIONS_CHAIN" => $arParams["ADD_SECTIONS_CHAIN"],

Меню сайта

Меню — это элемент дизайна, являющийся основным средством навигации по сайту.

Типы меню

Тип меню – принцип организации меню. По умолчанию в дистрибутиве используется два типа меню: Верхнее (как главное) и Левое (как меню разделов).

Типов меню может быть несколько, в зависимости от задач сайта: верхнее, левое, нижнее и т.п. В каждом компоненте меню могут быть применены два типа меню: одно как основное, второе как дополнительное при условии использования многоуровневых шаблонов.

В самом общем случае на сайте существует одно «основное» меню (1), соответствующее самому верхнему уровню иерархии и отображаемое во всех разделах сайта. Также в системе часто используется «второстепенное» меню (или меню второго уровня) (2 и 3), включающее ссылки на подразделы и документы текущего раздела.

Меню в системе наследуемое. Это значит, что если для одного компонента Меню в шаблоне выбран определенный тип меню, то это меню будет транслироваться ниже на все разделы и страницы сайта с этим шаблоном, если в этих разделах и страницах не было созданного собственного меню. Этот механизм удобен для главного меню сайта, обычно ему присваивают тип Верхнее.

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

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

Типы используемых на сайте меню задаются из административного раздела на странице настроек модуля Управление структурой.

Например, пусть в системе используются два типа меню:

• левое меню – тип left;
• верхнее (основное) меню – тип top.

Тип меню, заданный в настройках модуля Управления структурой, будет использован как префикс файла меню, а также для идентификации файлов с пунктами меню (например, .top.menu.php).

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

Примечание: Типы меню могут быть заданы отдельно для каждого сайта.

Типы меню задаются произвольно (только символами латинского алфавита). Однако для упрощения управления меню рекомендуется давать типам меню значимые имена. Например, top, left, bottom.

Построение и показ меню

В общем случае задача формирования меню включает:

• выделение HTML элементов для построения меню;
• создание шаблона меню (создание шаблона компонента Меню);
• включение функции показа меню (вызов компонента Меню) в общем шаблоне («прологе» и «эпилоге»);
• заполнение меню в соответствии со структурой сайта.

Структура меню

Любое меню на сайте строится на основе двух составляющих:

• массива данных $aMenuLinks, определяющего состав меню, задает названия и ссылки для всех пунктов меню. Управление массивом данных осуществляется через административный интерфейс;
• шаблона внешнего представления меню. Шаблон меню – это PHP код, определяющий внешний вид меню (шаблон компонента Меню). Шаблон меню обрабатывает массив данных, выдавая на выходе HTML-код.

Массив данных меню

Данные для каждого типа меню хранятся в отдельном файле, имя которого имеет следующий формат: .<тип меню>.menu.php. Например, для хранения данных меню типа left будет использоваться файл .left.menu.php, а для хранения данных меню типа top — файл .top.menu.php.

Меню является иерархически наследуемым. Файлы меню размещаются в папках тех разделов сайта, где требуется показ соответствующих типов меню. Если для данного раздела не создан соответствующий файл меню, система производит поиск файла в каталоге уровнем выше.

Например, т.к. основное меню (в демо-версии продукта, это меню типа top) должно выводиться во всех разделах, то файл данного меню помещается только в корневой каталог сайта.

Соответственно меню второго уровня (в демо-версии продукта, это меню left) выводится отдельно для каждого раздела сайта. Поэтому в папке каждого раздела создается свой файл для данного типа меню.

Ещё пример: посетитель находится в разделе /ru/company/about/. Для показа меню типа left файл меню ищется системой в следующей последовательности:

1. /ru/company/about/.left.menu.php
2. /ru/company/.left.menu.php
3. /ru/.left.menu.php
4. /.left.menu.php

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

Система Bitrix Framework позволяет также создавать [dw]меню динамического типа[/dw][di]Для этого требуется в компоненте Меню включить опцию Подключать файлы с именами вида .тип_меню.menu_ext.php («USE_EXT» => «Y»), которая по умолчанию выключена.[/di]. Т.е. массив данных таких меню генерируется автоматически на основании некоторых данных, получаемых с помощью программного кода. Данный код должен храниться в папке соответствующего раздела сайта в файле с именем .<тип меню>.menu_ext.php.

Основная задача подобных файлов — это манипуляция массивом $aMenuLinks. Данные файлы не редактируются визуально в модуле Управление структурой, поэтому они не смогут быть случайно отредактированы при визуальном редактировании меню. При создании этого файла используйте компонент Пункты меню (bitrix:menu.sections).

Примечание: В абзаце выше речь идёт только о дополнении созданного меню названиями разделов инфоблоков. Например, для дополнения меню названиями форумов этот вариант не годится.

Внимание! Если в качестве пунктов меню используются разделы каталога без ЧПУ, необходимо указывать переменные в значимых переменных запроса.

Примером такого меню может служить левое меню раздела Каталог книг, представленное в старой демо-версии продукта. Здесь первые два пункта меню Авторы и Рецензии созданы обычным способом, а остальные (Бизнес-литература, Детская литература и т.д.) формируются динамически.

В данном случае в качестве пунктов меню используются названия групп каталога Книги, созданного на основе информационных блоков. Программный код, на основе которого генерируется меню, хранится в файле .left.menu_ext.php в папке /e-store/books/.

В файлах .<тип меню>.menu.php могут использоваться следующие стандартные переменные:

• $sMenuTemplate — абсолютный путь к шаблону меню (данная переменная используется крайне редко);
• $aMenuLinks — массив, каждый элемент которого описывает очередной пункт меню.

  Структура данного массива:

  Array
  (
      [0] => пункт меню 1
          Array
              (
                  [0] => заголовок пункта меню
                  [1] => ссылка на пункте меню
                  [2] => массив дополнительных ссылок для подсветки пункта меню:
                      Array
                          (
                              [0] => ссылка 1
                              [1] => ссылка 2
                              ...
                           )
                  [3] => массив дополнительных переменных передаваемых в шаблон меню:
                      Array
                          (
                              [имя переменной 1] => значение переменной 1
                              [имя переменной 2] => значение переменной 2
                              ...
                           )
                  [4] => условие, при котором пункт меню появляется 
                         это PHP выражение, которое должно вернуть "true"
              )
      [1] => пункт меню 2
      [2] => пункт меню 3
      ...
  )

Примеры файлов меню

<?
// пример файла .left.menu.php

$aMenuLinks = Array(
  Array(
    "Каталог курсов", 
    "index.php",
    Array(), 
    Array(), 
    "" 
  ),

  Array(
    "Мои курсы",
    "mycourses.php",
    Array(), 
    Array(), 
    "$GLOBALS['USER']->IsAuthorized()" 
  ),
  
  Array(
    "Журнал обучения",
    "gradebook.php",
    Array(), 
    Array(), 
    "$GLOBALS['USER']->IsAuthorized()"  
  ),

  Array(
    "Анкета специалиста",
    "profile.php",
    Array(), 
    Array(), 
    "$GLOBALS['USER']->IsAuthorized()"  
  ),
);
?>

<?
// пример файла .left.menu_ext.php

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

global $APPLICATION;

$aMenuLinksExt = $APPLICATION->IncludeComponent(
	"bitrix:menu.sections",
	"",
	Array(
		"ID" => $_REQUEST["ELEMENT_ID"], 
		"IBLOCK_TYPE" => "books", 
		"IBLOCK_ID" => "30", 
		"SECTION_URL" => "/e-store/books/index.php?SECTION_ID=#ID#", 
		"CACHE_TIME" => "3600" 
	)
);

$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>

Организация показа меню

Показ меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu). Например, вызов верхнего меню на демо-сайте имеет следующий вид:

<?$APPLICATION->IncludeComponent(
    "bitrix:menu",
    "horizontal_multilevel",
    Array(
         "ROOT_MENU_TYPE" => "top", 
         "MAX_LEVEL" => "3", 
         "CHILD_MENU_TYPE" => "left", 
         "USE_EXT" => "Y" 
     )
);?>

Данный код помещается в предусмотренные для вывода меню области шаблона сайта.

Построение меню сайта

Построение меню для показа происходит следующим образом:

• в общий шаблон показа включается вызов вывода меню на экран;
• при загрузке компонент проверяет наличие в текущем разделе сайта файла, содержащего массив значений для меню;
• затем компонент вызывает шаблон построения для данного типа меню и выводит HTML меню на экран.

Шаблоны меню

Вывод данных в компоненте Меню реализован с помощью шаблонов. Шаблоны могут создаваться пользователями самостоятельно.

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
   <?if (!empty($arResult)):?>
      <ul class="left-menu"> 
      <?foreach($arResult as $arItem):?>
          <?if($arItem["SELECTED"]):?>
               <li><a href="<?=$arItem["LINK"]?>" class="selected">
               <?=$arItem["TEXT"]?></a></li>
          <?else:?>
               <li><a href="<?=$arItem["LINK"]?>">
               <?=$arItem["TEXT"]?></a></li>
          <?endif?>
      <?endforeach?>
      </ul>
   <?endif?>

Управление меню

Управление меню выполняется как с помощью средств административного, так и публичного раздела. Про работу с меню из публичного раздела читайте в курсе Контент-менеджер.

Примеры создания меню

Описанные ниже примеры можно повторить в Виртуальной лаборатории, выбрав при установке шаблон «Демо-сайт для разработчиков».

<?
$aMenuLinks = Array(
	Array(
		"Новая страница 1", 
		"/test_menu/novaya_stranitsa_1.php", 
		Array(), 
		Array(), 
		"" 
	),
	Array(
		"Новая страница 2", 
		"/test_menu/novaya_stranitsa_2.php", 
		Array(), 
		Array(), 
		"" 
	)
);
?> 

Примеры решения частных задач в меню

Подсветка ссылок

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

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

Как сделать, чтобы отдельный пункт меню открывался в новом окне?

Для этого нужно в расширенном режиме редактирования меню прописать у нужных пунктов следующие дополнительные параметры:

Название: target 
Значение: target="_blank"

В шаблоне меню, после вывода элемента меню, необходимо заменить код:

<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>

на следующий:

<a href="<?=$arItem["LINK"]?>" <?=$arItem["PARAMS"]["target"]?>><?=$arItem["TEXT"]?></a>

Отображение пункта меню для определенных групп пользователей

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

Тип условия: Для групп пользователей
Условие: требуемые_группы_пользователей

Отображение пункта меню неавторизованным пользователям

В расширенном режиме редактирования меню необходимо установить следующее условие:

Тип условия: выражение PHP
Условие: !$USER->IsAuthorized()

Отображение пункта меню при нахождении в определенном разделе сайта

Система позволяет отображать пункт меню только при нахождении в указанном разделе сайта или на его страницах. Для этого в расширенном режиме редактирования меню в поле Тип условия необходимо выбрать опцию Для папки и файла, а в поле Условие указать путь.

Примечание: Условие Для папки и файла лучше всего применять для статических страниц и для динамических страниц с компонентами на ЧПУ. На динамических страницах без ЧПУ он не будет работать, так как производит проверку по части адреса, а в динамических страницах всегда будут присутствовать выбранные значения. Для динамических URL удобнее применять условие Параметр в URL.

Отображение определенных пунктов только на главной странице и еще в одном внутреннем разделе

В расширенном режиме в поле условие для нужных пунктов ввести выражение php:

CSite::InDir('/about/') or CSite::InDir('/index.php')

Осуществление вывода пункта меню, ссылающегося на определенный товар, связанный с товаром, открытым на данной странице

Для этого можно использовать тип условия Параметр в URL. Пункт будет отображен на страницах с определенным параметром в URL. Параметр работает с URL, в которых есть символ ?. То есть, с динамическими страницами.

Страницы, созданные на базе инфоблоков, имеют URL вида: http://сайт/раздел/index.php?SECTION_ID=***. Предположим, что на странице с SECTION_ID=123 должен быть отражен пункт меню, ведущий на страницу SECTION_ID=456.

Создадим пункт меню, ведущий на страницу http://сайт/раздел/index.php?SECTION_ID=456. В поле Тип условия выберем Параметр в URL, в первом поле Условие укажем SECTION_ID, а во втором 123.

Всплывающие подсказки для пунктов меню

Для этого необходимо в расширенном режиме редактирования меню добавить дополнительный параметр A_TITLE, и записать в него содержание всплывающей подсказки.

Название: A_TITLE
Значение: текст_всплывающей_подсказки

В шаблоне меню:

<?if($arItem["SELECTED"]):?>
		<li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
	<?else:?>
		<li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>

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

<a href="<?=$arItem["LINK"]?>" class="selected" title="<?=$arItem["PARAMS"]["A_TITLE"]?>"><?=$arItem["TEXT"]?></a>

а вторую на:

<a href="<?=$arItem["LINK"]?>" title="<?=$arItem["PARAMS"]["A_TITLE"]?>"><?=$arItem["TEXT"]?></a>

Как поставить картинки рядом с пунктами меню?

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

Название: IMG
Значение: путь_к_картинке

В шаблон меню, после вывода элемента меню, необходимо после строки (в зависимости от шаблона):

<a href="<?=$arItem["LINK"]?>">

добавить следующее:

<img src="<?=$arItem["PARAMS"]["IMG"]?>" border="0" />

Разные картинки-пункты меню для разных языков

Меню состоит из пунктов-картинок, заданных CSS классами. Сайт двуязычный. Сама структура меню уже разделена и подключена, необходимо разделить оформление.

Решение:

Укажите в шаблоне меню следующее:

<body class="lang-<?=LANG?>"> 

в CSS:

.menu li.item1 { 
background-image:url(title-en.gif); 
} 
.lang-ru .menu li.item1 { 
background-image:url(title-ru.gif); 
}

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

Организовать такое меню можно с помощью смены шаблона сайта (Настройки > Настройки продукта > Сайты > Список сайтов, редактирование сайта, секция Шаблон, условие для папки или файла). Причем, если шаблон не сложный, то можно прямо в коде шаблона поставить проверку и в одном случае выводить одно меню в другом — другое:

if($APPLICATION->GetCurPage() == "/index.php") {
вывод меню для главной страницы
}
else {
вывод второго меню
}

Как сделать меню tree в постоянно открытом состоянии?

Решение:

Нужно взять стандартный шаблон меню tree, скопировать его в свой шаблон.
После чего в файле template.php необходимо строчку:

<li class="close">

заменить на:

<li>

При этом развернутые пункты будут прятаться по щелчку на изображении.

Как сделать так, чтобы при открытии страницы через древовидное меню, само меню не сворачивалось, а показывало, на какой странице ты находишься?

Решение:

Нужно взять стандартный шаблон меню tree, скопировать его в свой шаблон.
После чего в файле template.php необходимо 14 строчку:

<li class="close">

заменить на:

<li <?if (!$arItem["SELECTED"]):?>class="close"<?endif?>>

Примечание: Предложенное решение актуально лишь до 2-го уровня вложенности меню.

Следующий код, который необходимо вставить в файл шаблона меню, позволяет меню не сворачиваться, при уровне вложенности больше 2:

...
<?if (!empty($arResult)):?>

<?
//анализ открытых узлов дерева
$lastLevel = 0;
$selected = false;

foreach(array_reverse($arResult) as $arItem){
    if ($arItem["SELECTED"]) {
        $lastLevel = $arItem["DEPTH_LEVEL"];
        $selected = true;
    }
    if ($selected and $arItem["DEPTH_LEVEL"] < $lastLevel){
        $arResult[ $arItem["ITEM_INDEX"] ]["SELECTED"] = true;
        $lastLevel--;
    }
}
?>

<div class="menu-sitemap-tree">
<ul>
<?$previousLevel = 0;foreach($arResult as $arItem):?>
...

Скрытие бокового меню по свойству страницы

Задача такая. В шаблоне сайта прописан вывод бокового меню. Нужно, чтобы оно не показывалось только на тех страницах, у которых прописано какое-нибудь свойство, отменяющее показ бокового меню.

Решение:

Если меню расположено в header’е, то функцию GetProperty использовать нельзя, потому что свойства страницы задаются после подключения header’a. Поэтому меню можно вывести «отложенно» следующим способом:

• в header’е, где надо показать меню добавить следующий код:

$APPLICATION->ShowProperty('menu');

• в свойствах страницы, если надо запретить меню:

$APPLICATION->SetPageProperty('hide_menu', 'Y');

• в footer’е:

if( 'Y' != $APPLICATION->GetPageProperty('hide_menu') ){
    ob_start();
    echo '<b>проверка отложенного меню!</b>';
    // ....здесь происходит вывод меню компонентом или другим способом.... //
    $APPLICATION->SetPageProperty('menu', ob_get_clean() );
}

Само меню «выводится» в футере, если свойство hide_menu не установлено в значение Y. Но оно не выводится на самом деле в футере, а отправляется в свойство menu, которое «выше» по коду можно показать «отложенно» через ShowProperty. Если меню запрещено, то в значении свойства menu будет пусто и ничего не покажется в шаблоне. Если не запрещено, то для этого примера — там, где прописано $APPLICATION->ShowProperty('menu'), будет выведена фраза проверка отложенного меню!.

Меню и кеш

Цитата: Забился весь диск под завязку. Стал разбираться, и оказалось, что папка bitrix/managed_cache/MYSQL/menu весит 16Гб! На сайте присутствуют 2 меню горизонтальное — навигация по страницам сайта и вертикальное — по разделам каталога.

Кеш меню зависит от адреса страницы. Если страниц много, то кеш может получаться большим. В этом случае может оказаться более эффективным отключить кеш в компоненте меню.

Рекламные области

На сайте может быть представлено несколько различных видов рекламы. Это может быть как стандартная баннерная реклама, так и текстовые рекламные области. Реклама может быть постоянной или показываться с определенной вероятностью, задаваемой администратором. Показ рекламы может быть регламентирован по определенным разделам сайта и т.д. Создание и управление рекламой осуществляется средствами модуля Рекламы.

Показ рекламы выполняется в специально выделенных областях шаблона дизайна сайта – рекламных областях.

Подключение баннера в рекламной области может выполняться с помощью компонента Баннер (bitrix:advertising.banner). Компонент выводит баннер заданного типа.

Примечание: Данный компонент не учитывает таргетинг по ключевым словам. Если необходимо его учесть, то следует использовать функцию $APPLICATION->ShowBanner().

Код подключения баннера в рекламной области с помощью PHP функции ShowBanner() имеет вид:

<?
//---Пример размещения рекламной области в левой части сайта. 
//---Аналогично производится выбор любого другого типа:
//---TOP, BOTTOM, COUNTER,… (первый параметр функции)  
//---Могут быть использованы как предустановленные, так и задаваемые
//---пользователем типы. 
//---В качестве двух дополнительных параметров может указываться 
//---HTML-код обрамляющий рекламную область сверху и снизу.
$APPLICATION->ShowBanner("LEFT", '<div align="center">', '<br></div><br>');
?>

Для каждой рекламной области определяется, реклама какого типа будет доступна для показа в данной области. На приведённой выше иллюстрации это рекламные баннеры типа LEFT и BOTTOM.

Список ссылок по теме:

• Описание модуля Реклама в курсе Администратор. Модули.

Типы рекламы

Название типа рекламного блока задается администратором произвольно. Например, для верхней рекламы может быть установлен тип TOP, MAIN, BOTTOM и т.п.

Важно! Рекомендуется, чтобы баннеры из одной группы имели одинаковый размер. Это позволит избежать деформации страницы при показе рекламы.

Управление типами рекламы выполняется через административный интерфейс модуля Рекламы (Маркетинг > Баннерная реклама > Типы баннеров):

Приступить к управлению рекламным баннером или списком баннеров выбранной рекламной области можно непосредственно из публичной части сайта. Для этого перейдите в режим правки и воспользуйтесь одной из кнопок управления рекламной областью:

Механизм управления показом с помощью ключевых слов

Управление показом баннеров с помощью ключевых слов является одной из форм таргетинга рекламы на сайте. Особенность данного метода заключается в том, что он позволяет организовать рекламную кампанию, направленную на четко определенную целевую группу пользователей сайта.

С помощью ключевых слов можно:

• организовать показ рекламы, нацеленный на конкретную группу пользователей сайта. Т.е. показывать рекламу на страницах, посещаемых преимущественно этими пользователями, или страницах, тематика которых может заинтересовать данную группу пользователей.
• ограничить показ рекламы на страницах сайта, например, исходя из того, насколько содержание рекламы связано с информацией, представленной на странице.

Механизм управления

Управление показом рекламы на страницах сайта осуществляется с помощью желательных и обязательных ключевых слов страницы сайта и набора ключевых слов рекламного баннера. В целях управления показом рекламы для страниц используются два вида специальных ключевых слов:

• ключевые слова баннера;
• ключевые слова страниц сайта:
  • желательные (desired): если для страницы сайта заданы желательные ключевые слова, то для показа на данной странице будут доступны все баннеры, в наборе ключевых слов которых содержится хотя бы одно желательное ключевое слово страницы.
  • обязательные (required): если для страницы сайта заданы обязательные ключевые слова, то для показа на данной странице будут доступны все баннеры, в наборе ключевых слов которых содержатся все обязательные ключевые слова страницы.

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

Общий порядок действий по организации показа баннеров на нужных страницах такой:

• Определяется, какая реклама будет доступна для показа на тех или иных страницах сайта.
• В соответствии с поставленными задачами для страниц сайта задаются наборы специальных ключевых слов.
• В настройках рекламных баннеров задается необходимый набор ключевых слов.

Ключевые слова баннеров задаются в поле Ключевые слова на странице создания/редактирования баннера, вкладка Таргетинг (Маркетинг > Баннерная реклама > Баннеры).

Управление желательными ключевыми словами страницы выполняется с помощью специального свойства adv_desired_target_keywords. Свойство станет доступно в форме настройки свойств страницы, если заранее выполнить небольшие настройки модуля Управление структурой.

Желательные ключевые слова страницы могут быть заданы с помощью функции SetDesiredKeywords в коде страницы. Данная функция содержит следующие параметры:

• keywords – одно или несколько желательных ключевых слов страницы;
• TYPE_SID – тип рекламы, управление показом которой будет осуществляться с помощью указанных желательных ключевых слов. Если данный параметр оставить пустым, то ключевые слова будут заданы для всех типов рекламы.

CAdvBanner::SetDesiredKeywords (array ("Partners", "Cooperation", "Company", "Contacts"), "RIGHT");

Обратите внимание! По умолчанию, если в коде страницы не установлено каких-либо ключевых слов для рекламы, считается что функция SetDesiredKeywords использует в качестве параметра значение свойства страницы adv_desired_target_keywords. Если оно не задано, то в качестве параметра функции используется значение свойства keywords.

Функция SetDesiredKeywords вызывается автоматически в момент сборки страницы, ее не нужно дополнительно вызывать в файле header.php, если нет необходимости переопределить ключевые слова для показа рекламы.

Обязательные ключевые слова страницы задаются с помощью предустановленной функции системы SetRequiredKeywords. Данная функция содержит следующие параметры:

• keywords – одно или несколько обязательных ключевых слов страницы;
• TYPE_SID – тип рекламы, управление показом которой осуществляется с помощью указанных обязательных ключевых слов. Если данный параметр оставить пустым, то ключевые слова будут заданы для всех типов рекламы.

CAdvBanner::SetRequiredKeywords (array("Partners", "Cooperation"), "RIGHT");

В приведенном примере для показа на странице будет доступен баннер, в наборе ключевых слов которого содержатся все обязательные ключевые слова (partners и cooperation), заданные для страницы.

Использование прав доступа

При создании шаблона сайта достаточно часто возникает задача ограничения доступа к тем или иным элементам. Предусмотренный в системе механизм проверки прав доступа может быть использован в процессе создания шаблона сайта для управления:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<div class="blue-tabs-menu">
       <ul>
<?foreach($arResult as $arItem):?>

       <?if ($arItem["PERMISSION"] > "D"):?>
              <li><a href="<?=$arItem["LINK"]?>"><nobr><?=$arItem["TEXT"]?></nobr></a></li>
       <?endif?>

<?endforeach?>

       </ul>
</div>
<div class="menu-clear-left"></div>
<?endif?>

Разные языки сайта

Система Bitrix Framework позволяет использовать один и тот же шаблон дизайна для нескольких сайтов на разных языках. Данная возможность реализуется с помощью механизма языковых сообщений:

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

Например, с использованием языковых сообщений могут быть созданы заголовки таблиц, надписи на кнопках, сообщения компонентов и т.д.

Примечание: Механизм языковых сообщений используется, в том числе, для поддержки многоязычного интерфейса административного раздела системы.

Ссылки по теме:

• Пользовательская документация по модулю «Перевод»

Механизм реализации

Языковое сообщение — группа фраз на разных языках, имеющая один смысл.

• В папке шаблона сайта создается папка с именем /lang/:

  /bitrix/templates/< идентификатор шаблона >/lang/

• В папке /lang/ создаются папки с идентификаторами используемых языков: /en/, /de/, /ru/ и т.д. Например:

  /bitrix/templates/<идентификатор шаблона>/lang/ru/

• В созданных папках размещаются соответствующие файлы языковых сообщений. Файлы языковых сообщений характеризуются следующими параметрами:
  • Имя файла языковых сообщений соответствует имени файла, в котором выполняется его вызов. Например, если предполагается, что вызов файла с языковыми сообщениями будет выполняться в прологе шаблона сайта (файл header.php), то файл языковых сообщений должен быть сохранен с именем header.php;
  • Список сообщений в файле хранится в следующем виде:

    <?
    $MESS ['COMPANY_NAME'] = "Company Name";
    $MESS ['MAIN_PAGE'] = "Home page";
    $MESS ['PRINT'] = "Print version";
    $MESS ['AUTH_LOGIN'] = "Authorization";
    $MESS ['RATES_HEADER'] = "Currency rates";
    $MESS ['SEARCH'] = "Site search";
    $MESS ['SUBSCR'] = "Subscription";
    ?>

    где выражение в скобках это код фразы (например, 'COMPANY_NAME')

    Примечание: Система собирает все языковые файлы и формирует единый массив $MESS при формировании страницы. И если языковые файлы фразы в разных местах имеют одинаковый код, то во всех местах будет использоваться код из последнего подключенного языкового файла. Это приводит к выводу неверной фразы. Рекомендуется создавать максимально уникальные ключи в языковых файлах.

• Затем в начало файла, для которого предусмотрено использование языковых сообщений (например, header.php), добавляется функция:

  <?
  Loc::loadMessages(__FILE__).
  ?>

  Функция выполняет подключение файла языковых сообщений для текущего языка.

• Далее все текстовые сообщения заменяются на функции вызова соответствующих языковых сообщений:

  <?echo Loc::getMessage("SEARCH");?>

  В качестве параметра функции GetMessage() используется код подключаемого сообщения. Функция проверяет наличие в подключенном языковом файле сообщения с соответствующим кодом и отображает его пользователю.

Загрузка и выгрузка локализации

Изменение фраз в компонентах и модулях

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

Тем не менее, есть технология замены любых языковых фраз продукта. Решение не идеальное, но оно дает довольно большой простор для полета фантазии разработчика.
Суть технологии в том, что языковые фразы продукта после подключения языкового файла заменяются на фразы, определенные разработчиком. Список замен должен находиться в файле /bitrix/php_interface/user_lang/<код языка>/lang.php, либо в файле /local/php_interface/user_lang/<код языка>/lang.php.

В этом файле должны определяться элементы массива $MESS в виде $MESS['языковой файл']['код фразы'] = 'новая фраза', например:

<?
$MESS["/bitrix/components/bitrix/system.auth.form/templates/.default/lang/ru/template.php"]["AUTH_PROFILE"] = "Мой любимый профиль";
$MESS["/bitrix/modules/main/lang/ru/public/top_panel.php"]['top_panel_tab_view'] = "Смотрим";
$MESS["/bitrix/modules/main/lang/ru/interface/index.php"]['admin_index_sec'] = "Проактивка";
?>

Первая строка меняет текст ссылки в компоненте формы авторизации; вторая строка меняет название вкладки публичной панели; третья меняет строку для индексной страницы панели управления.

Теоретически могут быть проблемы сопровождения этого файла при изменении кода фразы или расположения языкового файла, но на практике такие изменения бывают крайне и крайне редки.

Настройка дополнительных элементов

Настройка сообщений об ошибках

Часто возникает необходимость выполнить настройку сообщений об ошибках, чтобы сообщение об ошибке было аккуратно показано в дизайне сайта.

Чтобы произвести настройку внешнего вида сообщения об ошибке соединения с базой данных, следует отредактировать файл:
/bitrix/php_interface/dbconn_error.php.

Для того чтобы произвести настройку внешнего вида сообщения об ошибке в запросе к базе данных, следует отредактировать файл:
/bitrix/php_interface/dbquery_error.php.

Настройка файла, подключаемого при закрытии сайта

Чтобы произвести настройку внешнего вида файла, подключаемого при [ds]закрытии публичной части[/ds][di]Закрытие публичной части в настройках Главного модуля…[/di] сайта, следует скопировать файл:
/bitrix/modules/main/include/site_closed.php и поместите его в /bitrix/php_interface/<язык>/ или в /bitrix/php_interface/include/.

Настройка внешнего вида навигации постраничного просмотра

Постраничный показ информации организуется с использованием PHP функции NavPrint() – функции вывода ссылок для постраничной навигации. Для управления внешним видом постраничной навигации могут быть использованы следующие параметры:
NavPrint($title, $show_always=false, $StyleText="text", $template_path)
где:

$title – название выводимых элементов;

$show_always – если значение параметра false, то функция не будет выводить навигационные ссылки, если все записи умещаются на одну страницу. Если true, то ссылки для постраничной навигации будут выводиться всегда;

$StyleText – CSS класс шрифта для вывода навигационных ссылок;

$template_path – путь к шаблону показа навигационных ссылок.

Favicon

Одна иконка для административной и публичной части сайта

По умолчанию favicon располагается в корневом каталоге сайта (/favicon.ico).

В этом случае для административной и публичной части сайта будет отображаться один и тот же значок.

Раздельные иконки для публичной и административной части сайта

Существует вариант, позволяющий задать свою иконку для конкретного шаблона сайта. Для этого:

• файл с иконкой следует поместить в папку с шаблоном (/bitrix/templates/#имя_шаблона#/favicon.ico).
• в файле header.php (/bitrix/templates/#имя_шаблона#/header.php) между тегами <head> </head> необходимо добавить строку:

  <link rel="shortcut icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" />

  Тогда указанная иконка будет отображаться в публичной части сайта, а для административной будет использована иконка по умолчанию (/favicon.ico).

  

  

Примечание: В ранних версиях продукта favicon был в виде специального PHP-скрипта. Такое решение использовалось для модуля статистики.

Во всех актуальных версиях продукта такой вариант более не используется.

Примеры работы и решения проблем

Подробную информацию об условиях применения шаблонов можно посмотреть в следующих уроках:

• Применение шаблона дизайна (курс Контент-менеджер)
• Шаблоны дизайна (курс Администратор. Базовый)

Простые примеры применения шаблонов в зависимости от различных условий

Если свойство раздела phone равно Y

$APPLICATION->GetDirProperty("phone")=="Y"

Если текущий раздел равен /ru/catalog/phone/

$APPLICATION->GetCurDir()=="/ru/catalog/phone/"

Если текущий пользователь — администратор

$USER->IsAdmin()

Если нужно привязать шаблон к динамической странице (в примере — к детальной странице(карточке) товара.)

preg_match("#/catalog/?SECTION_ID=d+&ELEMENT_ID=d+#i",$_SERVER['REQUEST_URI']);

Подключение favicon.ico для разных шаблонов

Для того чтобы в разных шаблонах сайтов были разные значки, надо в шаблоне в header.php добавить вызов значка из шаблона:

<link rel="icon" type="image/x-icon"
href="<?=SITE_TEMPLATE_PATH;?>/images/favicon.ico" />

Отдельный шаблон для главной страницы сайта

Цитата: По умолчанию ставлю шаблон, который рассчитан для внутренних страниц сайта. На главной странице будет свой шаблон. Подскажите, как составить условие для отображения нужного шаблона на главной странице сайта?

Вдобавок к основному шаблону для всех страниц сайта необходимо подключить требуемый шаблон через условие Для папки или файла, в котором указать /index.php с учетом индекса сортировки применения шаблона.

Изменение шаблона сайта, в зависимости от временного параметра

Цитата: Как реализовать изменение шаблона сайта, в зависимости от временного параметра (Всего два шаблона, но они должны меняться каждый час)?

Для этого необходимо сделать изменение текущего шаблона по условию Выражение PHP.

Первый вариант

По нечетным часам: ((date("H")+6)%2) == 1

По четным часам: ((date("H")+6)%2) == 0

где +6 — указывает временную зону.

Второй вариант

date("H")%2

или

!date("H")%2

Применение шаблона сразу по двум условиям

Цитата: Подскажите, как задать шаблон одновременно по 2 условиям (для группы пользователей и для папки и файла) в настройках БУС.

Для этого необходимо использовать изменение текущего шаблона по условию Выражение PHP:

in_array($groupID, $USER->GetUserGroupArray()) || strpos($APPLICATION->GetCurDir(), "/dir/")!==false || $APPLICATION->GetCurPage()=="/dir/file.php"

Применение шаблона только к файлам с определённым расширением

Цитата: Подскажите, пожалуйста, выражение PHP, чтобы шаблон действовал на все страницы, заканчивающиеся на .php, а .html не трогал.

Решение: изменение шаблона по условию Выражение PHP:

substr($APPLICATION->GetCurPage(true), -4) == ".php" 

Аналогично для файлов с расширением html:

substr($APPLICATION->GetCurPage(true), -5) == ".html"

Изменение дизайна «шапки» сайта для разных разделов

Задача: Сайт разделен на несколько разделов. По замыслу у каждого раздела должна быть своя «шапка» в дизайне. Более в дизайне ничего не меняется. Как лучше реализовать смену «шапок» разделов?

Решение: В шаблон подключается компонент Включаемая область (для раздела):

<div id="header">
<?$APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(
   "AREA_FILE_SHOW" => "sect",
   "AREA_FILE_SUFFIX" => "headerinc",
   "AREA_FILE_RECURSIVE" => "Y",
   "EDIT_TEMPLATE" => "sect_headerinc.php"
   ),
   false
);?>
</div> 

Код шапки каждого из разделов будет храниться в файле sect_headerinc.php. Параметр "AREA_FILE_RECURSIVE" => "Y" означает, что такая же «шапка» появится у всех подразделов данного раздела, если родительский sect_headerinc.php не будет специально перекрыт у кого-то из нижележащих разделов.

Особенности работы с ajax

Использование режима ajax имеет свои особенности. Чтобы строка навигации в открываемой по ajax странице имела в цепочке навигации своё название, необходимо, чтобы в шаблоне обязательно присутствовал элемент с id="navigation". Это необязательно должен быть div, это может быть span, h1, p и так далее.

Аналогично, для заголовка обязательно наличие элемента с id="pagetitle".

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

Усовершенствованные методы буферизации в шаблоне позволяют более не использовать CBitrixComponentTemplate::EndViewTarget() ввиду того, что конец шаблона вызывает завершение буферизации автоматически.

Описанные ниже способы по своей сути похожи на Включаемые области. Только Включаемая область это файл подключаемый в шаблоне сайта, а указанные методы — это область, которая формируется в коде шаблона.

Можно использовать как в шаблоне сайта, так и в шаблоне компонента.

Теперь есть поддержка стандартного кеширования в компонентах.

• template.php:

  <?$this->SetViewTarget("sidebar");?>
  
  	<div class="element-filter">
  		<!--вывод фильтра -->
  	</div>
  
  <?$this->EndViewTarget();?>
  
  <div class="element-list">
  	<!--вывод списка -->
  </div>

• header.php:

  <div id="sidebar">
  	<?$APPLICATION->ShowViewContent("sidebar")?>
  </div>

Методы, доступные в шаблоне (через $this)

• CBitrixComponentTemplate::SetViewTarget($view, $pos)
• CBitrixComponentTemplate::EndViewTarget()

Методы глобального объекта $APPLICATION

• Cmain::AddViewContent($view, $content, $pos)
• Cmain::ShowViewContent($view)

где:

• $view – идентификатор буферизируемой области;
• $content – буферизируемый контент;
• $pos – сортировка вывода контента.

Примечание: одному идентификатору $view может соответствовать несколько буферов. Последовательность вывода контента определяется сортировкой $pos.

Разработка шаблонов страниц

Система Bitrix Framework позволяет создавать и использовать шаблоны-заготовки для рабочей и включаемых областей страницы сайта. Использование шаблонов-заготовок особенно полезно и эффективно в тех случаях, когда страницы сайта имеют довольно сложную структуру (верстку).

Шаблоны страниц и редактируемых областей хранятся в папке /page_templates/, находящейся в каталоге соответствующего шаблона сайта или в папке /bitrix/templates/.default/, если предполагается использование одинаковых шаблонов страниц для всех шаблонов сайта.

При создании страницы в режиме визуального HTML-редактора достаточно выбрать из списка шаблон, по которому создается страница, и добавить нужную информацию.

Руководство по оформлению HTML/CSS кода

Руководство — это правила для разработчиков компании 1С-Битрикс, которое является обязательным при разработке продуктов Bitrix Framework. Раздел описывает правила оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры разработчиками.

Правила стандартизированы относительно недавно и поэтому в коде продуктов могут встречаться отклонения от них. Тем не менее, разработчикам проектов на основе Bitrix Framework рекомендуется придерживаться этих правил — это облегчит дальнейшую поддержку проектов.

Общие правила оформления кода

Отступы

Для создания отступов всегда используйте символ табуляции. Не рекомендуется использование пробелов и смешивание табуляции с пробелами. Настройте редактор кода так, чтобы он отображал невидимые символы. Это позволит избегать случайных пробелов в конце строк, будет легче отслеживать изменения в коде.

В PHPStorm настройте поля Показ невидимых символов, Табуляция вместо пробелов.

Кодировка

UTF-8 фактически стал стандартом, хотя клиенты Bitrix Framework иногда установливают продукт в кодировке ANSI.

Перевод строки

Строки должны заканчиваться только символом перевода на новую строку (LF) — стандарт для текстовых файлов в Unix-системах. Не используйте комбинацию символов возврата каретки/перевода строки (CRLF), как это принято в Windows.

В PHPStorm настройте поле Перевод строки для новых файлов. В нижней статусной строке показывается, какой перевод строки используется для текущего файла (должен быть LF).

Максимальная длина строки

Длина строки не должна превышать 120 символов. Настройте редактор кода так, чтобы он отображал правую границу строк.

В PHPStorm настройте поля Показ правой границы, Ширина правой границы.

Регистр

Названия тегов, атрибутов и названия классов должны быть всегда в нижнем регистре.

Пробелы в конце строки

Убирайте пробелы в конце строки. Пробелы в конце строк не обязательны и усложняют сравнение файлов в системе контроля версий.

В PHPStorm настройте поле Удаление пробелов перед сохранением файла.

Комментарии

Все комментарии должны быть на английском языке.

Правила оформления HTML

Семантика

Использование семантики облегчает восприятие html-кода страницы и понимание логического и функционального назначения каждого тега. В HTML существует довольно много тегов, которые в своем названии несут четкую семантику: <a>, <p>, <i>, <menu>. Не стоит с помощью CSS таким тегам менять их базовый смысл. Идеально для верстальщика было бы удобно использовать теги с произвольными названиями.

<users>
    <user>
        <avatar></avatar>
        <name></name>
    </user>
</users>

HTML5 предлагает механизм для создания произвольных тегов (Web Components). Но реализация этого механизма не самая простая (нужно писать JavaScript) и поддержка в браузерах неполная. Единственный нормальный способ писать семантический код — использовать атрибут class. Он позволяет описать смысл тега естественными словами, не требователен к уникальности (в отличие от атрибута id) и поддерживает возможность указать несколько классов к одном тегу.

Основы верстки

• Используйте теги div (для блочных элементов) и span (для строчных и строчно-блочных элементов).
• Остальные теги используйте только согласно их базовому смыслу.
• Теги <b>, <i>, <s>, <p>, с <h1> по <h6>, <ul>, <li> — используются только для форматирования текста. Как правило, эти стили находятся в шаблоне сайта и в стилях компонентов не присутствуют.
• Для привязки CSS-свойств к тегу используйте только атрибут class.
• Если нажатие на элемент приводит к открытию новой страницы, используйте тег <a>. В противном случае используйте <span> или <div>.
• Отступы между логическими блоками никогда не делайте пробелами или тегом <br>.
• Структуру html-тегов необходимо делать по сетке дизайна. «Колонки» и логические блоки одного уровня обязательно помещайте в контейнер.

  Плохо:

      <span class="task-detail-sidebar-info-link">сменить</span>
      <div class="task-detail-sidebar-info-title">Ответственный</div>
      <div class="task-detail-sidebar-info-user">
          <a href="#" class="task-detail-sidebar-info-user-photo"></a>
          <a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
          <div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
      </div>

  Лучше:

      <div class="task-detail-sidebar-info">
          <div class="task-detail-sidebar-info-head">
              <div class="task-detail-sidebar-info-link">сменить</div>
              <div class="task-detail-sidebar-info-title">Ответственный</div>
          </div>
          <div class="task-detail-sidebar-info-user">
              <a href="#" class="task-detail-sidebar-info-user-photo"></a>
              <div class="task-detail-sidebar-info-user-title">
                  <a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
                  <div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
              </div>
          </div>
      </div>

• Удаление логических блоков не должно рушить дизайн.
• Всегда есть вероятность, что на реальном сайте количество текста будет больше, чем нарисовано в макете. Верстка должна быть адаптивной к появлению дополнительных строк и к длинным строкам без пробелов.
• Текстовый элемент не может быть на одном уровне с тегом.

  Плохо:

      <div class="task-detail-group">Задача в проекте: <div class="task-detail-link">добавить</div></div>

  Хорошо:

      <div class="task-detail-group">
         <span class="task-detail-group-label">Группа:</span>
         <span class="task-detail-group-name">Название группы</span>
      </div>

• Каждый компонент должен иметь родительский контейнер. Для этого элемента в CSS необходимо указать шрифт (font-family), а также размер текста (font-size), чтобы избежать конфликтов со стилями шаблона сайта.

Особые случаи

• Внимательно относитесь к элементам inline-block, перевод строки между ними будет отображен как пробел. Чтобы не писать теги в одну длинную строку, можно воспользоваться следующим приемом:

      <div class="inline-block-items"><?
          ?><span class="inline-block-item">Inline Item 1</span><?
          ?><span class="inline-block-item">Inline Item 2</span><?
          ?><span class="inline-block-item">Inline Item 3</span><?
          ?><span class="inline-block-item">Inline Item 4</span><?
      ?></div>

  Визуально теги разбиты и отделены отступами, а в результирующем HTML-коде будет одна строка. Другой прием с помощью HTML-комментариев:

      <div class="inline-block-items"><!--
          --><span class="inline-block-item">Inline Item 1</span><!--
          --><span class="inline-block-item">Inline Item 2</span><!--
          --><span class="inline-block-item">Inline Item 3</span><!--
          --><span class="inline-block-item">Inline Item 4</span><!--
      --></div>

• Элементы с обтеканием (float)
  • Неприятной особенностью свойства float является то, что такой блок может «вывалиться» из блока-родителя. Это происходит из-за того, что float-элемент удаляется из потока и родитель не выделяет место под него. Решить эту проблему можно несколькими способами:
    • Поставить родителю overflow: hidden/auto.
    • Поставить родителю float.
    • Добавить в родителя элемент с clear. Чтобы не добавлять в HTML-код лишний элемент, можно задать его через :after.
  • Элементы с обтеканием обязательно должны находится в контейнерах, чтобы не влиять на соседние логические блоки.
• Для повторяющихся элементов в строчку (пункты меню, список фотографий) отдавайте приоритет inline-block вместо float.

Тип документа

Создавайте новую верстку по стандарту HTML5. В старых шаблонах по возможности избавляйтесь от XHTML (слешей в конце тегов <br />, <img />).

<!DOCTYPE html>

Альтернативные атрибуты (alt, title)

Очень часто разработчики забывают указывать альтернативные подписи к иконкам, кнопкам или другим графическим элементам. Наличие атрибутов title и alt в верстке поможет решить эту проблему.

Разделение ответственности

Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение — в скрипты.

Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

Формы

• В верстке всегда должен присутствовать тег <form>.
• Подписи полей должны быть слинкованы к соответствующим элементам формы.
• Должно быть показано, как выводится ошибка и/или сообщение об успешном выполнении операции.
• Переключение между элементами формы по клавише Tab.
• Интерактивность: смена фокуса должна визуально подсказывать пользователю активный элемент.

Картинки

• Используйте SVG вместо растровых изображений.
• В случае, если SVG использовать затруднительно, используйте формат PNG.
• Объединяйте картинки в спрайты. Это ускорит отображение страницы.
• Называйте файлы с указанием имени модуля и блока, к которому относится изображение. Для разделения слов используйте дефис (-).

  Плохо:

      .crm-lead-history {
          background-image: url(images/sprite.svg);
      }
  
      .crm-lead-log {
          background-image: url(images/arrow_left.svg);
      }

  Хорошо:

      .crm-lead-history {
          background-image: url(images/crm-lead-sprite.svg);
      }
  
      .crm-lead-log {
          background-image: url(images/crm-lead-arrow-left.svg);
      }

Правила форматирования HTML

Новая строка для каждого блочного или табличного элемента

Выделяйте новую строку для каждого блочного элемента, ставьте отступы для каждого дочернего элемента.

Плохо:

<div class="menu">
<div class="menu-item"><span class="menu-item-title">Home</span></div><div class="menu-item"><span class="menu-item-title">Search</span></div>
</div><div class="breadcrumb"></div>

Хорошо:

<div class="menu">
    <div class="menu-item">
        <span class="menu-item-title">Home</span>
    </div>
    <div class="menu-item">
        <span class="menu-item-title">Search</span>
    </div>
</div>
<div class="breadcrumb"></div>

Двойные кавычки в атрибутах

Значения HTML-атрибутов всегда пишутся в двойных кавычках.

Плохо:

<div class='navigation'>
    <div class=menu></div>
</div>

Хорошо:

<div class="navigation">
    <div class="menu"></div>
</div>

Множественные атрибуты

Теги с большим количеством атрибутов можно переносить на новые строки. Это улучшит читаемость кода, а также облегчит сравнивание файлов в системе контроля версий (diff).

Атрибуты в одну строку:

<a class="task-detail-special-link" id="task-detail-special-link-id" href="" title="Special Link" data-id="13">
    <span class="task-detail-special-text">Link</span>
</a>

Атрибуты с разбивкой на две строки:

<a class="task-detail-special-link" id="task-detail-special-link-id"
   href="" title="Special Link" data-id="13">
      <span class="task-detail-special-text">Link</span>
</a>

Сортировка атрибутов

HTML-атрибуты должны быть перечислены в следующем порядке:

1. class
2. id
3. атрибуты тега (src, href, title и другие.)
4. data-*

Правила оформления CSS

Каскадные селекторы

Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).

Исключения:

• Селекторы состояний (:visited, :active, :hover).
• Селекторы контекста. Существуют случаи, когда компонент используется на разных страницах или в разном окружении. В этом случае удобно использовать селекторы контекста. Важно, чтобы эти контекстные стили содержались в родительском компоненте.
• Верстка, в которой нельзя изменить структуру HTML-тегов.

Именование классов

• Имена классов записываются на английском языке в нижнем регистре. Если не уверены в написании английского слова, проверьте его по словарю. PHPStorm имеет встроенную проверку орфографии.
• Желательно, чтобы терминология в названии класса совпадала с названиями, которыми оперирует разработчик (названия полей в базе данных, названия PHP-классов).
• Для разделения слов в именах используется дефис (-).
• Создавайте имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода. Не стесняйтесь использовать длинные названия классов.
• Название класса должно отражать суть блока, а не его внешний вид.
• Первым словом в названии класса должно идти название модуля. На втором месте — название блока. Название блока может состоять из нескольких слов. Такой формат, с одной стороны, сразу показывает принадлежность стилей, с другой — гарантирует их уникальность. Уникальность стилей обеспечивает независимость верстки компонентов.

      <div class="task-detail">
          <div class="task-detail-title"></div>
          <div class="task-detail-description"></div>
      </div>

      <div class="crm-lead-form">
          <div class="crm-lead-form-title"></div>
          <div class="crm-lead-form-description"></div>
      </div>

• Вложенные элементы должны сохранять контекст именования блока. Блок не обязательно должен быть прямым родителем элемента.

  Оба варианта именования допустимы:

      <div class="disk-user">
          <div class="disk-user-info">
              <div class="disk-user-avatar"></div>
              <div class="disk-user-name"></div>
          </div>
      </div>

      <div class="disk-user">
          <div class="disk-user-info">
              <div class="disk-user-info-avatar"></div>
              <div class="disk-user-info-name"></div>
          </div>
      </div>

• Не допускайте сокращений. Сокращения могут привести к ситуации, когда одинаковые вещи будут названы по-разному (btn/button).
• Не используйте старый префикс bx-.
• Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс js-.
• Для верстки шаблона сайта допускается опускать префикс модуля.

Inline-стили

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

Селектор тега и селектор на атрибут

Избегайте использование имен классов с селектором тега и атрибута.

Плохо:

div.task-detail-title {
    margin: 20px;
}

input[name=user] {
    margin: 20px;
}

Хорошо:

.task-detail-title {
    margin: 20px;
}

.task-detail-user-field {
    margin: 20px;
}

Сокращенная форма записи свойств

CSS предлагает множество различных сокращенных форм записи (например, margin, padding, border и другие), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

Плохо:

.meeting-sidebar {
    margin-top: 5px;
    margin-bottom: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
}

Хорошо:

.meeting-sidebar {
    margin: 5px 0 3px;
    border: 1px solid #fff;
}

Сокращенные формы для шрифта (font) и фона (background) допускается разделять на несколько свойств.

Единицы измерения

Используйте значения в пикселях. Размеры, указанные в px, абсолютные, четкие, понятные и не зависят ни от чего. Допустимо использовать проценты % везде, кроме размера текста (font-size).

0 и единицы измерения

Не указывайте единицы измерения для нулевых значений.

Плохо:

.timeman-task-list {
    margin: 0px 12px 0px 13px;
}

Хорошо:

.timeman-task-list {
    margin: 0 12px 0 13px;
}

Кавычки в ссылках

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

Плохо:

.im-user-status {
    background: url("images/im-sprite.png");
}

Хорошо:

.im-user-status {
    background: url(images/im-sprite.png);
}

Цвет

Для указания цвета элемента используйте шестнадцатеричную запись или rgba(), если требуется указать прозрачность. Не используйте rgb() и верхний регистр в значении свойства.

Плохо:

.disk-invitation-popup {
    background: #FFFFFF;
}

Хорошо:

.disk-invitation-popup {
    background: #fff;
}

Хаки

Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь специальными классами .bx-chrome, .bx-firefox, .bx-ie10.

Плохо:

*+ html .vote-answers {
    margin: 5px;
}

Хорошо:

.bx-ie7 .vote-answers {
    margin: 8px;
}

Группировка правил

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

Псевдоселекторы (:before, :after)

Псевдоселекторы позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.

Сброс стилей (CSS Reset)

Не используйте CSS Reset в верстке. Компоненты являются независимыми блоками. На них не должны влиять CSS-правила, созданные для всей страницы. Это нарушает независимость блоков и затрудняет их повторное использование. Общий сброс стилей реализуется с помощью глобальных CSS-правил, которые в большинстве случаев пишутся к селекторам на тег, что нежелательно использовать в верстке. Кроме того, сброс стилей влияет на производительность рендеринга страницы и может конфликтовать с версткой клиентов.

Браузерные префиксы

Свойство без префикса всегда должно быть в конце.

Плохо:

.menu-item {
    -webkit-box-shadow:0 0 10px 20px #000;
    box-shadow:0 0 10px 20px #000;
    -moz-box-shadow:0 0 10px 20px #000;
}

Хорошо:

.menu-item {
    -webkit-box-shadow:0 0 10px 20px #000;
    -moz-box-shadow:0 0 10px 20px #000;
    box-shadow:0 0 10px 20px #000;
}

Селекторы состояний (selected, active и hover)

Классы-модификаторы должны именоваться согласно общим правилам:

<div class="menu">
    <div class="menu-item"></div>
    <div class="menu-item menu-item-selected"></div>
    <div class="menu-item"></div>
</div>

Приоритеты селекторов и !important

Избегайте использования модификатора приоритета !important.

Шрифты, ссылки, цвета

Для оформления текста всегда указывайте семейство шрифтов.

Плохо:

.disk-external-folder {
    font: 12px "Helvetica Neue";
}

Хорошо:

.disk-external-folder {
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Правила форматирования CSS

• При создании правила для нескольких селекторов помещайте каждый селектор на отдельной строке.
• Перед открывающей скобкой ставьте один пробел.
• Внутри блока объявлений помещайте каждое объявление на отдельной строке.
• Добавляйте один уровень отступов перед каждым объявлением.
• Ставьте пробел после двоеточия внутри объявления.
• Всегда ставьте точку с запятой после последнего объявления в блоке.
• Ставьте закрывающую скобку на одной вертикальной линии с первым символом в селекторе.
• Ставьте пробел после каждой запятой в объявлениях со множественным значением.
• Разделяйте правила пустой строкой.
• Сортируйте свойства по принципу: свойства, сильно влияющие на элемент, в начале, а самые незначительно влияющие — в конце:
  • Display
  • Позиционирование (position/float)
  • Боксовая модель (width/height/margin/padding/border/box-sizing)
  • Цвета и типографика
  • Остальное

  Плохо:

      .crm-lead-form { margin: 34px; color: #000; }
      .crm-lead-title, .crm-invoice-title, .crm-company-title
      {
          position: relative;
          background: #000;
          height: 15px;
          padding: 10px;
          border: 1px solid red;
          margin: 12px 0 17px;
          display: block;
          color: #fff;
          width: 15px;
      }

  Хорошо:

      .crm-lead-form {
          margin: 34px;
          color: #000;
      }
  
      .crm-lead-title,
      .crm-invoice-title,
      .crm-company-title {
          display: block;
          position: relative;
          width: 15px;
          height: 15px;
          padding: 10px;
          border: 1px solid red;
          margin: 12px 0 17px;
          color: #fff;
          background: #000;
      }

• Для значений с пробелами (font-family, url()) и для свойства content используйте двойные кавычки.

      .disk-user-profile {
          font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
      }
  
      .disk-user-profile:after {
          display: block;
          content: "";
      }

• Исключения

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

          .crm-column-title { width: 10%; }
          .crm-column-author { width: 20%; }
          .crm-column-actions { width: 30%; }
  
          .menu-icon-create { background-position: 0 0; }
          .menu-icon-delete { background-position: -15px -35px; }
          .menu-icon-approve { background-position: -34px -35px; }

  Длинные значения свойств, разделяемые запятыми — как, например, набор градиентов или теней — могут быть помещены на отдельной строке каждое, чтобы повысить читабельность кода и сообщений в системе управления версиями. Формат записи может слегка различаться, один из вариантов приведён ниже.

          .disk-info-popup {
              box-shadow:
                  1px 1px 1px #000,
                  2px 2px 1px 1px #ccc inset;
              background-image:
                  linear-gradient(#fff, #ccc),
                  linear-gradient(#f3c, #4ec);
          }

Тестирование верстки (чеклист)

Следующие пункты являются обязательными перед отдачей верстки в производство.

• Проверка верстки на соответствие макету (Pixel Perfect).
• Браузеры:
  • Chrome
  • Firefox
  • IE Edge
  • Safari
• Минимальное и максимальное разрешение экрана.
• Переполнение блоков:
  • Длинный текст без пробелов
  • Длинный текст с пробелами
• Удаление необязательных блоков, которые могут отсутствовать.
• Retina-экран.
• Картинки разных размеров и пропорций в допустимых пределах, которые будет допускать код.

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

Верстка для мобильных устройств

Viewport

Чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, добавьте в заголовок документа такой метатег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Метатег viewport содержит инструкции для браузера по корректировке размеров и масштабированию страницы по ширине экрана устройства. Если этого элемента нет, мобильные браузеры по умолчанию показывают страницу для экрана компьютера (ширина которого обычно составляет около 980 пикселей, но это значение может отличаться у разных устройств). Затем мобильные браузеры пытаются оптимизировать содержание, увеличивая шрифты и либо масштабируя содержание по размеру экрана, либо показывая только часть контента, которая помещается на экране.

Retina-экран

• Используйте изображения в формате SVG.
• Для растровых изображений используйте двукратный размер и свойство background-size.

Border в 1px

Часто дизайнеры требуют сделать границу блока шириной в 1 физический пиксель. Если присвоить блоку свойство border: 1px solid #000, на Retin’е это будет выглядеть жирной полосой в 2 физических пикселя. Раньше эту проблему решали путем создания картинки, которой обтягивали бордер с помощью свойства border-image. А это лишнее обращение к серверу. Начиная с iOS 8 и Android 4.4, стандартные браузеры на базе WebKit поддерживают дробные свойства border: .5px solid #000. На данный момент поддержка этого способа на используемых девайсах равна 97% на iOS и 75% на Android.

В рамках курса «BitrixMobile — создание кроссплатформенных мобильных приложений» подробно рассмотрены возможности библиотеки BXMobileApp, которая позволяет создавать сложные бизнес-приложения на BitrixMobile.

Приёмы верстки

В этом разделе собраны типовые подходы к решению частых задач верстки.

Использование оптимальных изображений под разные браузеры и устройства

WebKit поддерживает srcset атрибут изображений в img и image-set в стилях. Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей.

Обязательно задается изображение для браузеров не поддерживающих это свойство.

.class {
  /* задаем фоновое изображение, если браузер не поддерживает image-set */
  background-image: url(image-set-not-supported.png);
  /* задаем фоновые изображения, для различных разрешений */
  background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x);
  background-size: cover;
}

Не забудьте использовать свойство background-size для того что бы большие изображения корректно отображались.

Атрибут srcset работает аналогичным образом.

<img src="srcset-not-supported.png" srcset="low-res-image.jpg 1x, high-res-image.jpg 2x">

Как в первом так и во втором случае, после ссылки на изображение указывается условие при котором это изображение будет работать. В примерах выше в качестве условия ppi устройства. Также можно указывать разрешения экранов.

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

Для повторения описанного примера, знакомящего с принципами внедрения шаблона дизайна в Bitrix Framework, рекомендуется использовать этот макет шаблона. Шаблон — тестовый, вопросы кроссбраузерности при его создании не рассматривались. Все работы выполнялись в Firefox.

Повторение примера рекомендуется на локальной установке с демоверсией сайта для разработчиков.

Примечание: Описанный пример использовался в опубликованных несколькими годами ранее книгах о создании сайта на «1С-Битрикс: Управление сайтом». Принципы работы за это время не изменились. Однако поменялись шаблоны в демодистрибутиве и, следовательно, описание их кастомизации.

При создании примера подразумевалось, что пользователь знаком с PHP, HTML и CSS. Поэтому детальное описание причин удалений или добавления того или иного кода опускается. Считаем, что вы сами способны понять эти моменты. Перед началом работы настойчиво рекомендуется познакомиться с понятием о шаблоне дизайна сайта в рамках Bitrix Framework.

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

В Примере не рассматриваются вопросы, связанные с кастомизацией ввода и обработки данных за счёт изменения логики работы системы и компонентов.

Создание шаблона

Создание шаблона – не самый сложный шаг в интеграции дизайна, но требует внимательности.

Форма создания шаблона

• Перейдите в раздел Настройки > Настройки продукта > Сайты > Шаблоны сайтов. В Рабочей области откроется форма Шаблоны сайтов.
• Выполните команду Добавить шаблон на Контекстной панели. Откроется форма создания нового шаблона. В этой форме в поле:
  • ID — введите название шаблона. В нашем примере это будет test.
  • Название — введите название шаблона. (Может быть и на кириллице и на латинице), например, тоже test.
  • Описание — можно вставить ваш комментарий к шаблону.
  • Порядок — числовое значение определяет порядок отображения шаблона в общем списке шаблонов.

Примечание: Без установки в шаблоне разделителя #WORK_AREA# сохранение шаблона невозможно. Поэтому у нас сейчас последует этап работы, который вы не сможете прервать в произвольный момент.

Назначение шаблона для сайта

Назначьте созданный шаблон для тестового сайта.

Добавление кода тестового дизайна в шаблон

<!-- #Begin******** -->
<!-- #End******** -->

<!-- #Begin_Article -->

Добавление графики и стилей

Для полного и правильного отображения дизайна нужно добавить графику и стили.

Интеграция дизайна в систему

Шаблон сайта на четверть создан. «На четверть» — это потому что в имеющемся у нас на данном моменте шаблоне есть только html-код, но отсутствуют функции вызова программных компонентов. А их интеграция – это существенный объем работы.

Статическая информация, которая не нуждается (либо редко нуждается) в замене, как правило, размещается в статических зонах Footer’а и Header’а. Заменить ее можно в кодах самих файлов, но делать это придется квалифицированному разработчику. Либо разработчик должен организовать эту замену с помощью компонентов системы силами контент-менеджеров сайта.

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

Компоненты существенно облегчают работу по поддержке сайта. Однако работа по их внедрению в шаблон сайта требует квалификации. Чем шире применяются компоненты, тем более трудоемка и сложна работа по созданию сайта, но проще его поддержка.

Интегрировать код любого компонента в код шаблона в Bitrix Framework можно следующими способами:

• Вставкой кода из [dw]пользовательской документации[/dw][di]

  Пользовательская документация

  .[/di]

  ;

• С помощью визуального редактора напрямую (невозможно с версии 14.0, так как отключено использование редактора при редактировании шаблонов сайта).

Внедрение компонентов в дизайн можно, в принципе, производить в любом порядке. Мы начнем с компонента авторизации. Но сначала разберёмся с тем, что же такое Рабочая область.

#WORK_AREA# – Рабочая область

#WORK_AREA# — основная рабочая область. Рабочая область страницы, в которой размещаются собственно информационные материалы сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов, динамический код.

Поясним суть Рабочей области #WORK_AREA#. При создании шаблона мы загружали готовую нарезку дизайна, в которой предусмотрен текст в центральной части, колонка в правой части (фотогалерея), левая колонка с анонсами блогов. На данный момент все они: текст, левая и правая колонки входят что-то в Header, что-то в Footer. Если при формировании шаблона левая и правая колонки могут то включаться в Footer или Header, то исключаться из него, но основной текст всегда будет в #WORK_AREA#.

Если вы создавали сайт для тестов на установке демо-дистрибутива по способу описанному здесь, то на вашем сайте отобразятся именно те лишние элементы, которые мы называли ранее. Это происходит потому, что используется та же папка для сайта, что и в демо-версии. Соответственно, отображаются элементы уже размещённые на странице index.php.

• Скопируйте в буфер обмена текст статьи, которая у нас сейчас видна на шаблоне. Только текст, без картинки!
• С Публичной части откройте для редактирования индексную страницу сайта в визуальном редакторе. (Либо откройте для редактирования файл index.php в корне сайта)
• Удалите из страницы все тексты и ярлыки компонентов. Кстати, этим действием вы удалили весь тот «непрошенный» текст, видео и картинки, которые появились у нас на сайте после вставки дизайна в шаблон.
• В самом начале страницы введите текст: Тестовый проект. Главная страница.
• В поле редактора вставьте текст из буфера обмена.
• Сохраните внесенные изменения.

Вы увидите, что статья у нас теперь отражена дважды: один раз как часть #WORK_AREA# (то, что мы только что добавили), второй раз как часть Footer’а (текст, который стоял раньше):

Вот из Footer’а нам и надо текст убрать.

• Удалите текст из кода шаблона сайта, вместе со строкой и ячейкой. Метки:

  <!-- #Begin_Article -->
  <!-- #End_Article -->

• Сохраните внесенные изменения.
• Теперь при просмотре сайта с публички текст будет отображаться только один раз и он выводится из Рабочей области #WORK_AREA#.

Авторизация

Переход на страницу авторизации в «1С-Битрикс: Управление сайтом» можно реализовать как с помощью html, так и с помощью компонента авторизации. Мы опишем оба способа.

<img width="4" height="4" src="/bitrix/templates/test/images/punkt_top.gif" /> 
       <b><a href="#" class="text"><font size="1" color="#6e6e6e">Регистрация</font></a> 
<img width="4" height="4" src="/bitrix/templates/test/images/punkt_top.gif" />
       <b><a href="#" class="text"><font size="1" color="#6e6e6e">Вход</font></a></b>

<!-- #Begin_Auth -->
<!-- #End_Auth -->

Кастомизация шаблона компонента

Примечание: Если у вас включено кеширование компонентов, то возможна ситуация, когда после внесения изменений в шаблоны компонента или его файл стилей вы не заметите этих изменений. В этом случае надо просто обновить кеш компонента воспользовавшись кнопкой Обновить на Административной панели. А лучше отключить кеширование на период работы с дизайном совсем.

Прежде всего, оговоримся, что не все неточности дизайна мы будем исправлять в этом примере. Порядок ссылок невозможно изменить, не модифицируя php-код самого компонента. Это не задача нашего примера и мы этим заниматься не будем.

Для замены слова Войти на Вход необходимо найти файл в системе, где задается эта надпись и поменять ее.

• Перейдите в раздел Контент > Структура сайта > Файлы и папки /bitrix/templates/test/components/bitrix/system.auth.form/auth/lang/ru/. В этой папке есть файл: template.php.

  Примечание: Обратите внимание на определенную логику расположения информации в файлах компонента. Вот она: system.auth.form/auth/lang/ru/. Эта структура типична для всех компонентов системы: имя_компонента/применяемый_шаблон/языковая_папка/конкретный_язык. В папке конкретного языка расположены все текстовые значения, используемые в этом шаблоне. Так вы можете поменять тексты в любом компоненте.

• В колонке действий для строки этого файла выберите Редактировать как PHP. Откроется форма редактирования файла:

  

  В самой первой строке мы видим слово «Войти», которое прописано для параметра AUTH_LOGIN_BUTTON. Именно это слово и выводится в форме авторизации.

• Замените Войти на Вход.

  Примечание: При утверждении шаблона дизайна бывает очень трудно предусмотреть все возможные моменты, связанные с дизайном. Например, в нашем случае мы меняем слово «Войти» на «Вход», но в утвержденном дизайне ничего не говорится про то, как выглядит страница у авторизованного посетителя. А у авторизованного посетителя будет видно слово «Выйти». Логично, что мы заменим слово «Выйти» на слово «Выход», по аналогии со словом «Вход». Несмотря на то, что на это нет прямого указания в дизайне.

• Сохраните внесенные изменения.

Текст шаблона адаптирован к требованиям дизайна. Теперь займемся внешним видом.

• Откройте для редактирования шаблон компонента. Нам нужно заменить картинки. Работа упрощается тем, что в тестовом дизайне использована одна картинка на все три позиции. Если бы картинки были разные, то нам бы пришлось повторять описываемую ниже операцию несколько раз, меняя названия картинок.

  Если посмотреть исходный html-код авторизации, то видно, что имя картинки в этом коде: punkt_top.gif. Эта картинка после загрузки на тестовый сайт расположена в папке /bitrix/templates/test/images. Значит, путь до картинок в рамках системы будет такой: /bitrix/templates/test/images/punkt_top.gif.

• В диалоге с кодом шаблона /bitrix/templates/test/components/bitrix/system.auth.form/auth/template.php найдите ссылки на картинки, используемые в шаблоне. Так как в теги картинки включен php-код и найти их будет не просто, то приведем ссылки на картинки полностью.
  Первая и вторая:

  <img src="<?=$templateFolder?>/images/login.gif" width="10" height="11" border="0" alt="">

  Третья:

  <input type="image" src="<?=$templateFolder?>/images/login.gif" alt="<?=GetMessage("AUTH_LOGOUT_BUTTON")?>">

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

  <img src="<?=SITE_TEMPLATE_PATH?>/images/punkt_top.gif" border="0" alt="">

  Третья:

  <input type="image" src="<?=SITE_TEMPLATE_PATH?>/images/punkt_top.gif" alt="<?=GetMessage("AUTH_LOGOUT_BUTTON")?>">

• Сохраните внесенные изменения.

Завершите сессию и авторизуйтесь заново. Вы увидите, что картинки заменены. Теперь займемся остальным. Начнем с всплывающего окна авторизации. Что нас не устраивает в нем? Фон, отличающийся от фона сайта. Кому-то еще может показаться, что не соответствует размер окна или еще что. Эти вопросы – дело вкуса и мы оставляем на ваше усмотрение изменение этих параметров.

• Откройте для редактирования шаблон компонента. Просматривая шаблон компонента, мы увидим, что за оформление всплывающего окна отвечает стиль login-form-window: код этого окна расположен в теге <div id="login-form-window"> </div>. В то время как на надписи Вход и Регистрация стиль не задан. Следовательно, нам надо задать стиль для этих надписей. А стиль login-form-window изменить так, чтобы он соответствовал дизайну.
• Откройте для редактирования CSS файл шаблона компонента Авторизация.
• Откройте исходные коды тестового сайта. Дизайнер задал фон таблиц в цвете #DEDEE2, а границы в цвете #bfbfbf. Например, ячейка:

  <td class="br" bgcolor="#DEDEE2" bordercolor="#bfbfbf">
  ...
  </td>

  Воспользуемся этими же цветами и мы.

• Замените цвет в строке background:#F5F5ED на background: #DEDEE2.
• Замените цвет в строке border:1px solid #000; на border:1px solid #bfbfbf;.
• Сохраните внесенные изменения.

Завершите сессию и авторизуйтесь заново. Вы увидите, что вид окна изменился и стал соответствовать общей цветовой гамме сайта.

Теперь нам нужно изменить вид надписей Вход и Регистрация. Сделать это можно разными способами. Но мы воспользуемся опять же файлом стилей. Пусть стиль, отвечающий за оформление этих надписей называется login-info. Соответственно, стиль активной ссылки будет #login-info а.

• Откройте для редактирования шаблон компонента. Установим теги для стиля login-info. Установить эти теги нам придется два раза, так как html-код не должен пересекаться с php-кодом.
• Установите тег <div id="login-info"> первый раз сразу за тегом </div>, закрывающим предыдущий стиль login-form-window.
• Установите тег </div>, закрывающий использование стиля перед php-кодом <?else:?>.
• Установите тег <div id="login-info"> второй раз сразу за тегом <?else:?>.
• Установите тег </div>, закрывающий использование стиля перед завершающим php-кодом <?endif?>.
• Сохраните внесенные изменения.

Мы прописали место, где должны будут использоваться стили для шрифта. Теперь надо создать сами стили.

• Откройте для редактирования файл CSS компонента.
• Добавьте в файл стилей строки:

  	#login-info {color:#3B3B3B; font-size:70%; font-weight:bold;}
  	#login-info a {color: #666666;}

• Сохраните внесенные изменения.

Завершите сеанс и авторизуйтесь вновь. Вы увидите, что надписи изменили шрифт, размер и цвет. Теперь они почти полностью соответствуют утвержденному дизайну.

Мы закончили встраивание модуля авторизации и теперь можем двигаться дальше и заняться меню сайта.

Меню сайта

Меню бывают разные. Бывают горизонтальные и вертикальные, левые и правые, верхние и нижние. Чаще всего встречаются левые вертикальные меню и верхние горизонтальные. В нашем дизайне встречаются три вида меню:

• Левое вертикальное, классическое;
• Нижнее горизонтальное;
• Верхнее горизонтальное – частичное.

Для выполнения работ вам нужно будет создать два типа меню, которых нет в дистрибутиве по умолчанию. Эти типы меню будут использоваться в примере. В примере их назвали podmenu и down.

Работу начнем с левого вертикального меню.

Левое меню

Откройте для редактирования шаблон сайта. Первым делом нужно определить часть html-кода, отвечающего за один элемент меню. В нашем тестовом дизайне код, отвечающий за меню расположен между:

<!-- #Begin_Left_Menu -->
<!-- #End_Left_Menu -->

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

• Скопируйте код, имитирующий меню в отдельный текстовый файлик. Он нам понадобится.
• Удалите из кода шаблона код меню.
• Откройте страницу документации с описанием компонента [comp include_menu]Меню[/comp] (bitrix:menu).
• Перенесите код вызова компонента в шаблон сайта между указанными метками.
• Сохраните внесенные изменения.

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

Меню совершенно не подходит по оформлению. Слева что получилось, справа — что должно быть:

Кастомизация шаблона

• Скопируйте шаблон компонента Меню в папку тестового шаблона. Откроется форма для редактирования шаблона
• В шаблоне компонента само меню строится через применение списка с помощью тегов <ul> <li>элемент маркированного списка</li> </ul>. Мы от списка откажемся, у нас само меню будет строиться через таблицы с помощью тегов таблиц. Поэтому удалите теги <ul>, </ul>. Позже в шаблоне компонента мы заменим и теги <li>, </li>.
• Удалите атрибут с указанием на стиль class="left-menu", так как мы его применять не будем.
• Откройте текстовый файл, где вы сохраняли вырезанный html-код таблиц меню оригинального дизайна. Каждый пункт меню — это отдельная таблица. Посмотрим код оформления пункта меню Главная:

  <table width="99%" cellspacing="0" cellpadding="0" border="0"> 
   <tbody> 
      <tr><td width="25" height="25" background="/bitrix/templates/test/images/fot_tabl_centr.jpg">
             <img src="/bitrix/templates/test/images/ukazatel_red.gif" width="25" height="25"  /></td> 
         <td width="1" valign="top" height="25" background="/bitrix/templates/test/images/fot_tabl_c.gif">
             <img src="/bitrix/templates/test/images/fot_tabl_w.gif" width="2" height="2"  /></td> 
         <td height="25" background="/bitrix/templates/test/images/fot_tabl_centr.jpg">
             <img src="/bitrix/templates/test/images/pix.gif" width="10" height="10"  /><b>
             <a href="#" class="text" >
             <font size="2" color="#666666">Главная</font></a></b></td> 
         <td width="1" valign="top" height="25" background="/bitrix/templates/test/images/fot_tabl_c.gif">
             <img src="/bitrix/templates/test/images/fot_tabl_w.gif" width="2" height="2"  /></td> 
       </tr>
                     
       <tr><td height="1" background="/bitrix/templates/test/images/fot_tabl_c.gif">
              <img src="/bitrix/templates/test/images/fot_tabl_w.gif" width="2" height="2"/></td> 
          <td width="1" height="1">
              <img src="/bitrix/templates/test/images/fot_tabl_w.gif" width="2" height="2"/></td> 
          <td height="1" background="/bitrix/templates/test/images/fot_tabl_c.gif">
              <img src="/bitrix/templates/test/images/fot_tabl_w.gif" width="2" height="2"  /></td> 
          <td width="1" height="1">
              <img src="/bitrix/templates/test/images/fot_tabl_c.gif" width="2" height="2"/>
           </td> 
       </tr>
    </tbody>
  </table>

  HTML-код представляет собой таблицу с двумя строками. Вторая строка – декоративная. Сама ссылка должна формироваться в первой строке, если быть точным в третьей ячейке первой строки.
  В эту ячейку и надо нам отредактировать.

• Удалите из третьей ячейки из строки <b><a href="#" class="text"><font size="2" color="#666666">Главная</font></a></b> теги <b></b>; а также часть кода <font size="2" color="#666666">Главная</font>. Мы удалили параметры форматирования текста, которые будут определяться теперь не шаблоном, а стилями.
• Замените параметр class=»text» на class=»left-menu». Этим мы указали название стиля, который должен применяться для названий разделов в меню. Теперь нам нужно заменить # — символ адреса ссылки на php-код, объясняющий системе, где искать название раздела и ссылку на него.

• Просматривая структуру шаблона можно увидеть, как отображаются в php-коде шаблона ссылки, на которые происходит переход при выборе пункта меню. Они располагаются между html-тегами <LI>, которые определяют отдельный элемент списка. Элементов списка – два, так как в шаблоне предусмотрено выделение активной ссылки. В исходном дизайне такое выделение не предусмотрено. Это значит, что мы должны объединить представление выбранной и простой ссылки в php-коде.

  То есть, вместо

  <?if($arItem["SELECTED"]):?>
  <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
                                 <?else:?>
  <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                                 <?endif?>

  php-код, вызывающий ссылку и текст должен стать таким:

  <?=$arItem["LINK"]?>"<?if($arItem["SELECTED"]):?><?else:?><?endif?>"><?=$arItem["TEXT"]?>
  

  В коде исходного дизайна вместо # поставьте указанный php-код.

Теперь можно переходить к переносу html-кодов, определяющих внешний вид строки меню. PHP-код и html-код не должны пересекаться между собой, а должны быть включены друг в друга. Потому нам нужно сейчас очень внимательно подходить к размещению тегов в шаблоне. Прежде всего, разместим теги таблицы. Так как меню должно формироваться внутри таблицы, значит php-код, запускающий цикл, должен лежать внутри таблицы.

• Вставьте открывающий тег <table width="99%" cellspacing="0" cellpadding="0" border="0"> перед php функцией foreach, задающей цикл.
• Вставьте тег </table>, закрывающий таблицу сразу за функцией endforeach, завершающей php-цикл.

Теперь цикл у нас формируется в рамках таблицы, заданной дизайном.

Так как мы уже интегрировали код собственно php-цикла в html-код, то нам осталось только вставить полученную html-конструкция его между тегами начала и конца php-цикла.

• Выделите в исходном html-коде дизайна меню теги строк таблицы:

  <tr> 
      <td width="25" height="25" background="/bitrix/templates/test/images/fot_tabl_centr.jpg"> 
         <img width="25" height="25" src="/bitrix/templates/test/images/ukazatel_red.gif" /></td> 
      <td width="1" valign="top" height="25" background="/bitrix/templates/test/images/fot_tabl_c.gif">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_w.gif" /></td>
      <td height="25" background="/bitrix/templates/test/images/fot_tabl_centr.jpg">
         <img width="10" height="10" src="/bitrix/templates/test/images/pix.gif" />
         <a class="left-menu" href="<?=$arItem["LINK"]?>"<?if($arItem["SELECTED"]):?>
         <?else:?> <?endif?>"> <?=$arItem["TEXT"]?> </a></td>    
      <td width="1" valign="top" height="25" background="/bitrix/templates/test/images/fot_tabl_c.gif">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_w.gif" /></td>
  </tr>
  <tr>
      <td height="1" background="/bitrix/templates/test/images/fot_tabl_c.gif">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_w.gif" /></td>
      <td width="1" height="1">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_w.gif" />
      </td>
      <td height="1" background="/bitrix/templates/test/images/fot_tabl_c.gif">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_w.gif" />
      </td>
      <td width="1" height="1">
         <img width="2" height="2" src="/bitrix/templates/test/images/fot_tabl_c.gif" />
      </td>
  </tr>

• Замените этим кодом следующий код:

  <?if($arItem["SELECTED"]):?>
  <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
  <?else:?>
  <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
  <?endif?>

• Сохраните внесенные изменения.

Задание стилей

• Откройте для редактирования файл с CSS стилями шаблона. В этом файле видно для вывода текста используется стиль left-menu.
• Переименуйте стиль ul.left-menu в просто .left-menu.
• Вставьте в параметры стиля left-menu следующие строки:

  font-size:80%;
  color:#666666;
  font-weight:bold;
  text-decoration:none;

• Так как у нас по дизайну не предусмотрены другие стили оформления (активной ссылки, посещенной ссылки, подсветки ссылки), то все остальные стили просто удалите.
• Сохраните внесенные изменения.

Результат работы:

Нижнее горизонтальное меню

Левое вертикальное меню у нас будет меняться в зависимости от открытого раздела. Но для упрощения перемещения между разделами заказчик пожелал сохранить возможность доступа к любому разделу с любой страницы сайта. С этой целью нужно иметь одно меню, где-нибудь в не очень мешающемся месте, в котором будут выводиться ссылки на все основные разделы сайта. Таким у нас будет нижнее горизонтальное меню.

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

• Откройте для редактирования шаблон тестового сайта.
• Скопируйте в отдельный текстовый файл а затем удалите код таблицы, расположенной между метками:

  <!-- #Begin_down_Menu -->
  <!-- #End_down_Menu -->

• Перейдите в режим визуального редактирования.
• Добавьте на то место, где находилась эта таблица компонент Меню так, как мы это уже делали с левым меню.
• Откройте для редактирования диалог настроек параметров компонента. В отличие от левого меню здесь нам нужно их настроить.
• В поле Тип меню для первого уровня выберите down (Нижнее).

  Примечание: Такого типа меню в дистрибутиве по умолчанию нет. Мы предполагаем что вы его создали заранее.

• Сохраните внесенные изменения.

• Скопируйте в место между этими тегами код вызова компонента Меню, так же как и в случае с левым меню.
• Параметру ROOT_MENU_TYPE установите значение down. Этим мы назначили новый тип меню для этого компонента.
• Сохраните внесенные изменения.

Создание меню

Создайте нижнее меню. Оно должно повторять разделы левого.

После этого вы увидите на месте нижнего горизонтального меню то же самое системное меню по умолчанию. Нам надо его модифицировать. Но опять же, системный шаблон лучше не трогать.

Кастомизация шаблона компонента

• Скопируйте шаблон компонента по умолчанию в текущий шаблон сайта, как мы это делали с левым меню.
• Откройте для редактирования шаблон компонента.
• Из скопированного исходного кода вставьте в шаблон вместо кода <ul class="left-menu"> открывающий код таблицы:

  <table width="1024" height="10" cellspacing="0" cellpadding="0" border="0" class="text"> 

• Установите закрывающий тег таблицы вместо кода </ul>
• Замените class="text" на class="down-menu". (Пусть такое имя будет у стилей для нижнего меню).
• Перенесите этот параметр class="down-menu" в строку

  <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>

  после открывающего тега <a>/

• Повторите последние действия для строки

  <a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a>

• В параметре class="down-menu" этой строки добавьте букву а для стиля активной ссылки.
• Задайте открывающий тег строки таблицы сразу за открывающим тегом таблицы и закрывающий тег строки перед закрывающим тегом таблицы.
• Задайте открывающий тег ячейки с параметром align="center" на месте открывающего тега <li> отдельного элемента списка. И задайте закрывающий тег ячейки на место закрывающего тега отдельного элемента списка.
• Удалите лишнюю пару тегов отдельного элемента списка
• Добавьте код картинки из текстового файла с исходным кодом (<img src="/bitrix/templates/test/images/punkt_top.gif"/>) в код шаблона после тега <td align="center">.
• Сохраните внесенные изменения.

Кастомизация стилей

• Откройте для редактирования стили шаблона компонента.
• Отредактируйте файл стилей по аналогии с тем, как это делалось в левом меню.

Результат работы:

Верхнее частичное меню

Заказчиком проекта частичное меню задумано как способ быстрого доступа к внутренним разделам и страницам, не отображаемым на левом и нижнем меню. Такой способ удобен, когда у вас новостей настолько много, что анонс статьи довольно быстро уйдет с индексной страницы. Скажем, у вас появилась статья, которая может представлять интерес для многих читателей в течение длительного времени. Выносить в отдельный раздел ее нет смысла, но привлечь к ней внимание стоит. Вы можете сделать ссылку на эту статью из верхнего частичного меню и держать ее на индексной странице столько, сколько сочтете нужным.

Механизм интеграции этого меню абсолютно идентичен механизму интеграции, описанному выше. За исключением пары моментов:необходимо использовать отдельный тип меню (part), используется другая картинка.

• Разместите код вызова компонента меню между метками:

  <!-- #Begin_part_menu -->
  <!-- #End_part_menu -->

• Скопируйте шаблон компонента и файл css из шаблона нижнего меню;
• Замените в шаблоне название картинки (punkt_top на punkt_red.)
• Сохраните внесенные изменения.
• Создайте меню.

Цепочка навигации

Цепочка навигации позволяет пользователю ориентироваться, где на сайте он находится в данный момент. Она очень полезна при разветвленной структуре сайта.

Размещение компонента

• Откройте для редактирования шаблон тестового сайта.
• Найдите и удалите код, имитирующий цепочку навигации на шаблоне сайта, расположенную между

  <!-- #Begin_nav -->
  <!-- #End_nav -->

• Перенесите на место между метками код вызова компонента [comp include_breadcrumb]Навигационная цепочка[/comp] (breadcrumb) из документации.

Кастомизация шаблона

Цепочка отображена, но ее вид не соответствует оформлению сайта. Повторим процесс «подгонки». Правда, оговоримся сразу, активную ссылку красным (как это у нас в дизайне) можно сделать только в том случае, если в шаблоне написать условие php: если ссылка последняя, то выделить цветом. Мы этим заниматься не будем, пусть это будет домашним заданием. Поэтому последняя ссылка останется у нас серой.

Примечание: последнюю ссылку можно выделять с помощью CSS, используя псевдокласс: last-child.

• Скопируйте шаблон Цепочки навигации.
• Откройте для редактирования файл CSS.
• Используя за основу файл CSS левого меню, отредактируйте отображение Цепочки навигации.

Компонент Новые сообщения блогов

Предполагается, что сайт предназначен прежде всего для общения единомышленников. В качестве основной формы такого общения выбран блог – сетевой журнал. К настройкам самих блогов мы еще вернемся. А пока нам нужно внедрить в шаблон компонент Новые сообщения блога. С его помощью будут выводиться на всех страницах тестового шаблона новые сообщения в блогах.

<div class="blog-mainpage-title"><a href="<?=$arPost["urlToPost"]?>"><?echo $arPost["TITLE"]; ?></a></div>

<a href="<?=$arPost["urlToPost"]?>"></a>

<?
if (!$this->__component->__parent || empty($this->__component->__parent->__name) || 
   $this->__component->__parent->__name != "bitrix:blog"):
	$GLOBALS['APPLICATION']->SetAdditionalCSS('/bitrix/components/bitrix/blog/templates/.default/style.css');
	$GLOBALS['APPLICATION']->SetAdditionalCSS('/bitrix/components/bitrix/blog/templates/.default/themes/blue/style.css');
endif;
?>

Счетчик посещений

Для любого проекта – посещаемость очень важна. Посещения страниц регистрируются счетчиками. Счетчики можно установить внешние, скажем, от Yandex’а. А можно поставить счетчик внутренний, системный.

Примечание: Если быть точным, то системный счетчик устанавливать не надо. Он начинает работу сразу по инсталляции 1С-Битрикс: Управление сайтом на ваш компьютер и всю информацию по посещениям вы можете посмотреть в разделе Веб-аналитика Административного раздела (Аналитика > Сводная статистика). А вот вывести данные счетчика для просмотра посетителями сайта можно, если установить соответствующий компонент.

• Откройте для редактирования шаблон тестового сайта.
• Скопируйте код вызова компонента Таблица статистики из документации.
• Разместите его сразу за меткой <!-- #End_blog -->
• Сохраните внесенные изменения.

Под Новыми сообщениями блогов появилась Таблица статистики. Далее нам надо совершить стандартные действия по адаптации таблицы под дизайн. В случае с Таблицей статистики все изменения внешнего вида можно сделать с помощью одного файла стилей, но копировать шаблон компонента всё равно придётся.

Поскольку вид счетчика нам не задан дизайнером, возможностей для фантазий у нас больше. Но оставим эти фантазии на ваше усмотрение, сами же просто подгоним дизайн таблицы под дизайн сайта по стилям и под размер левой колонки:.

Баннер

Для установки баннера в 1С-Битрикс: Управление сайтом предусмотрен специальный компонент, который так и называется Баннер. Место для него в шаблоне тегами предусмотрено, хотя зрительно в «подвале» оно не видно. Ячейка для баннера расположена между ячейками с копирайтом автора дизайна и ячейкой с логотипом клуба.

• Откройте для редактирования шаблон тестового сайта.
• После метки <!-- #Begin_banner --> введите любой символ, например число 123. Это нужно для того, чтобы стал виден компонент. Ненастроенный компонент не выводит баннер и поэтому он не будет отображаться при просмотре сайта с публички.
• Скопируйте из документации код вызова компонента [comp include_advertising_banner]Баннер[/comp] и разместите между метками:

  <!-- #Begin_banner -->
  <!-- #End_banner -->

Вы увидите, что на том месте, где мы назначили место баннеру, появилось меню компонента Баннер. Сам же баннер пока не отображается, так как компонент не настроен.

Включаемые области

Work Area и разные шаблоны

Bitrix Framework позволяет создавать и использовать несколько шаблонов для разных условий просмотра. Условия могут быть самыми разными: для разных групп пользователей, для разных разделов, даже для отдельных страниц. Это очень удобно в самых разных случаях. Например, при смене дизайна.

Все шаблоны создаются за счет того или иного размещения в пределах шаблона сайта Рабочей области #WORK_AREA#, включения или исключения в/из нее элементов входящих на данный момент в Header или Footer.

Создадим три шаблона:

• С зоной #WORK_AREA# занимающей всю среднюю часть сайта, без левой и правой колонки (для блогов и форумов).
• С левой колонкой в Header’е и без правой колонки (для статей).
• С левой колонкой в Header’е и правой колонкой в Footer’е (для страниц, где нужно организовать предварительный показ картинок).

Собственно третий у нас уже есть, он создался после удаления текста статьи из Footer’а. Логичнее всего будет далее последовательным удалением элементов создать оставшиеся два шаблона. Детально приводить удаляемый код в данном случае мы не будем, здесь вам надо положиться на собственные знания html. Для грамотного выполнения этой операции вам надо очень внимательно следить за тем, что вы модифицируете в шаблоне и почаще пользоваться кнопкой Предпросмотр перед сохранением результатов.

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

• Откройте для редактирования шаблон тестового сайта.
• Скопируйте в буфер обмена весь код шаблона тестового сайта.
• Нажмите кнопку Добавить шаблон на Контекстной панели. Откроется форма создания нового шаблона.
• Вставьте код шаблона в поле Внешний вид шаблона сайта.
• В поле ID введите название test2.
• В поле Название введите test_article.
• В поле Описание введите: Шаблон для статей.
• Скопируйте в шаблон стили сайта и стили шаблона.
• Скопируйте в папку шаблона папку components из папки bitrixtemplatestest

Такие названия и пояснения мы сделали для того, чтобы не путаться в шаблонах. Если вы будете создавать довольно много шаблонов, то логически осмысленные названия и описания вам не помешают.

• Удалите код, включающий в себя правую колонку:

  Метки:

  <!-- #Begin_right_Column -->
  <!-- #End_right_Column -->

• Сохраните внесенные изменения.

Результат:

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

• Выполните команду Настройки > Настройки продукта > Сайты > Шаблоны сайтов. Откроется список шаблонов.
• В колонке команд в строке нашего второго шаблона выберите команду Копировать. Система выполнит копирование, в списке шаблонов появится шаблон под именем test_copy.
• Откройте для редактирования этот шаблон
• В поле Название смените название на test_blogs.
• В поле Описание смените текст на Шаблон для раздела Блоги.
• Удалите из него левую колонку. Метки:

  <!-- #Begin_left_Column -->
  <!-- #End_left_Column -->

• Сохраните внесенные изменения.

Результат:

Число шаблонов, которые вы можете использовать на сайте – не ограничено, хоть для каждой отдельной страницы создавайте свой шаблон. Есть один нюанс. При создании шаблонов всегда учитывайте функционал удаляемых частей, и, при необходимости, изменяйте размещение компонентов. Например, при создании последнего шаблона вместе с левой колонкой мы удалили и компонент Таблица статистики. Если она вам нужна на страницах, использующих этот шаблон, Таблицу придется добавлять в #WORK_AREA#.

Простейший пример внедрения дизайна с блочной вёрсткой (div)

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

Скачать тестовые материалы.

Примечание: Шаблон — тестовый, вопросы кроссбраузерности при его создании не рассматривались. Все работы выполнялись в Google Chrome.

В примере не рассматриваются вопросы, связанные с кастомизацией ввода и обработки данных за счёт изменения логики работы системы и компонентов.

Подготовка к работе

Скачать тестовые материалы.

В архиве макета сайта [dw]содержатся:[/dw][di]

[/di]

• папки со стилями шаблона;
• папка с js-файлами;
• папка с картинками;
• html-макет индексной страницы сайта (index.html);
• файл с главными стилями шаблона (styles.css);
• csv-файл с демоданными для импорта (demo.csv).

Разархивируйте скачанный архив с тестовыми материалами (doc.zip).

Откройте в браузере файл index.html из папки со скачанным архивом шаблона. В окне браузера откроется тестовый дизайн.

Пропишем требования, которым должен соответствовать сайт с внедрённым шаблоном.

Техническое задание:

• Основная заставка и навигация должны располагаться в шапке сайта (header).
• Копирайт должен располагаться в подвале сайта (footer).
• Новости сайта нужно выводить из инфоблока новостей с помощью компонентов. Для страницы детального вывода новости создать упрощенный шаблон.
• Остальную информацию считать статической и разместить на индексной странице (тогда контент-менеджер сможет её изменять в публичном разделе, включив режим Правки).
• В качестве дополнительного задания: создать нижнее меню.

Разделение шаблона на header, footer и work_area

Первым делом обычно определяют, какие части вёрстки главной страницы могут присутствовать и на других страницах сайта. Другими словами, разбивают страницу на три части:

1. header (шапка, хедер, пролог) — верхняя часть дизайна; хранится в файле header.php шаблона сайта (Контент > Структура сайта > Файлы и папки > bitrix > templates > [ваш шаблон] );
2. WORK_AREA — рабочая область, содержащая основной контент; при создании страниц заполняется как раз эта область (например, Контент > Структура сайта > Файлы и папки > index.php );
3. footer (подвал, футер, эпилог) — нижняя часть дизайна; хранится в файле footer.php шаблона сайта (Контент > Структура сайта > Файлы и папки > bitrix > templates > [ваш шаблон] ).

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

Рассмотрим часть возможных вариантов разделения сайта на зоны, обозначенные цветами:

• красный — header (шапка сайта)
• зелёный — WORK_AREA (рабочая зона, т.е. основной контент)
• синий — footer (подвал сайта)

Описание приведённых вариантов:

В примере будем использовать разбивку 1.

Шаблон сайта (создание папки шаблона)

Создание шаблона – первый шаг в интеграции дизайна. Рассмотрим подробнее на примере, как это сделать.

Добавление кода шаблона / создание папки шаблона

• Откроем исходный код страницы index.html, выделим весь код и скопируем его в буфер обмена.
• На сайте перейдём в раздел Настройки > Настройки продукта > Сайты > Шаблоны сайтов. Кликнем по кнопке Добавить шаблон, и в Рабочей области откроется форма Шаблоны сайтов.
• Выполним команду Добавить шаблон на Контекстной панели. В открывшейся [dw]форме создания[/dw][di]
  
  [/di] нового шаблона укажем [dw]идентификатор шаблона[/dw][di]
  Можно использовать латинские буквы и цифры.
  [/di] и остальные параметры (описание понятно интуитивно).
• Вставим скопированный код в поле Внешний вид шаблона сайта.
• Теперь нужно определить шапку сайта (header) и подвал (footer) — это те области, которые будут неизменны на каждой странице сайта.

  В нашем примере шапка сайта будет содержать основную заставку с названием сайта и навигацию по странице (верхнее горизонтальное меню, кнопки РЫБЫ.НЕТ и Узнать больше) — т.е. заканчиваться на теге </header>. Подвал сайта будет содержать только копирайт, т.е. начинаться с блока <!-- Footer -->.

  Выделим и удалим весь код между шапкой (header) и подвалом сайта (footer).

  Таким образом, мы удалили весь код (контент сайта) между тегом </header> и блоком <!-- Footer -->. Вместо удаленного кода пропишем #WORK_AREA#:

  

• Теперь нужно заполнить вкладки [dw]Стили сайта[/dw][di]
  Стили, используемые при оформлении контента страниц (стили сайта), хранятся
  
  в файле styles.css.

  
  [/di] и [dw]Стили шаблона.[/dw][di]
  Стили, используемые в шаблоне дизайна, хранятся в файле template_styles.css. Это — основной
  
  CSS-файл шаблона.

  
  [/di] Скопируйте туда содержимое файлов styles.css и creative.css (если же эти вкладки оставить пустыми, то придется дополнительно подключать файлы в шапке сайта).

• Сохраним изменения.

После выполнения вышеперечисленных действий будет создана папка этого шаблона, включающая отдельные файлы шапки сайта (header.php), подвала сайта (footer.php) и файлы с автоматически подключаемыми скриптами и стилями (Контент > Структура сайта > Файлы и папки > bitrix > templates):

Загрузка файлов шаблона

[dw]Загрузите[/dw][di]
Например, по протоколу FTP. Или же можно создать папки вручную и загрузить в них содержимое.
[/di] в папку созданного шаблона следующие папки из архива (стили шаблона, картинки и js-файлы):

• css
• img
• js
• vendor

Шаблон сайта (настройка и подключение)

Необходимо выполнить три важных шага:

1. Редактирование шапки сайта (header.php)
2. Редактирование подвала сайта (footer.php)
3. Подключение шапки и подвала (index.php), добавление контента

1. Редактирование шапки сайта (header.php)

• В папке шаблона откроем файл header.php в режиме редактирования как PHP.
• Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра):

  <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
  

• Внутри тегов <head> добавим следующие строки:
  • Код отображения заголовка страницы:

    <title><? $APPLICATION->ShowTitle(); ?></title>
    

  • Код вывода в шаблоне сайта основных полей тега <head> (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты):

    <? $APPLICATION->ShowHead();  ?>
    

• После открывающего тега <body> пропишем код для отображения административной панели <? $APPLICATION->ShowPanel(); ?> . В связи с особенностями данного html-макета заключим код отображения панели в теги <div> (панель будет отображаться внизу страницы), иначе административная панель «наедет» на меню:

  <div id="panel">
      <? $APPLICATION->ShowPanel(); ?> 
  </div>
  

• Во все строках, где есть обращение к файлам, добавим в начале пути константу [dw]<?=SITE_TEMPLATE_PATH?>[/dw][di]
  Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.
  [/di] и слеш /.

  Рассмотрим на примере блока <!-- Bootstrap core JavaScript -->:

    <!-- Bootstrap core JavaScript -->
    <script src="<?=SITE_TEMPLATE_PATH?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?=SITE_TEMPLATE_PATH?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  

• Сохраним изменения.

2. Редактирование подвала сайта (footer.php)

Подвал сайта почти [dw]не нуждается в изменениях[/dw][di]Проверьте обязательно наличие строки <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?> в начале файла.[/di]. Необходимо только в строках, обращающихся к файлам, добавить в начале пути константу [dw]<?=SITE_TEMPLATE_PATH?>[/dw][di]
Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.
[/di] со слешем / и сохранить изменения.

3. Подключение шапки и подвала (index.php), добавление контента

• Необходимо удостовериться в подключении на странице вывода файлов header.php и footer.php.

  Для этого в файле главной страницы сайта [dw]index.php[/dw][di] (Контент > Структура сайта > Файлы и папки > index.php)
  
  [/di] сверим следующие конструкции:

  • первая строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
  • последняя строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
• Добавим [dw]статический[/dw][di]
  Т.е. для изменения контента страницы нужно будет вновь отредактировать вручную код страницы index.php.
  [/di] контент.

  Откроем файл с подготовленной вёрсткой (index.html) и скопируем код между шапкой (header) и подвалом сайта (footer) — тот, который мы в пункте 1 заменяли на #WORK_AREA#, то есть контент сайта.

  Настроим пути к картинкам. Пропишем в существующих путях уже знакомую константу <?=SITE_TEMPLATE_PATH?>/.

Список новостей: кастомизация шаблона компонента

Новости будем выводить с использованием двух простых компонентов:

В этом уроке изменим дизайн компонента Список новостей. Рассмотрим пошагово:

1. Копирование шаблона компонента

Скопируйте шаблон компонента Список новостей. Это можно сделать двумя способами:

В данном примере скопирован шаблон default.

2. Кастомизация шаблона компонента

• В исходном файле вёрстки index.html скопируйте блок, выводящий новости (в нашем случае блок Call to Action Section).
• В папке скопированного шаблона компонента news.list откройте в режиме редактирования файл template.php.
• После первой строки <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?> (защита от подключения файла напрямую без подключения ядра) вставьте скопированный ранее код вёрстки.
• Теперь нужно разобраться в общей структуре кода вёрстки (какая часть кода за что отвечает):

  

  1 — стиль заголовка блока и сам заголовок;

  2 — стиль блока;

  3 — три элемента блока (т.е. три новости) со своими стилями.

  Код 1 и 2 оставим без изменений, а работать будем с 3:

Примечание: Весь нижеприведённый код есть в штатном шаблоне компонента, который мы копировали в пункте 1.

• Код трёх новостей заменим на конструкцию foreach, которая будет перебирать массив элементов и выводить найденные новости:

  <? foreach ($arResult["ITEMS"] as $arItem): ?>
  	<?
  	$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
  	$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
  	?>
  
  	<!--  Код одной новости из исходного файла index.html  -->
  		<div class="col-lg-4 text-center">
  			<div class="card bg-secondary border border-dark">
  				<img class="card-img-top" src="img/2.jpg" alt="News image cap">
  				<div class="card-body">
  					<h5 class="card-title">News title</h5>
  					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  					<a href="#" class="btn btn-primary">Go somewhere</a>
  				</div>
  			</div>
  		</div>
  
  <? endforeach; ?>
  

• Пропишем вызов пути картинки анонса src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>". Вместо статического названия элемента укажем <? echo $arItem["NAME"] ?> (будут подтягиваться названия элементов инфоблока):

  <img class="card-img-top" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>"
  	alt="<? echo $arItem["NAME"] ?>">
  <div class="card-body ">
          <h5 class="card-title"><? echo $arItem["NAME"] ?></h5>
  

• Выводить текст анонса новостей будем конструкцией:

  <? if ($arParams["DISPLAY_PREVIEW_TEXT"] != "N" && $arItem["PREVIEW_TEXT"]): ?>
  	<p class="card-text"><? echo $arItem["PREVIEW_TEXT"]; ?></p>
  <? endif; ?>
  

• В коде, отвечающем за вывод кнопки перехода на страницу детального просмотра элемента, пропишем <? echo $arItem["DETAIL_PAGE_URL"] ?>:

  <a href="<? echo $arItem["DETAIL_PAGE_URL"] ?>" class="btn btn-primary">Подробнее</a>
  

Детальный просмотр новости: шаблон страницы и компонента

• создадим шаблон страницы;
• разместим и кастомизируем компонент Новость детально [comp include_news_detail](news.detail)[/comp].

1. Создание шаблона страниц для вывода детальной информации

Шаблон главной страницы уже подготовлен. Теперь нужно подготовить шаблон страницы вывода детальной информации.

Можно, конечно, создать шаблон по ранее описанному пути, но в этом случае можно сделать гораздо легче: [dw]копировать папку[/dw][di]

[/di] шаблона, [dw]переименовать[/dw][di]

[/di] и откорректировать файлы.

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

В нашем примере сделаем шаблон для страниц с подробной информацией минималистичным, оставив только [dw]копирайт[/dw][di]

[/di] в подвале сайта. Поэтому файл footer.php (в котором и содержится копирайт) оставим без изменений, отредактировав только файл header.php:

<? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?> <!-- Служебный код, необходим для защиты подключения этого файла без подключения ядра -->

<!DOCTYPE html>
<html lang="ru">

  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

	<title><? $APPLICATION->ShowTitle(); ?></title> <!-- Отображение заголовка страницы -->
	<? $APPLICATION->ShowHead();  ?> <!--  Вывод в шаблоне сайта основных полей тега head (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты) -->

  <!-- Font Awesome Icons -->
  <link href="<?=SITE_TEMPLATE_PATH?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700&selection.subset=cyrillic" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i&display=swap&subset=cyrillic' rel='stylesheet' type='text/css'>

</head>

<body id="page-top">
<div id="panel">
    <? $APPLICATION->ShowPanel(); ?> <!-- Отображение административной панели внизу страницы -->
</div>

В header.php мы оставили только служебный код, а также подключение стилей оформления текста.

2. Применение шаблона к странице

Создадим страницу вывода детальной информации. По умолчанию к ней будет применен шаблон сайта.

Изменим шаблон этой страницы (Настройки > Настройки продукта > Сайты > Список сайтов):

3. Размещение и настройка компонента

В результате при клике по кнопке [dw]Подробнее[/dw][di]

[/di] в разделе Новости главной страницы сайта перейдем на страницу подробного описания новости, однако [dw]отображение новости[/dw][di]

[/di] не совсем соответствует дизайну нашего сайта. Исправим это на следующем этапе.

4. Кастомизация компонента

• Скопируем шаблон компонента Новость детально по аналогии с [ds]уроком.[/ds][di]
  Это можно сделать двумя способами:

  1. В рамках файловой системы копированием папки /bitrix/components/bitrix/_нужный_компонент_/templates/ в папку /local/templates/шаблон_сайта/components/namespace/название_компонента/_название_шаблона.

  2. Средствами интерфейса системы, разместив на странице компонент и скопировав его с помощью команды Копировать шаблон компонента (при включённом режиме Правка).

  Подробнее…[/di]

• В папке скопированного шаблона компонента news.detail откроем в режиме редактирования файл template.php.
• Оформим детальный показ новости в том же стиле, что и показ анонса новостей. Для этого в файле исходной вёрстки страницы index.html скопируем [dw]часть кода,[/dw][di]
  
  [/di] отвечающую за стиль блока Новости.
• После первой строки <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?> (защита от подключения файла напрямую без подключения ядра) вставим скопированный ранее код вёрстки. Не забудьте поставить закрывающий тег </section>.
• В коде шаблона компонента, который скопировали, оставим только те части, которые отвечают за вывод картинки и текста.

Итоговый код кастомизированного шаблона компонента news.detail

Теперь осталось в настройках компонента news.detail установить подготовленный нами [dw]шаблон[/dw][di]

[/di] и проверить [dw]результат.[/dw][di]

[/di]

Меню: кастомизация шаблона компонента

Итак, для создания меню выполним следующие шаги:

1. Кастомизация шаблона компонента Меню

• Скопируйте шаблон компонента Меню. Это можно сделать двумя способами:
  • В рамках файловой системы копированием папки Контент > Структура сайта > Файлы и папки > bitrix > templates > [ваш шаблон] > components > bitrix > [название компонента] > [название шаблона компонента].
  • Средствами интерфейса системы, разместив на странице компонент и скопировав его с помощью команды [dw]Копировать шаблон компонента[/dw][di]
    
    [/di] (при включённом режиме Правка).
• Задайте скопированному шаблону новое название (переименуйте папку шаблона). Например, bottom_menu.
• В папке скопированного шаблона компонента Меню откройте в режиме редактирования файл template.php. Теперь нужно отредактировать этот шаблон в соответствии с исходным html-макетом сайта (т.е. согласно исходному файлу index.html):

  <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
  
  <?if (!empty($arResult)):?>
  <nav class="navbar navbar-expand-lg navbar-light">
  	<ul class="navbar-nav mx-auto"> 
  
  <?
  foreach($arResult as $arItem):
  	if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
  		continue;
  ?>
  	<?if($arItem["SELECTED"]):?>
  		<li class="nav-item"><a href="<?=$arItem["LINK"]?>" class="selected nav-link"><?=$arItem["TEXT"]?></a></li>
  	<?else:?>
  		<li class="nav-item"><a href="<?=$arItem["LINK"]?>" class="nav-link"><?=$arItem["TEXT"]?></a></li>
  	<?endif?>
  
  <?endforeach?>
  
  </ul>
  </nav>
  <?endif?>
  

  Добавлены служебные классы навигационной панели navbar, а также классы оформления:

  • navbar-expand-lg — горизонтальное расположение элементов на больших экранах (при уменьшении экрана элементы автоматически станут отображаться вертикальным списком);
  • navbar-light — светлая тема оформления;
  • mx-auto — выравнивание блока по центру по оси ОХ.

  Все используемые классы и стили можно посмотреть в документации используемой библиотеки шаблонов (в нашем примере — [ds]Bootstrap[/ds][di]
  Навигационная панель.

  Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.

  Подробнее…[/di]).

• Кроме того, у нас нет необходимости в специализированных стилях и картинках исходного шаблона компонента Меню. Поэтому можно удалить из папки нового шаблона файлы style.css, style.min.css и папку images.

2. Размещение компонента Меню в подвале сайта.

• Скопируем код вызова компонента. Это можно сделать следующими способами:
  • скопировать вызов из документации;
  • разместить на странице компонент Меню, и в [dw]совмещенном режиме просмотра[/dw][di]
    
    [/di] скопировать код вызова.
• Добавим скопированный код вызова в файл footer.php (Контент > Структура сайта > Файлы и папки > bitrix > templates > [шаблон вашего сайта] ):

  

  В кавычках указывается название используемого шаблона компонента. В нашем случае bottom_menu.

В результате этого этапа меню будет выводиться в подвале сайта [dw]кастомизированным шаблоном.[/dw][di]

[/di]

Управление служебными данными шаблона

Кодировка страниц и формат отображения дат

Bitrix Framework поддерживает кодировку UTF-8, в которой на одной странице могут сочетаться различные языки – от русского до иероглифов, что позволяет не заботиться о кодировке страниц. Рекомендуем вам разработку сайтов именно в кодировке UTF-8, что позволит вам избежать проблем с настройками однобайтных кодировок.

Настройка кодировки выполняется отдельно для административного и публичного раздела.

Управление метаданными

Основной целью использования метаданных является оптимизация сайта для поисковых систем. Поисковые системы используют метаданные для индексации документов сайта.

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

Набор свойств может быть задан отдельно для каждого сайта, работающего под управлением системы.

Управление заголовком документа

Одним из самых важных элементов сайта на сегодняшний день с позиции SEO-продвижения является заголовок окна браузера (тэг <title>). Практически повсеместно требуется, чтобы заголовок окна браузера отличался от заголовка страницы (тэг <H1>). В «1C-Битрикс» включена поддержка этого требования.

Установка заголовка производится как с помощью свойств страницы, так и по настройкам компонентов, размещенных на странице. Установка дополнительного заголовка окна веб-браузера осуществляется с помощью зарезервированого в продукте свойства title.

Управление кодировкой страниц

Информация по использованию кодировок для корректного отображения информации на страницах сайта. Основные принципы использования, а также способы настройки и подключения различных кодировок.

<head>
…
<meta http-equiv="Content-Type" content="text/html; charset=<?echo LANG_CHARSET?>">
…
<head> 

Управление заголовком документа

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

<H1><?$APPLICATION->ShowTitle()?></H1>

<H1><?$APPLICATION->ShowTitle(false)?></H1>

<head><title><?$APPLICATION->ShowTitle()?></title></head>

Примеры работы

В данном уроке мы поэтапно рассмотрим пример создания страницы, у которой заголовок окна браузера и сам заголовок страницы будут различаться.
В ходе работы, возможно, потребуется изменить шаблон сайта.

В результате мы должны получить примерно следующий результат:

Выполним следующее:

• Зададим заголовок страницы из интерфейса или с помощью функции $APPLICATION->SetTitle("Заголовок страницы"):

  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
  $APPLICATION->SetTitle("Заголовок страницы"); ?>
  
  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>
  

  

• Добавим дополнительный заголовок через интерфейс или с помощью функции $APPLICATION->SetPageProperty('title','Альтернативный заголовок'):

  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
  $APPLICATION->SetTitle("Заголовок страницы"); ?>
  
  <? $APPLICATION->SetPageProperty('title','Альтернативный заголовок'); ?>
  
  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>
  

  В системе функция $APPLICATION->SetPageProperty() имеет приоритет над функцией $APPLICATION->SetTitle() , поэтому в заголовке браузера и страницы будет отображено именно ее содержимое:

  

• Изменим шаблон страницы, если необходимо, так, чтобы вместо функции $APPLICATION->ShowTitle() заголовок страницы (не браузера) задавала $APPLICATION->ShowTitle(false).

  В таком случае будет игнорироваться значение свойства страницы SetPageProperty('title','Альтернативный заголовок') и в качестве заголовка страницы будет использован заголовок, установленный функцией SetTitle().

  Пример работы кода из предыдущего пункта, но с измененной функцией $APPLICATION->ShowTitle() на $APPLICATION->ShowTitle(false) в шаблоне сайта:

  

  Отдельно продемонстрируем разницу работы функции $APPLICATION->ShowTitle() с параметром false на следующем примере, без изменения кода шаблона:

  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
  $APPLICATION->SetTitle("Заголовок страницы"); ?>
  <? $APPLICATION->SetPageProperty('title','Альтернативный заголовок'); ?>
  
  <? $APPLICATION->ShowTitle(); ?>
  <br>
  <? $APPLICATION->ShowTitle(false); ?>
  
  <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
  

  

• Дополнительный пример работы нескольких функций по установке заголовка:

  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
  $APPLICATION->SetTitle("Заголовок страницы"); ?>
  
  <?
  $APPLICATION->SetPageProperty('title','Альтернативный заголовок');
  //......
  $APPLICATION->SetTitle("Заголовок страницы 2"); // заголовок установлен не будет т.к. у этой функции приоритет меньше 
  //.....
  $APPLICATION->SetPageProperty('title','Альтернативный заголовок 2'); // будет установлен именно этот заголовок т.к функция расположена ниже по коду
  ?>
  
  <? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); ?>
  

  

Управление стилями

.forumborder {background-color:#CACBBD;}
.forumhead
 {
      background-color:#EAEBE2;
 }
.forumbody
 {
      background-color:#FBFBF9;
 }
.forumbodytext
 {
      font-family: Arial, Helvetica, sans-serif; 
      font-size:smaller; 
      color:#000000;
 }
.forumheadtext
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:smaller; 
      color:#000000;
 }
.forumtitletext
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:smaller;
      color:#000000;
 }

.postsep
 {
      background-color: #9C9A9C; 
      height: 1px
 }

.forumquote
 {
      font-family: Arial, Helvetica, sans-serif; 
      font-size:8pt;
      color: #000000; 
      background-color: #FBFBF9; 
      border : 1px solid Black;
      padding-top: 2px; 
      padding-right: 2px; 
      padding-bottom: 2px; 
      padding-left: 2px; 
      text-indent: 2pt;
 }
.forumcode
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:8pt; 
      color: #333333; 
      background-color: #FBFBF9; 
      border : 1px solid Black; 
      padding-top: 2px; 
      padding-right: 2px; 
      padding-bottom: 2px; 
      padding-left: 2px; 
      text-indent: 2pt;
 }
…

.forumborder {background-color:#96C0FA;}
.forumhead {background-color:#A9CAF7;}
.forumbody {background-color:#D7E6FB;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#042A69;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

Ссылки по теме:

• Работа со стилями в битрикс (статья)
• Сжатие файлов css

Механизм реализации

Таблицы стилей подключаются к шаблону сайта в области пролога с помощью функции ShowCSS().

<?
$APPLICATION->ShowCSS(); 
?>

Функция ShowCSS() выполняет подключение файла стилей из текущего шаблона сайта, а также всех дополнительных стилей определенных для данной страницы функцией SetAdditionalCSS().

<?	
$APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");
?>

Дополнительные стили могут использоваться, например, для оформления форума, веб-форм, таблиц, некоторых типов меню и т.д.

При использовании функции ShowCSS() без параметров подключение стилей будет выполнено в виде ссылки на CSS файл:

<LINK href="/bitrix/templates/demo/styles.css" type="text/css" rel="STYLESHEET">

При этом стили, подключаемые с использованием SetAdditionalCSS(), будут включены в код страницы с использованием PHP функции require() (т.е. будут полностью включены в итоговый код страницы).

В случае использования функции ShowCSS() с параметром false файл стилей для текущего дизайна будет также включен в код страницы с использованием require():

<?
$APPLICATION->ShowCSS(false);
?>

Работа со стилями в визуальном HTML-редакторе

Для визуального редактора присутствует возможность к уже имеющимся стандартным стилям добавлять собственные и помещать их в соответствующую панель редактора. Чтобы стили отображались в меню, файл styles.css в шаблоне сайта должен существовать и быть непустым.

Чтобы подключать сторонние стили в визуальном редакторе, например Bootstrap и Font Awesome, нужно прописать данную возможность в файле description.php, находящемся в папке шаблона сайта:

"EDITOR_STYLES" => array (
		'/bitrix/css/main/bootstrap.css',
		'/bitrix/css/main/font-awesome.css',

Внимание! Ошибки при создании стилей могут вызвать серьезные проблемы в работе сайта, поэтому данную задачу лучше предоставить разработчику с необходимой квалификацией.

Для примера создадим простой стиль, добавляющий тексту рамку и меняющий его цвет на красный. Для начала добавим в файл styles.css описание стиля.

.example {
	border: 2px solid red; 
	color: red;
	padding: 20px; 
}

Когда стиль создан им уже можно начать пользоваться через форму Свойства, вызываемую по щелчку правой кнопкой мышки в рабочей области визуального редактора.

Чтобы созданный стиль отображался в меню, нужно добавить соответствующую строку в файл .styles.php.

<?
return array (
"example" => array(
        "tag" => 'p', /*в какой тег будет помещен текст в данном стиле*/
        "title" => "Это тестовый стиль", /*название стиля*/
        "html" => '<span style="border: 2px solid red;color: #ff0000; padding: 4px;">Пример</span>')  /*оформление текста с помощью html*/
);
?>

Примечание: Поля "tag" и "title" являются обязательными для заполнения. Также поле "title" по умолчанию используется как название пункта в списке, соответствующему стилю, и всплывающая подсказка при наведении курсора на него. Однако при использовании поля "html" можно также указать название, которое и будет отображаться в выпадающем списке.

Также можно разбивать стили по категориям с помощью поля "section". Пока что собственные стили можно помещать только в уже существующие категории.

Теперь созданный нами стиль отобразится в меню стилей.

Теперь созданный стиль можно применять из панели стилей.

Пример таблицы стилей для шаблона сайта

Стили для левого меню:

.leftmenu, .leftmenuact {font-family: Arial, Helvetica, sans-serif;
 font-size:12px; font-weight: bold; text-decoration: none;}
.leftmenu {color: #3F3F3F;}
.leftmenuact  {color:#FF5235;}

Стили для верхнего меню:

.topmenu  {font-family: Arial, Helvetica, sans-serif; font-size:12px;
 font-weight: bold; color: #FFFFFF; text-decoration: none;}
.topmenuact  {font-family: Arial, Helvetica, sans-serif; font-size:12px; 
 font-weight: bold; color: #FAC535; text-decoration: none;}

Стили для таблиц:

.tableborder  {background-color:#9C9A9C;}
.tablehead  {background-color:#D8D9DA;}
.tablebody  {background-color:#F8F8F8;}
.tablebodytext, .tableheadtext {font-family: Arial, Helvetica, sans-serif;
 font-size:12px;}
.tablebodytext {color:#000000;}
.tableheadtext {color:#000066;}

Управление значениями метаданных

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

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

Управление значениями метаданных через визуальный интерфейс

Чтобы иметь возможность управлять значениями метаданных, предварительно необходимо создать соответствующие свойства в настройках модуля Управление структурой (Настройки > Настройки продукта > Настройки модулей >Управление структурой):

Важно! Названия типов свойств, используемых для управления метаданными страниц, должны совпадать с названиями мета-тегов в языке HTML. Например, типы свойств ключевые слова и описание должны совпадать именами (name) соответствующих мета-тегов: keywords и description.

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

Подробную информацию по настройке свойств страниц и разделов, а также по управлению значениями метаданных вы можете узнать в курсах Контент-менеджер и Администратор. Базовый.

Обратите внимание! Значения свойств, заданные для папки, по умолчанию будут использоваться для всех страниц и подразделов соответствующего раздела сайта (если для них не заданы собственные значения этих свойств).

Управление метаданными в коде

Для вывода значений метаданных в коде страницы нужно воспользоваться функцией ShowMeta(), размещаемой в прологе шаблона дизайна сайта:

<head>
…
<?$APPLICATION->ShowMeta("keywords")?>
<?$APPLICATION->ShowMeta("description")?>
…
</head>

Предположим, что для страницы заданы следующие значения свойств ключевые слова и описание:

C помощью функции SetPageProperty() значения данных свойств будут применены к странице:

<?
$APPLICATION->SetPageProperty("keywords","веб,разработка,программирование");
$APPLICATION->SetPageProperty("description","Система управления сайтом");
?>

<?
…
$APPLICATION->SetDirProperty("keywords","дизайн, веб, сайт");
…
?>

$arDirProperties = array(
   "description" => "",
   "keywords" => "дизайн, веб, сайт",
   "title" => "",
);

Тогда в результате работы функции ShowMeta() в код страницы будет подставлен следующий HTML-код:

<meta name="keywords" content="веб,разработка,программирование">
<meta name="description" content="Система управления сайтом">

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

 $APPLICATION->SetPageProperty("description",$arIBlockElement["PROPERTIES"][$META_DESCRIPTION]["VALUE"]);

В данном случае в качестве значения свойства страницы description будет использовано значение свойства элемента информационного блока с кодом meta_description. Таким образом, можно создавать свойства keywords и description для элементов каталога и динамически подставлять их в код страницы.

Ссылки по теме:

• Свойства страниц и мета-теги

Интеграция компонентов

<?$APPLICATION->IncludeComponent(
	"bitrix:main.include",
	"",
	Array(
	"AREA_FILE_SHOW" => "file",
	"PATH" => $APPLICATION->GetTemplatePath("include_areas/company_name.php"),
	"EDIT_TEMPLATE" => ""
	)
);?>

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
  
World Book
  Все книги мира

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?$APPLICATION->IncludeComponent(
	"bitrix:menu",
	"horizontal_multilevel",
	Array(
		"ROOT_MENU_TYPE" => "top", 
		"MAX_LEVEL" => "3", 
		"CHILD_MENU_TYPE" => "left", 
		"USE_EXT" => "Y", 
		"MENU_CACHE_TYPE" => "A",
		"MENU_CACHE_TIME" => "3600",
		"MENU_CACHE_USE_GROUPS" => "Y",
		"MENU_CACHE_GET_VARS" => Array()
	)
);?>

Список ссылок по теме:

• Пользовательская документация с описанием компонентов.
• Подключение компонентов в курсе Контент-менеджер.

Что такое компонент

Простые и комплексные компоненты

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

С точки зрения структуры и способов подключения простые и комплексные компоненты очень похожи. Но с точки зрения функционирования они сильно отличаются.

Простые компоненты

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

Комплексные компоненты

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

Преимущество комплексных компонентов состоит в автоматической компоновке параметров одностраничных компонентов и отсутствии необходимости их связывать.

Комплексные компоненты разрешают следующие проблемы:

• Отпадает необходимость создания большого числа статических страниц для размещения всех требуемых подкомпонентов. Отпадает необходимость отдельно настраивать для каждого из подкомпонентов общие (пересекающиеся) свойства (например, тип инфоблока и инфоблок).
• Происходит установление сложных взаимосвязей между подкомпонентами. Например, нет необходимости для страницы со списком сообщений темы форума настраивать, как эта страница может указать на страницу списка тем форума, а как на страницу профиля посетителя.
• В компонент (даже с кастомизированными шаблонами вывода) можно добавить новую страницу. Например, если на форуме появится страница (подкомпонент) по выводу 10 посетителей с самым высоким рейтингом, то эта страница станет доступной и в публичной части.
• Можно сменить шаблон вывода всего комплексного компонента одним действием, а не настраивать вывод каждого из подкомпонентов.

Алгоритм работы комплексного компонента таков:

1. на основании действий посетителя сайта (например, переход по пунктам меню) комплексный компонент определяет, какая страница должна быть показана пользователю, и подключает свой шаблон компонента для этой динамической страницы;
2. шаблон страницы подключает обычные компоненты, автоматически настраивая необходимым образом их свойства;
3. обычные компоненты выполняют свою работу: запрашивают данные у ядра системы, форматируют их и выводят посетителю, а также предоставляют пользователю различные элементы управления (ссылки, формы, кнопки и т.п.);
4. пользователь с помощью каких-либо элементов управления, посылает новый запрос комплексному компоненту.

Пример

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

Раздел новостей можно организовать, например, разместив на странице index.php компонент списка новостей, а на странице news.php — компонент детальной новости. При этом у компонента списка новостей нужно настроить входные параметры так, чтобы он мог формировать ссылки на страницу детальной новости (с кодом новости), а у компонента детальной новости нужно настроить входные параметры так, чтобы он мог формировать ссылку на страницу списка новостей.

Чтобы задать ссылку на страницу детальной новости, нужно задать путь к этой странице, а так же название параметра, в котором будет передаваться код новости для показа. То же название параметра нужно задать и во входных параметрах компонента детальной новости, чтобы он знал, где брать код новости для показа. Даже в данном максимально упрощённом случае настройки не так просты. А если это набор из десятков компонентов форума?

Более удобной альтернативой для сборщика сайта будет использование комплексного компонента новостей. Этот компонент, например, можно просто установить на страницу index.php. Согласованием ссылок и параметров будет заниматься сам комплексный компонент. От разработчика сайта никаких дополнительных действий не потребуется.

Страницы шаблона комплексного компонента будут содержать подключение соответствующих обычных компонентов с правильной настройкой их входных параметров. Обычные компоненты будут выполнять свои обычные функции: им все равно, кто их вызвал и зачем. Для обычных компонентов важна только правильная настройка их входных параметров.

Таким образом реализуется паттерн MVC:

• на комплексный компонент новостей (controller) приходит HTTP запрос (действия пользователя);
• комплексный компонент новостей (controller) проверяет, установлен ли через HTTP запрос код новости и подключает из своего шаблона страницу списка новостей или страницу детальной новости (view);
• подключенная страница, в свою очередь, подключает соответствующий обычный компонент, устанавливая при этом его входные параметры соответствующим образом;
• обычный компонент выполняет свою работу: запрашивает данные у ядра (model), форматирует их и выводит посетителю, а также отображает элементы управления (ссылки, формы, кнопки и т.п.);
• пользователь с помощью элементов управления посылает новый HTTP запрос на комплексный компонент новостей (controller);
• процедура повторяется по мере надобности.

Список ссылок по теме:

• Комплексный компонент на пальцах от Антона Долганина (блог)

Структура компонента

Компонент хранит все, что ему нужно для работы, в своей папке. Поэтому их можно легко переносить между проектами.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
<? 
 //Проверяем и инициализируем входящие параметры компонента 
 if(вывод компонента находится в валидном кеше) 
 { 
 //Вывод данных из кеша
 } 
 else 
 { 
 //Запрос данных и формирование массива $arResult в соответствии со 
 //структурой,описанной в файле помощи компонента
 $this->IncludeComponentTemplate(); 
 //Кеширование вывода 
 } 
?>

<?echo “Торговый каталог”?>

<?echo GetMessage(“CATALOG”)?>

<?$MESS[“CATALOG”] = “Торговый каталог”;?>

$MESS["IBLOCK_TYPE_TIP"] = "Это подсказка для типа инфоблока";
$MESS["IBLOCK_ID_TIP"] = "Это подсказка для ID инфоблока";
$MESS["SORT_BY1_TIP"] = "Это подсказка для первой сортировки";

Структура комплексного компонента

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

Пример кода комплексного компонента:

<?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}

$arDefaultUrlTemplates404 = [
    'list'    => 'index.php',
    'element' => '#ELEMENT_ID#.php',
];

$arDefaultVariableAliases404 = [];
$arDefaultVariableAliases    = [];
$arComponentVariables        = ['IBLOCK_ID', 'ELEMENT_ID'];
$SEF_FOLDER                  = '';
$arUrlTemplates              = [];

if ($arParams['SEF_MODE'] == 'Y') {
    
    $arVariables = [];

    $arUrlTemplates = CComponentEngine::MakeComponentUrlTemplates(
        $arDefaultUrlTemplates404,
        $arParams['SEF_URL_TEMPLATES']
    );
    
    $arVariableAliases = CComponentEngine::MakeComponentVariableAliases(
        $arDefaultVariableAliases404,
        $arParams['VARIABLE_ALIASES']
    );

    $componentPage = CComponentEngine::ParseComponentPath(
        $arParams['SEF_FOLDER'],
        $arUrlTemplates,
        $arVariables
    );

    if (strlen($componentPage) <= 0) {
        $componentPage = 'list';
    }

    CComponentEngine::InitComponentVariables(
        $componentPage,
        $arComponentVariables,
        $arVariableAliases,
        $arVariables);

    $SEF_FOLDER = $arParams['SEF_FOLDER'];
} else {
    $arVariables = [];

    $arVariableAliases = CComponentEngine::MakeComponentVariableAliases(
        $arDefaultVariableAliases,
        $arParams['VARIABLE_ALIASES']
    );
    
    CComponentEngine::InitComponentVariables(
        false,
        $arComponentVariables,
        $arVariableAliases,
        $arVariables
    );

    $componentPage = '';
    
    if (intval($arVariables['ELEMENT_ID']) > 0) {
        $componentPage = 'element';
    } else {
        $componentPage = 'list';
    }

}

$arResult = [
    'FOLDER'        => $SEF_FOLDER,
    'URL_TEMPLATES' => $arUrlTemplates,
    'VARIABLES'     => $arVariables,
    'ALIASES'       => $arVariableAliases,
];

$this->IncludeComponentTemplate($componentPage);

?>

В начале кода определяются массивы:

• $arDefaultUrlTemplates404 — для задания путей по умолчанию для работы в ЧПУ режиме. Каждый элемент массива является шаблоном пути и задается в виде:

  "код шаблона пути" => "шаблон пути"

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

  "element" => "#ELEMENT_ID#.php"

  реальный путь будет иметь вид 195.php или 7453.php. Шаблоны путей могут иметь параметры, например:

  "element" => "#IBLOCK_ID#/#ELEMENT_ID#.php?SECTION_ID=#SECTION_ID#"

  Должны быть заданы все шаблоны путей, с которыми работает компонент.

• $arDefaultVariableAliases404 — для задания псевдонимов по умолчанию переменных в режиме ЧПУ. Как правило, этот массив пуст (используются реальные имена переменных). В случае, если необходимо, чтобы в HTTP запросе (в адресе) переменная называлась по другому, можно задать псевдоним этой переменной, а при работе компонента восстанавливать значение переменной из псевдонима. Если для какого-либо шаблона пути нужно задать псевдоним для одной или более переменных, то в этом массиве должен появиться элемент вида:

  "код шаблона пути" => array(
      "название переменной 1" => "псевдоним переменной 1",
      "название переменной 2" => "псевдоним переменной 2",
      * * *
      )

  Например, если требуется, чтобы ссылка на страницу детальной информации об элементе инфоблока (например, карточки товара) имела вид:

  "/<мнемонический код инфоблока>/.php?SID=<код группы элементов>"

  то шаблон пути можно задать в виде:

  "element" => "#IBLOCK_ID#/#ELEMENT_ID#.php?SID=#SECTION_ID#"

  а в массиве $arDefaultVariableAliases404 задать псевдоним для переменной SECTION_ID в виде:

  "element" => array(
      "SECTION_ID" => "SID"
      )

  В этом случае ссылки (адреса) будут формироваться с параметром SID, а в компонентах будет установлена переменная SECTION_ID.

• $arDefaultVariableAliases — для задания псевдонимов по умолчанию переменных в режиме не ЧПУ. Как правило, этот массив пуст, то есть используются реальные имена переменных. В случае, если необходимо, чтобы в HTTP запросе (в адресе) переменная называлась по другому, можно задать псевдоним этой переменной, а при работе компонента восстанавливать значение переменной из псевдонима. Если для какой-либо переменной нужно задать псевдоним, то в этом массиве должен появиться элемент вида:

  "название переменной" => "псевдоним переменной"

  Например, если название переменной в компоненте SECTION_ID, но требуется, чтобы в ссылках использовалась переменная SID, то псевдоним для SECTION_ID можно задать в виде

  "SECTION_ID" => "SID"

  В этом случае, ссылки (адреса) будут формироваться с параметром SID, а в компонентах будет установлена переменная SECTION_ID. Все эти массивы или их части могут быть переопределены с помощью входных параметров компонента (при вызове компонента). Например, во входном параметре SEF_URL_TEMPLATES в ЧПУ режиме может быть задан массив:

  "SEF_URL_TEMPLATES" => array(
      "element" => "#IBLOCK_CODE#/#ELEMENT_ID#.php?GID=#SECTION_ID#"
      )

  а во входном параметре VARIABLE_ALIASES может быть задан параметр:

  "VARIABLE_ALIASES" => array(
      "element" => array(
      "SECTION_ID" => "GID",
      ),
  )

  Тогда в адресах (ссылках) пути будут иметь вид типа /phone/3425.php?GID=28, а в компоненте из них будут восстанавливаться переменные IBLOCK_CODE = phone, ELEMENT_ID = 3425 и SECTION_ID = 28.

• $arComponentVariables — для задания списка переменных, которые компонент может принимать в HTTP запросе и которые могут иметь псевдонимы. Каждый элемент массива является именем переменной.

Входной параметр с предопределённым именем SEF_MODE может иметь два значения: Y и N. Если $arParams["SEF_MODE"] равен Y, значит компонент работает в режиме ЧПУ, иначе — нет.

Входной параметр с предопределённым именем SEF_FOLDER имеет смысл в том случае, если компонент работает в режиме ЧПУ. В этом случае он содержит путь, по которому работает компонент. Путь может быть виртуальным (т.е. физически он может не существовать). Например, компонент из примера может лежать в файле /fld/n.php, при этом он работает в режиме ЧПУ и входной параметр SEF_FOLDER равен /company/news/. Тогда компонент будет откликаться на запросы по адресам /company/news/index.php, /company/news/25.php и т.п.

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

• CComponentEngine::MakeComponentUrlTemplates

  CComponentEngine::MakeComponentUrlTemplates(
      $arDefaultUrlTemplates404, 
      $arParams['SEF_URL_TEMPLATES']
  );

  Метод объединяет массив по умолчанию шаблонов путей и шаблоны путей, которые были переданы во входных параметрах компонента в один массив. При этом, если в $arParams["SEF_URL_TEMPLATES"] определён шаблон какого-либо пути, то он переопределяет шаблон по умолчанию этого пути.

• CComponentEngine::MakeComponentVariableAliases

  CComponentEngine::MakeComponentVariableAliases(
      $arDefaultVariableAliases404, 
      $arParams['VARIABLE_ALIASES']
  );

  Метод объединяет массив по умолчанию псевдонимов переменных и псевдонимы переменных, которые были переданы во входных параметрах компонента в один массив. При этом, если псевдоним некоторой переменной определён и в массиве по умолчанию, и во входных параметрах, то возвращается псевдоним из входных параметров.

• CComponentEngine::ParseComponentPath

  CComponentEngine::ParseComponentPath(
      $arParams['SEF_FOLDER'],
      $arUrlTemplates,
      $arVariables
  );

  Метод на основании параметра $arParams["SEF_FOLDER"] и массива шаблонов путей (который вернул метод MakeComponentUrlTemplates) определяет, какому шаблону пути соответствует запрошенный адрес. Если шаблон был найден, возвращается его код, иначе возвращается пустая строка. Кроме того, в переменной $arVariables возвращается массив переменных компонента, который был восстановлен из шаблона пути без параметров. Например, если массив шаблонов путей (который получился из массива $arDefaultUrlTemplates404 после переопределения всех или части шаблонов через входные параметры компонента) имеет вид:

  $arUrlTemplates = array(
      "list" => "index.php",
      "element" => "#IBLOCK_ID#/#ELEMENT_ID#.php?SID=#SECTION_ID#"
  );

  Если входной параметр SEF_FOLDER равен /company/news/, а запрошенный адрес равен /company/news/15/7653.php?SID=28, то метод ParseComponentPath вернет строку «element» (код соответствующего шаблона), а массив $arVariables будет иметь вид:

  $arVariables = array(
      "IBLOCK_ID" => 15,
      "ELEMENT_ID" => 7653
  )

• CComponentEngine::InitComponentVariables

  CComponentEngine::InitComponentVariables(
      $componentPage,
      $arComponentVariables,
      $arVariableAliases,
      $arVariables
  );

  где:

  • $componentPage — код шаблона, который вернул метод ParseComponentPath и которому соответствует запрошенный адрес;
  • $arComponentVariables — массив переменных, которые компонент может принимать в HTTP запросе и которые могут иметь псевдонимы;
  • $arVariableAliases — массив псевдонимов (который вернул метод MakeComponentVariableAliases).

  Метод восстанавливает переменные из $_REQUEST c учётом их возможных псевдонимов и возвращает их в переменной $arVariables. Например, если для кода, приведенного выше, в массиве $arVariableAliases есть запись вида

  "element" => array(
      "SECTION_ID" => "SID",
  )

  то метод InitComponentVariables в параметре $arVariables вернет массив вида

  $arVariables = array(
      "IBLOCK_ID" => 15,
      "ELEMENT_ID" => 7653,
      "SECTION_ID" => 28
  )

  Здесь методом InitComponentVariables был инициализирован третий элемент массива. Первые два были инициализированы методом ParseComponentPath в примере выше. В случае работы компонента не в режиме ЧПУ, в метод InitComponentVariables первым параметром передается значение False.