Шаблон сайта в битриксе где хранится

Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки

Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.

В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.

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

Создание каркаса шаблона

Шаблон сайта с точки зрения 1С-Битрикс – это папка с набором определённых файлов внутри, поэтому шаблон может быть создан как через файловую структуру (инструментами 1С-Битрикс, по FTP или SSH), так и с помощью раздела.

• Первым делом создадим в папке /bitrix/templates/ раздел, название которого в дальнейшем будет использоваться в качестве ID нашего шаблона, например whitesquare-bootstrap (в дальнейшем в рамках статьи мы будем всегда по умолчанию подставлять именно это значение в качестве ID шаблона).
• Перенесём в папку шаблона общие ресурсы (JS, CSS, изображения, шрифты) из шаблона страницы:

• /bitrix/templates/whitesquare-bootstrap/header.php
• /bitrix/templates/whitesquare-bootstrap/footer.php

(это будет пример рабочей страницы на котором мы будем проверять работоспособность нашей рабочей области) в котором помимо Html разметки мы добавим вызов header’а и footer’а (они создадутся автоматически, если создавать страницу средствами 1С-Битрикс):

Элементы 1С-Битрикс

• Добавим подключение пролога и языковых файлов. Это необходимо сделать как в header.php, так и в footer.php (т.е. в начале шаблона и сразу после #WORKAREA#)
• Заменим текст внутри тега <title> на вызов функции:
• Заменим текст внутри тега <h1> на вызов функции:
  Как видите используютcя разные параметры для вызова одной отложенной функции, чтобы можно было задать разные значения для заголовка браузера и заголовка видимой части страницы, если это потребуется SEO специалистам.
• Добавим вывод мета-данных (ключевых слов и описания для поисковых систем):
• Зададим относительный путь ко всем файлам шаблона (картинка, CSS, JS, шрифтам) — — данная функция задаёт путь к шаблону относительно корня сайта (и позволяет не прописывать в явном виде идентификатор шаблона, что полезно при копировании или переименовании оного). В результате мы получим:
  Аналогичным образом мы можем использовать SITE_TEMPLATE_PATH и в index.php, однако следует помнить о том, что при смене шаблона в настройках сайта, применяемого к странице, изменится и этот путь!
• <?$APPLICATION->ShowMeta(«description»)?>
  Добавим вызов функции $APPLICATION->ShowHead();, которая служит сразу нескольким целям (в частности динамическому подключению CSS и JS библиотек, объявленных в компонентах в теле страниц с помощью отложенных функций в заголовке, а так же объединяет и сжимает эти библиотеки, если используется соответствующая настройка 1С-Битрикс)
  С помощью отложенных функций SetAdditionalCSS и AddHeadScript мы можем всегда подключить CSS и JS в <header>, а так же избежать повторного подключения одинаковых библиотек (это особенно актуально, например для JQuery, если вы подключаете её не централизованно в шаблоне сайта, в соответствующих компонентах и таких компонентов окажется на странице несколько).
  Важно помнить, что мы не можем таким образом воспроизвести конструкции типа <!—[if lt IE 9]> для устаревших браузеров, поэтому целиком конструкция будет иметь вид:

Фактически мы создали статичный HTML каркас с минимальным набором элементов 1С-Битрикс, который уже работает.
Дальнейшая наша задача – перевод отдельных функциональных блоков на работу с компонентами 1С-Битрикс.

Компоненты 1С-Битрикс

В рамках данной статьи мы остановимся только на процессе интеграции вёрстки со стандартными компонентами 1С-Битрикс. Мы не будем создавать свои компоненты и не будем кастомизировать типовые.

Мы создадим отдельную страницу (например, 1.php) на которой будем размещать по 1 компоненту для упрощения работы средствами 1С-Битрикс.

Разместим компонента (например, форму поиска — bitrix:search.form) с помощью визуального редактора:

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

В появившемся диалоге нам необходимо указать имя шаблона компонента и выбрать шаблон сайта в котором будет хранится шаблон компонента (в нашем случае это whitesquare-bootstrap):

В результате наших действий в Шаблоне компонента /bitrix/templates/whitesquare-bootstrap/ появилась ещё одна папка – components – в ней будут находиться шаблоны всех компонентов, используемых в рамках шаблона сайта.
Первый появившийся шаблон компонента будет расположен по адресу /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Опытные разработчики могут сразу создавать шаблон компонента, копируя его в шаблон сайта из компонента.

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

Включаемые области (лого, копирайт, соц сети)

Компонент включаемой области позволяет вложить внутрь себя любой текст, HTML или php код, а так же другие компоненты и вывести этот контент для определённой страницы, раздела или везде, где вызывается включаемая область.
Для всех указанных выше объектов мы считаем рациональным использование включаемой области с целью вынести эти блоки из шаблона. Т.е. для их редактирования по прежнему необходимо будет владеть минимумом познаний в HTML.
Профессионалы могут возразить, что для блока с кнопками соц сетей следовало бы сделать свой компонент, однако нам это кажется не рациональным. Проще загнать этот блок за 10 минут во включаемую область и отредактировать при необходимости, ведь адрес сообщества Facebook не меняется каждый день!

• /bitrix/templates/whitesquare-bootstrap/include/bottom-logo.php
• /bitrix/templates/whitesquare-bootstrap/include/copyright.php
• /bitrix/templates/whitesquare-bootstrap/include/social-networks.php
• /bitrix/templates/whitesquare-bootstrap/include/top_logo.php

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

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

Форма поиска

Мы воспользовались компонентом bitrix:search.form и скопировали suggest шаблон компонента в шаблон сайта.
HTML код шаблона компонента находится в файле /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php

Как видим, у нас не простой, а комплексный компонент (т.е. компонент в состав которого входят другие компоненты). В данном случае это сама форма в которую производится ввод поискового запроса.
Скопируем её шаблон в шаблон сайта.
К сожалению, это не очень красиво – в публичке мы используем 1 компонент, а шаблонов у нас 2. Воспользуемся обычной схемой для комплексных компонентов:

Комплексный компонент

1. Создадим в папке /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/ папку bitrix
2. Переместим шаблон компонента /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.suggest.input/ в /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/. Таким образом получив:
   /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/
3. В параметрах компонента bitrix:search.suggest.input укажем шаблон top:

Вернёмся к форме поиска

• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/template.php
• Как вы можете видеть, мы заменили фразы “GO” и “Search” в компонентах на вызов GetMessage – таким образом, мы вынесли фразы в языковые файлы и можем задать разные значения для русского и английского сайтов, использующих общий шаблон и общий компонент.

• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/ru/template.php
• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/en/template.php
• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/ru/template.php
• /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/en/template.php

Верхнее меню

Для создания верхнего меню воспользуемся компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем top. Он практически не содержит ничего лишнего, поэтому мы легко адаптируем его под нашу вёрстку:

Теперь заменим блок верхнего меню в шаблоне на вызов компонента меню:

Левое меню

Аналогично верхнему меню возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем left.
После правки шаблона получим:

Заменим блок левого меню в шаблоне вызовом компонента:

Пользуясь тем, что в 1С-Битрикс меню наследуется мы можем положить файлы левого меню .left.menu.php во все разделы, где они нужны с разным содержимым, а в корне, например, вовсе убрать. Вёрстка не пострадает, а меню будет отображаться лишь там, где это необходимо.

Нижнее меню

Нижнее меню (в разделе SiteMap) отображается в 2 колонки. Можно конечно сделать универсальный компонент меню в шаблоне которого пункты будут делиться по столбцам (автоматически, либо по наличию какого-либо параметра, установленного для пунктов в режиме расширенного редактирования меню).
Однако, мы понимаем, что подвал – не самая часто редактируемая часть и нет смысла тратить значительные усилия на его разработку.
Поэтому мы пойдём по простому пути (за который любители идеального кода, вероятно, нас проклянут) – мы создадим 2 меню: bottomL и bottomR.
Несмотря на то, что меню будет 2 шаблон мы для них будем использовать 1.

Вновь возьмём за основу компонент компонентом bitrix:menu. Скопируем шаблон .default этого компонента в шаблон нашего сайта под именем bottom.
Шаблон:

Сайдбар – наши офисы

Честно говоря без демо контента не понятно какую функцию оный сайдбар выполняет. Рискнём предположить, что всё-таки в нём показывается не картинка (уж больно несовременно), а полноценная карта Google. Наверное она маловата, чтобы располагать на ней элементы управления, так что она будет манималистичной.
Если же я не прав, то пожалуй один из самых простых способов реализации сайдбара – включаемая область, о которых мы уже говорили.
Возьмём компонент bitrix:map.google.view и скопируем шаблон .default в шаблон сайта, переименовав в sidebar-map.
Мы весь сайдбар сделаем частью компонента, включая заголовок. А значит, чтобы упростить работу редакторов необходимо вынести текст заголовка в параметры компонента.
Создадим в шаблоне компонента файл .parameters.php следующего содержания:

• RU (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/ru/.parameters.php):
• EN (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/en/.parameters.php):

Шаблон компонента в таком случае модифицируется совсем незначительно (поместим карту внутрь сайдбара и добавим заголовок):

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

Теперь пришла пора взяться за рабочую область!

Список членов команды

• Имя
• Фото (миниатюра)
• Должность
• Порядок относительно других членов команды

• Символьный код инфоблока – TEAM
• Символьный код свойства «Должность» — POSITION

Может показаться, что на этом этапе нам подойдёт компонент catalog.section с шаблоном board (этот шаблон генерирует таблицу с заданным количеством столбцов), однако в процессе эксплуатации такое решение весьма вероятно окажется сложнее. Поэтому мы всё же воспользуемся bitrix:news.list (скопировав шаблон .default в шаблон сайта под именем team-list) и допишем немного собственного кода.
Добавим в .parameters.php нашего шаблона новое значение:

Не забудем добавить значения в языковые файлы!

Помимо счётчика нам понадобится вывести значение нашего свойства «Должность», для которого мы задали код POSITION. В массиве с данными, которые отдаёт компонент это свойство хранится в $arResult[«ITEMS»][«PROPERTIES»][«POSITION»][«VALUE»], поскольку мы будем выводить свойство в перебираемом по ITEMS элементам, то это будет выглядеть:

Сам шаблон тогда будет выглядеть так:

Мы не стали заморачиваться с выносом кода свойства в параметры, а так же с настройкой количества элементов в строке, чтобы не усложнять шаблон компонента.
Как видите, в нём практически ничего не осталось от первоначального шаблона списка новостей (и он гораздо легче громоздкого компонента каталога).

Не забудьте удалить ненужную более папку /bitrix/templates/whitesquare-bootstrap/images/team/ с картинками в шаблоне после перевода блока с персонами на инфоблок!

Текст страницы ABOUT

Поскольку у нас нет понимания какие функции выполняют остальные элементы страницы, должна ли появляться случайная цитата или, скажем, должны ли картинки вести в фотогалерею, мы пойдём по простому пути.
Весь контент останется статичным, мы лишь добавим несколько стилей, чтобы будущие редакторы могли работать со страницей с большим удобством.
Для этого воспользуемся файлом стилей сайта, приложенном к нашему шаблону /bitrix/templates/whitesquare-bootstrap/styles.css (или административным разделом):
Поскольку этот файл используется для применения CSS к контенту в том числе в визуальном редакторе, нам придётся «забыть» о каскадности CSS и прописать стили без учёта вложенности элементов.
Например, цитата станет выглядеть так:

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

Или через инструмент редактирования шаблона (вкладка «стили сайта»):

Наводим марафет

С целью немного облегчить работу редакторов можно создать в шаблоне сайта папку /page_templates/, где будут находиться шаблоны страниц, которые можно создавать ан проекте по умолчанию.
Шаблон страницы представляет из себя обычный php файл, идентичный странице в публичной части.
Помимо шаблонов необходимо так же разместить файл .content.php с массивом всех возможных шаблонов страниц. В нашем случае это будет:

• /bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php
• /bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php

• Описание — description.php в корне шаблона
• Скриншот — screen.gif в корне шаблона

Вот собственно и всё!

Мы натянули готовую HTML вёрстку Bootstrap на 1С-Битрикс, сверстали страницу и получили полноценный шаблон!

Урок 3. Создание шаблона 1С Битрикс (Foundation)

403 Forbidden You don’t have permission to access / on this server

Отлично! Начнем свое повествование с ошибки )). Дело в том, что я сам растерялся получив эту ошибку, уже думал у меня перестало работать Веб-окружение Битрикс или порт заблокировался. Но оказалось все проще, мы просто в прошлом уроке удалили файл index.php из папки сайта, а сервер по умолчанию не дает просматривать содержимое папки и выдает ошибку доступа.
По этому чтобы больше не пугаться и не пугать вас проверим работу веб-сервера apache командой phpinfo() .
Для этого создадим в корневой папке нашего проекта файл index.php и заполним его простым содержанием.

