🏷️

Создание шаблона «1С-Битрикс»

📅 Опубликовано:11 сентября 2011

Это статья из старого первого блога, который сохранился только на archive.org. Все старые статьи помечены тегом 🚨 старое

Этот пост, представляет собой мою интерпретацию устройства шаблона CMS «1С-Битрикс» и процесса его создания, попытку в более-менее сжатой форме и одновременно наиболее подробно и наглядно рассказать о создании основного (базового) шаблона-каркаса Битрикс.

В CMS «1С-Битрикс» шаблонизация устроена довольно удобным образом. Здесь логика почти полностью отделена от представления. Все максимально просто и наглядно.

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

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

Как и в большинстве систем управления контентом, в «1С-Битрикс» процесс шаблонизации можно условно разделить на два этапа или части:

создание основного, базового шаблона-каркаса;
создание и/или кастомизация отдельных «подшаблонов» компонентов (меню, цепочка навигации, форма поиска, каталог, новости и т.д.).

В этом посте я рассмотрю основную первую и наиболее быструю часть.

🧩 Структура шаблона

Структура шаблона «1С-Битрикс» представляет собой набор следующих файлов и директорий:

Шаблон должен располагаться здесь: /bitrix/templates/имя_шаблона/

🎯 Название и описание шаблона

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


      <?$arTemplate = Array(
        "NAME"=>"Корпоративный сайт", 
        "DESCRIPTION"=>"На главную страницу сайта выведен каталог книг."
      );?>

В некоторых шаблонах вместо названия и описания могут указываться функции примерно такого вида: GetMessage(‘TEMPLATE_NAME’);:


      <?$arTemplate = Array(
          "NAME"=>GetMessage('TEMPLATE_NAME'),
          "DESCRIPTION"=>GetMessage('TEMPLATE_DESC')
      );?>

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

Для русской версии, переменные описания шаблона будут располагаться в этом файле: /bitrix/templates/info_light_green/lang/ru/description.php.

Файлы preview.gif и screen.gif — соответственно предварительное, располагающееся сразу в разделе «шаблоны сайтов» и изображение более детальное, отображающееся по клику на превью.

🧇 Рабочая область

В шаблоне «1С-Битрикс» существует понятие «рабочей области страницы». То есть, это та часть страницы сайта, в которой располагается основной контент. Если у вас имеется трехколоночный макет, в котором, главная колонка центральная, и в ней находится основной контент, то рабочей областью страницы будет содержимое центральной колонки, которое меняется от страницы к странице. Это деление совершенно условное, но очень важно разделить макет по этому принципу.

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

Такое деление обусловлено структурой шаблона «1С-Битрикс». Рабочая область страницы или как она обозначается в форме редактирования шаблона административной части Битрикс — #WORK_AREA#, делит все содержимое шаблона на две части: пролог и эпилог. То есть, весь код шаблона до рабочей области — это пролог (файл header.php), а все что после — эпилог (файл footer.php)

Допустим, у нас имеется простейший сверстанный HTML-макет:


      <!DOCTYPE HTML>
      <html>
          <head>
              <title>Супер-сайт</title>
              <meta charset="utf-8">
              <link rel="shortcut icon" href="favicon.ico">
              <link rel="stylesheet" href="styles.css">
              <script src="script.js"></script>
          </head>
      
          <body>
              <div id="header">
                  <a href="/" class="logo">
                    <img src="images/logo.gif" alt="супер-лого" />
                  </a>
                  <ul class="menu">
                      <li><a href="">О компании</a></li>
                      <li><a href="">Контактная информация</a></li>
                      <li><a href="">Карта сайта</a></li>
                  </ul>
                  Верхняя часть
              </div>
              <div id="page">
                  <div id="left-sidebar">
                      Левая колонка
                  </div>
                  <div id="mainbar">
                      Главная центральная колонка
                  </div>
                  <div id="right-sidebar">
                      Правая колонка
                  </div>
              </div>
              <div id="footer">
                  Нижняя часть
              </div>
          </body>
      </html>

В идеологии шаблонизации Битрикс, наш простой HTML-макет можно представить в виде содержимого двух файлов:

header.php


    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Супер-сайт</title>
            <meta charset="utf-8">
            <link rel="shortcut icon" href="favicon.ico">
            <link rel="stylesheet" href="styles.css">
            <script src="script.js"></script>
        </head>
    
        <body>
            <div id="header">
                <a href="/" class="logo">
                  <img src="images/logo.gif" alt="супер-лого" />
                </a>
                <ul class="menu">
                    <li><a href="">О компании</a></li>
                    <li><a href="">Контактная информация</a></li>
                    <li><a href="">Карта сайта</a></li>
                </ul>
                Верхняя часть
            </div>
            <div id="page">
                <div id="left-sidebar">
                    Левая колонка
                </div>
                <div id="mainbar">