Вот такой у нас будет файл. И теперь если выполнить открытие сайта через веб-окружение мы уведем информацию о настройках php.

Устройство шаблона Битрикс

Минимальный набор шаблона Битрикс

• description.php— файл описания шаблона. Это описание будет отображаться в административной части битрикс (в админки).
• styles.css — это стили которые будут использоваться при редактировании контента (нужен контент менеджеру, у нас будет пустым)
• template_styles.css — основной файл css-стилей шаблона (в нем будем создать собственные стили)
• header.php — файл содержит шапку шаблона
• footer.php — файл содержит подвал шаблона (в этих файлах мы будем редактировать шаблон)

Т.е. все что выше разделителя #WORK_AREA# попадает в header.php, а что ниже в файл footer.php. Вместо разделителя выводится контент сайта через какой-либо компонент, например news (новости).
Не очень понятная структура скажете вы. И я соглашусь. Например, в joomla примерно такое же устройство шаблона, как и в Bitrix, как бы это было не парадоксально. Но файл шаблона один, а вывод контента сделал через вызов специального компонента. Почему так не сделал Битрикс? Я думаю такое устройство шаблона эта дань традициям, ведь Битрикс поддерживает совместимость со всеми предыдущими своими редакциями. И в связи с этим они не могут поменять структуру шаблона, как основу проектирования сайтов.

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

<?
require($_SERVER[‘DOCUMENT_ROOT’].’/bitrix/header.php’);
$APPLICATION->SetTitle(«Главная»);
?>
<h1>Магазин Start Shop</h1>

Внедрение собственной верстки в шаблон Битрикс

Копирование исходников шаблона

Теперь нужно подключить добавленный шаблон в админки Битрикса. Авторизуемся если вы этого ещё не сделали добавив адресной строке к адресу сайта bitrix/ . Например так http:/localhost:6449/bitrix/. Затем нужно авторизоваться, перейти в раздел администрирования Настройки продукта — Сайты — Список сайтов. Выбрать единственный сайт и открыть его на изменение.

В открывшийся форме Параметры сайта выбрать наш единственный шаблон.

Нажать Сохранить.
Но наша страничка не изменится. Во-первых в индексной страничке нет никаких данных, а во-вторых пока что в файлах Битрикс шаблона header.php и footer.php у нас пусто. Заполнением их мы и займемся в первую очередь.

Верстка шаблона Битрикс

Зеленым квадратом выделены данные которые попадут в шапку (header.php), синим, то что попадет в подвал (footer.php) и желтым выделен контент, т.е. то что будет выводится компонентом Битрикс, который мы разместим в файле index.php. При навигации по сайту переходя в разделы шапка и подвал будут оставаться всегда одинаковыми, а контент меняться на вывод содержимого файла index.php того раздела в который вы перешли.
Чтобы открыть файлы, которые мы будем верстать я их специально оставил в шаблоне. Это два файла ecommerce-grid-x.html и product-page-grid-x.html. Вы можете их просто открыть двойным кликом мыши в браузере. Использоваться в работе шаблона они не будут, но мы будем из них брать верстку и помещать в файлы шаблона Битрикс. Ну и сравнивать результат.