footer.php


                </div>
                <div id="right-sidebar">
                    Правая колонка
                </div>
            </div>
            <div id="footer">
                Нижняя часть
            </div>
        </body>
    </html>

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

Рабочая область — это просто место в результирующем выводе, в которое вставляется основное содержимое страницы на этапе отрабатывания логики системы управления контентом. Этим содержимым будет содержимое статической страницы сайта, в которой, в свою очередь может быть размещен компонент (а точнее код вызова компонента), формирующий, к примеру, каталог товаров или вывод списка новостей.

Это проще понять, представив, как реализуется структура сайта в «1С-Битрикс». Те, кто знаком с Drupal, знают, что там нет такого понятия как физическая страница. На жестком диске физически никаких файлов для страниц нет, содержимое страниц формируется сразу в шаблоне из, так называемых, нод (node) — базовых узлов. Также физически нет никаких директорий для обозначения разделов. Все задается в настройках административной части и существует «виртуально» в базе данных.

В «1С-Битрикс» напротив, — каждая статическая страница имеет свой аналог на жестком диске — PHP-файл примерно такого вида:


      <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
      $APPLICATION->SetTitle("Главная страница");?>
      
      Содержимое страницы
      
      <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Основные разделы также присутствуют физически в виде директорий.

Из содержимого страницы видно, что в ней, подключаются файлы пролога и эпилога. И теперь здесь можно буквально «пощупать» эту неуловимую #WORK_AREA# :) В данном случае, это статический текст. Но вместо текста подобная страница может содержать и код вызова какого-нибудь компонента Битрикс, который в свою очередь будет формировать на этой странице какой-то контент из базы данных, к примеру, выводить список товаров.

Файлы header.php и footer.php являются основными файлами шаблона «1С-Битрикс». В которых, собственно, и описан вывод всей остальной информации, подключение файлов CSS, JS, вызов компонентов Битрикс и т.п.

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

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


    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Супер-сайт</title>
            <meta charset="utf-8">
            <link rel="shortcut icon" href="favicon.ico">
            <link rel="stylesheet" href="styles.css">
            <script src="script.js"></script>
        </head>
    
        <body>
            <div id="header">
                <a href="/" class="logo">
                  <img src="images/logo.gif" alt="супер-лого" />
                </a>
                <ul class="menu">
                    <li><a href="">О компании</a></li>
                    <li><a href="">Контактная информация</a></li>
                    <li><a href="">Карта сайта</a></li>
                </ul>
                Верхняя часть
            </div>
            <div id="page">
                <div id="mainbar">
                    Главная центральная колонка
                </div>
                <div id="left-sidebar">
                    Левая колонка
                </div>
                <div id="right-sidebar">
                    Правая колонка
                </div>
            </div>
            <div id="footer">
                Нижняя часть
            </div>
        </body>
    </html>

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

header.php


    <!DOCTYPE HTML>
    <html>
        <head>
            <title>Супер-сайт</title>
            <meta charset="utf-8">
            <link rel="shortcut icon" href="favicon.ico">
            <link rel="stylesheet" href="styles.css">
            <script src="script.js"></script>
        </head>
    
        <body>
            <div id="header">
                <a href="/" class="logo">
                  <img src="images/logo.gif" alt="супер-лого" />
                </a>
                <ul class="menu">
                    <li><a href="">О компании</a></li>
                    <li><a href="">Контактная информация</a></li>
                    <li><a href="">Карта сайта</a></li>
                </ul>
                Верхняя часть
            </div>
            <div id="page">
                <div id="mainbar">

footer.php


                </div>
                <div id="left-sidebar">
                    Левая колонка
                </div>
                <div id="right-sidebar">
                    Правая колонка
                </div>
            </div>
            <div id="footer">
                Нижняя часть
            </div>
        </body>
    </html>

Все описанное выше, можно еще раз осмыслить, ознакомившись со страницей курса «Интеграция»

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

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

Динамическое содержимое включается в шаблон служебными директивами Bitrix Framework — обычными PHP-вставками вызова специальных функций Битрикс, кода вызова отдельных компонентов, или сочетанием их и каких-то дополнительных условий.

Итак, интегрируем далее наш упрощенный шаблон.

Заголовок документа <title></title> обычно динамический, в Битрикс им можно довольно гибко управлять, вместо статического, заменяем его на специальную служебную директиву <?$APPLICATION->ShowTitle()?> (подробнее о управлении заголовком окна браузера и страницы можно почитать на соответствующей странице на сайте Битрикс).

Далее, все метатеги, подключение иконки сайта и таблиц каскадных стилей заменяем директивой <?$APPLICATION->ShowHead()?>. Стоит обратить внимание, что иногда может возникнуть потребность подключить свои собственные, не предусмотренные конструкцией системы СSS или JS файлы.

Для этого существуют специальные функции. Для CSS это ShowCSS() и SetAdditionalCSS(), для JS-файлов — AddHeadScript().

Хотя вполне возможно задавать жестко пути к файлам. Но это не совсем удобно и в некоторых случаях совершенно недопустимо. К примеру, если по каким-то причинам js-файл находится в общей структуре сайта, здесь: суперсайт.рф/script.js, еще ладно, указали <script src=“/script.js”></script> и успокоились, но если он находится в шаблоне сайта в директории js, указание подобной «колбасы» вручную будет мягко говоря странным: <script src=“/bitrix/templates/имя_шаблона/js/script.js”></script>. Для подобных случаев, для задания относительных путей к шаблону, дабы не прослеживать всю иерархию, существует специальная константаSITE_TEMPLATE_PATH, с ее использованием путь к нашему js-файлу будет выглядеть очень просто:


    <script src="<?=SITE_TEMPLATE_PATH?>/js/script.js">

С областью <head></head> закончили. Двигаемся далее.

Так как у сайта на Битрикс, имеется административная часть и соответствующая панель, появляющаяся после авторизации администратора в публичном разделе, необходимо указать в шаблоне место для ее показа с помощью директивы <?$APPLICATION->ShowPanel();?>, обычно это место находится сразу после открывающего тега <body>.

В верхней части нашей вымышленной разметки имеется ссылка с изображением. Имеет смысл все изображения, служащие для оформления макета, располагать в определенной директории в папке с шаблоном сайта. Наиболее информативное название для директории будет «images». Следовательно, так же как и в случае с js-файлом, указываем путь к логотипу с помощью константы SITE_TEMPLATE_PATH:


    <a href="/" class="logo">
      <img src="<?=SITE_TEMPLATE_PATH?>/images/logo.gif" alt="супер-лого" />
    </a>

🌼 Размещение компонента в шаблоне

Далее следует ненумерованный список с главным меню сайта. Очевидно, что его нужно заменить на вызов компонента меню Битрикс, так как нам необходимо обеспечить возможность создавать и редактировать пункты меню через административную панель.

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

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

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

1. В пользовательской документации. Например, вот страница с образцом кода вызова компонента выводящего на странице меню сайта. Правда на этой странице вызов написан с ошибками, в пятой и шестой строке после “USE_EXT” => “Y” и “DELAY” => “N”, должны присутствовать запятые, видимо опечатались :)

2. В визуальном редакторе перетащив иконку нужного компонента с вкладки «Компоненты 2.0» в любое место какой-нибудь пустой страницы сайта, перейдя после этого в режим редактирования исходного кода и скопировав появившийся код вызова компонента.

Добавление компонента в визуальном редакторе.

Этот способ рекомендован Битрикс, видимо из за возможности наличия опечаток в документации.

Компоненты бывают простые и комплексные, их шаблоны размещаются в директории components основного шаблона сайта в директории своего пространства имен ( подробнее о пространстве имен и размещении компонентов), в данном случае, если логика компонента не менялась, шаблон компонента ( подробнее о структуре шаблона компонента) должен находиться в пространстве имен bitrix в директории, означающей его назначение, а именно: /bitrix/templates/имя_шаблона_сайта/components/bitrix/имя_компонента/имя_шаблона_компонента/

Возникает вопрос, где брать шаблон компонента? Если вы ознакомитесь с курсом «интеграция» либо ” быстрый старт разработчика” вопросов возникнуть не должно, но все же, шаблон компонента можно раздобыть двумя способами:

1. Так как шаблоны всех системных компонентов находятся здесь: /bitrix/components/bitrix/имя_компонента/templates/, то достаточно просто скопировать в соответствующую директорию основного шаблона, шаблон нужного компонента и изменить его название (название директории) на заранее придуманное. К примеру, для нашего меню, нужно отсюда: /bitrix/components/bitrix/menu/templates/ скопировать директорию horizontal_multilevel с шаблоном горизонтального многоуровневого (т.е. выпадающего) меню в директорию нашего шаблона /bitrix/templates/имя_шаблона/components/bitrix/menu/ и переименовать ее. А затем в административной части в режиме разработки вызвать параметры компонента в его меню кликнув на иконку шестеренки и выбрав в меню первый пункт «редактировать параметры компонента» указать в открывшейся форме, в списке «Шаблон компонента» ранее созданный шаблон.