<!doctype html>
<html lang=»en»>
<head>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title><?$APPLICATION->ShowTitle();?></title>
<?$APPLICATION->ShowHead();?>
<link rel=»icon» href=»<?=SITE_TEMPLATE_PATH?>/ico/favicon_bx.png»>

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/jquery.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/foundation.min.js’);
?>
</head>

• <title><?$APPLICATION->ShowTitle();?></title> — здесь мы определяем заголовок сайта, который задан в админки Битрикс.
• <?$APPLICATION->ShowHead();?> — выводим все необходимые объявления Битрикс в <head>. Это и стили Битрикс для административной панели, и подключения его скриптов и другие файлы о которых можно пока не задумываться.
• <link rel=»icon» href=»<?=SITE_TEMPLATE_PATH?>/ico/favicon_bx.png»> — здесь мы подключаем фавикон. SITE_TEMPLATE_PATH это ещё одна глобальная переменная которая будет подменена на путь к папке текущего шаблона.
• $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.’/css/foundation.css);— этой строкой мы подключаем стили.
• $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/foundation.min.js’);— а так мы подключаем скрипты JavaScript.

Ну а теперь вставим код меню, который в последствии мы заменим на вызов компонента Битрикс.
Код:

Вот такая панель появляется вверху если пользователь авторизовался, как администратор. Очень удобно и в дальнейшем мы её будем постоянно пользоваться.
.
На этом пока работу с head.php закончим и перейдем к foter.php. В подвал мы скопируем конец файла нашего исходного примера ecommerce-grid-x.html.
Код:

<div >
<div >
<div >
<h5>Vivamus Hendrerit Arcu Sed Erat Molestie</h5>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>
</div>
<div >
<ul >
<li><a href=»#»>One</a></li>
<li><a href=»#»>Two</a></li>
<li><a href=»#»>Three</a></li>
<li><a href=»#»>Four</a></li>
</ul>
</div>
</div>
</div>

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

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

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

И, вот, наступает этот ответственный момент — потеют ладони, учащается пульс, лоб покрывается холодной испариной, в голове роятся вопросы — как не ошибиться, «не уронить» сайт, «не пролететь мимо» техподдержки «1С-Битрикс»?

Всё вышеперечисленное (и многое другое) действительно мешает сосредоточиться на разработке. Как же не «наломать дров»? Давайте разбираться.

Сперва оговоримся, что речь в данной статье пойдет об изменении («кастомизации») именно шаблона компонента. То есть о преобразовании его визуального представления, а не об изменении логики его работы. «Кастомизацию» самого компонента (как простого, так и комплексного) мы опишем в одной из следующих статей, а сейчас мы обсудим изменение его внешнего вида. Тем более, что подобная задача встаёт перед разработчиками гораздо чаще. А решить её гораздо проще 🙂

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

• несколько видов меню,
• строка поиска,
• авторизация
• и много чего ещё.

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

Сперва несколько правил

Первое
Свой собственный кастомизированный шаблон сайта мы храним в папке /local/ в корне сайта. Если такой папки там нет — создаем и переносим туда наш шаблон сайта. Битрикс работает таким образом, что у папки /local/ всегда будет приоритет выше, чем у папки /bitrix/, таким образом если в /local/templates/ и /bitrix/templates/ будут лежать шаблоны с одинаковыми названиями будут выполняться шаблоны из /local/templates/. Подобный подход к работе — активное использование папки /local/ — позволяет нам отделить свой код от кода разработчиков «1С-Битрикс».

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

Третье
Ни под каким соусом мы не лезем в ядро «1С-Битрикс» ( особенно в папку /bitrix/modules/) — начинающему разработчику (а вы — начинающий разработчик, иначе зачем вы читаете эту статью?) нечего там делать.

Четвёртое
На всякий случай перед кастомизацией делаем бэкап — подробности ниже. Соблюдение всех этих правил позволит нам не «поломать сайт», не остаться без помощи техподдержки и, что очень важно, не потерять все свои разработки при обновлении версии «1С-Битрикс».

Начнём с начала − Бэкап

В режиме Администрирования идём:

Настройки → Инструменты → Резервное копирование → Создание резервной копии

Выбираем место хранения резервной копии. В облаке «1С-Битрикс» предпочтительней, если зарезервированной там памяти хватает для создании копии. Либо в папке сайта − при выборе этого варианта убедитесь, что на хостинге достаточно места для хранения резервной копии и функционирования сайта, иначе сайт просто «ляжет». Жмём кнопку «Создать резервную копию». После этого можно почти безбоязненно экспериментировать с сайтом, по крайней мере если у вас есть к нему доступ по ssh или ftp 🙂

Начинаем кастомизацию шаблона компонента

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

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

Но компонент к которому применен встроенный шаблон может выглядеть, например, так:

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

Вводим название для заголовка страницы, имени файла, снимаем галку «Добавить пункт меню» и жмём “Готово”:

Оказавшись на нашей тестовой странице, жмём «Изменить страницу» → «В визуальном редакторе»

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

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

Дважды жмём «Сохранить» и компонент отображается на нашей тестовой странице:

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

В режиме правки наводим указатель мышки на наш компонент, в появившемся меню жмём на треугольник рядом с шестерёнкой, затем «Меню (bitrix:menu)» → «Копировать шаблон компонента»:

Придумываем имя для шаблона компонента, выбираем место его хранения и жмём «Сохранить»:

Появится код шаблона компонента:

Как с ним работать? Тут каждый выбирает сам.