2. Более простой, но не подходящий для абсолютно всех системных компонентов. В административной панели все в том же меню компонента, перейдя на второй уровень выпадающего меню выбрать пункт «копировать шаблон компонента» и в открывшейся форме копирования шаблона, указать имя нового шаблона, а также установить радиокнопку напротив названия нашего основного шаблона в разделе «Копировать в шаблон сайта:» Скопированный шаблон автоматически применится к компоненту, а также откроется в форме редактирования его кода, если вы не убрали нижние галки в форме копирования шаблона. Данный способ не подходит для абсолютно всех компонентов, т.к. существуют компоненты, которые не отображаются на странице после авторизации, к примеру, форма регистрации. В этом случае шаблон для нее нужно будет копировать вручную, используя первый способ.

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


      <!DOCTYPE HTML>
      <html>
          <head>
              <title><?$APPLICATION->ShowTitle()?></</title>
              <?$APPLICATION->ShowHead()?>
              <script src="<?=SITE_TEMPLATE_PATH?>/js/script.js">
          </head>
      
          <body>
              <?$APPLICATION->ShowPanel();?>
              <div id="header">
                  <a href="/" class="logo">
                    <img 
                      src="<?=SITE_TEMPLATE_PATH?>/images/logo.gif" 
                      alt="супер-лого" 
                    />
                  </a>
                  <?$APPLICATION->IncludeComponent("bitrix:menu",".default",Array(
                          "ROOT_MENU_TYPE" => "top",
                          "MAX_LEVEL" => "1",
                          "CHILD_MENU_TYPE" => "top",
                          "USE_EXT" => "Y",
                          "DELAY" => "N",
                          "ALLOW_MULTI_SELECT" => "Y",
                          "MENU_CACHE_TYPE" => "N",
                          "MENU_CACHE_TIME" => "3600",
                          "MENU_CACHE_USE_GROUPS" => "Y",
                          "MENU_CACHE_GET_VARS" => ""
                      )
                  );?>
                  Верхняя часть
              </div>
              <div id="page">
                  <div id="left-sidebar">
                      Левая колонка
                  </div>
                  <div id="mainbar">
                      Главная центральная колонка
                  </div>
                  <div id="right-sidebar">
                      Правая колонка
                  </div>
              </div>
              <div id="footer">
                  Нижняя часть
              </div>
          </body>
      </html>

🖼️ CSS-файлы шаблона

И на последок, пришло время разобраться с CSS-файлами шаблона.

В документации Битрикс о двух главных CSS-файлах основного шаблона сказано не очень много. Из чего, на первых порах может возникнуть некоторая путаница. Но на самом деле все не так уж запутанно. В основном шаблоне сайта за работу с таблицами каскадных стилей отвечают три файла: styles.css, .styles.php и template_styles.css.

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

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

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

К примеру, если руководствоваться определением в документации Битрикс, если на сайте для всех заголовков определены соответствующие стили отображения, т.е. они используются как для оформления контента страниц, так и для оформления контента блоков, которые находятся вне основной части страницы, то мы должны их поместить как в файл template_styles.css так и в styles.css, так как хотим чтобы заголовки отображались одинаково, как в визуальном редакторе, так и во всех местах основного шаблона сайта. Но если иметь ввиду то, что оба этих файла подключаются к шаблону, нетрудно сообразить, что в данном случае все стили для оформления заголовков следует поместить только в файл styles.css, так как он тоже подключается на странице.

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

К разнесению стилей по этим двум файлам следует подходить внимательно. К примеру, если вам необходимо сделать цвет фона сайта серым, а цвет фона в визуальном редакторе — красным, то в файле template_styles.css для тега body необходимо определить background-color:#ccc;, а в файле styles.css для этого же тега: background-color:#ff0000;

Так как файлы на странице сайта подключаются в таком порядке:

styles.css
template_styles.css

то на сайте фон body станет серого цвета, т.к. стиль в последнем подключенном файле template_styles.css «перебьет» стиль, определенный в styles.css. А в визуальном редакторе фон станет красным, так как содержимое визуального редактора представляет собой iframe в который подключаются стили только из файла styles.css причем вставляются они непосредственно в область head с помощью тега <style>.

Но если в файле styles.css к определению цвета добавить повышение приоритета !important, то стиль из этого файла «перебьет» стиль, определенный в template_styles.css, фон сайта станет также красного цвета, несмотря на то, что файл template_styles.css подключается последним.

В визуальном редакторе имеется возможность задавать стили создаваемым в нем же HTML-элементам, выбирая их названия из выпадающего списка. Для задания более информативных имен стилей, чем в файле styles.css и служит файл .styles.php.

Более подробно про работу со стилями и HTML-конструкциями в визуальном редакторе а также о назначении директорий include_areas, page_templates, snippets, я постараюсь рассказать в следующих постах.

Цветовая тема