Можно, конечно, и данном окне, но это крайне неудобно.

Можно кликнуть на ссылку «Редактировать файл в панели управления» и работать оттуда − тоже так себе вариант.

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

Наконец, можно подключиться к серверу, на котором лежит сайт по ssh или ftp.

Я предпочитаю использовать среду разработки Visual Studio Code − это достаточно мощный и совершенно бесплатный инструмент. Его фишка (при установке соответствующего плагина) − возможность подключиться к серверу по ssh и работать с файлами сайта напрямую. Но тут каждый поступает, как ему удобнее. В любом случае, вот код шаблона компонента меню:

А вот верстка нашего меню:

Если при просмотре кода страницы возникли проблемы с обнаружением требуемого элемента верстки, то открываем html страницу в браузере и при помощи инструмента разработчика находим искомый элемент кода. Например, в браузере Google Chrome жмём кнопку на клавиатуре F12, потом кликаем на элемент, выделенный на скриншоте ниже красным, затем на меню. После этого нам остаётся найти этот же сегмент в коде:

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

Меню представляет собой таблицу заключёную в теги <ul></ul>, только в шаблоне <ul> имеет id, а вёрстке нет. Кроме того в вёрстке <ul></ul> обернуты тегами <div></div> с классом «nv_topnav».

Посмотрев на строки таблицы, ещё мы заметим, что в вёрстке, в отличие от шаблона меню, текст внутри тегов <a></a> обернут в <span></span>.

Заметим, что в вашем случае вёрстки отличия будут иными, но принцип останется тем же. Нам нужно лишь преобразовать код шаблона компонента в соответствии с нашей вёрсткой – убрать лишний id у <ul>, обернуть всю таблицу в <div>, добавить <span> в строки таблицы. В результате получим такой код:

Обратите внимание, на то, что в условии <?if ($arItem[«PERMISSION»] > «D»):?> мы удалили <?else:?>, т.к. в нашем примере отсутствует проверка на права доступа к элементам меню.

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

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

Затем в открывшемся окне выбираем режим редактирования исходного кода и копируем код вызова компонента:

Нам остаётся только заменить скопированным кодом компонента сегмент кода верстки отвечающем за меню.

Шаблон сайта в битриксе где хранится

Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.

Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте "1С-Битрикс". .

Евгений Смолин: Сам кувыркался с непонятками (пока курсы учебные не прочитал и руками не попробовал то, что там написано). Битрикс из тех систем, где изучение "методом тыка" не очень эффективно без предварительного изучения учебных курсов. Уважаемые новички, потратьте немного своего драгоценного времени, пройдите пару-тройку учебных курсов и масса вопросов просто испарится — там есть ответы на множество вопросов.

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

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

• Интерфейс программы — в главе Элементы управления курса Контент-менеджер.
• Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
• Информационные блоки — в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
• Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
• Работа с инструментами системы — в главе Работа с инструментами курса Администратор. Базовый.
• Модуль Поиск — в главе Поиск курса Администратор. Базовый.
• Вся информация по администрированию модулей размещена в курсах:
  — модули "1С-Битрикс: Управление сайтом" — модули "1С-Битрикс: Управление сайтом", связанные с коммерческой деятельностью в Интернете. — модули "1С-Битрикс: Корпоративный портал"

Как построен курс

Общепринятая градация квалификации разработчиков в рамках курса обозначает что:

• Junior сможет создавать простые сайты работая со штатными компонентами и модифицируя их шаблоны.
• Middle разработчик может работать с API Bitrix Framework.
• Senior умеет работать над производительностью и безопасностью сайтов, создавать свои модули и компоненты.

Начальные требования к подготовке

Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):

• основами PHP, баз данных;
• основами HTML, CSS.

У нас часто спрашивают, сколько нужно заплатить

Курс полностью бесплатен. Изучение курса, прохождение итоговых тестов и получение сертификатов — ничего из этого оплачивать не нужно.

Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.

Баллы опыта

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

уроке.

Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат — это если общее число набранных Вами баллов отличается от максимального на 1-2%.

Тесты

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

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

Комментарии к статьям

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

Что дальше?

Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:

Для преподавания офлайн

Если данный курс берётся в качестве основы для офлайнового преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).

Если нет интернета

Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox

iPhone:
FBReader
CoolReader
iBook
Bookmate

Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome

iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла — от 13.09.2022.