Меню Рубрики

Установка bootstrap на битрикс

Как создать адаптивный шаблон и сниппеты на Bootstrap 3 для 1С-Битрикс

Афанасьев Евгений

Всем привет!
Решил затронуть тему адаптивной верстки.
Итак на дворе конец 2016 и более 20% посетителей вашего сайта заходят на него со смартфона. В южных регионах России этот показатель может быть более 40%, что очень большая доля и ее нельзя игнорировать. Ваш сайт должен нормально отображаться на любом устройстве вашего посетителя с которого он зашел на него.

Но как сделать адаптивную верстку?
Можно заказать ее у фрилансера/компании подрядчика, которые сделают это за 10-100 тысяч рублей в зависимости от типа вашего сайта. А можно сделать его самому или переделать существующий сайт в адаптивный. Как? Дальше я расскажу, как это сделать для системы управления сайтом 1С-Битиркс.

1: Подготавливаем Bootstrap элементы

Для подготовки нам понадобится сайт Bootstrap 3 или Bootstrap 4 если вас не смущает его альфа версия. На этом сайте мы будем создавать сборку bootstrap под себя и уже в дальнейшем будем использовать ее как базовый набор стилей для нашего сайта.
Также нам понадобится отличный сайт Layoutit с помощью которого мы будем делать прототип нашего сайта и уже на основе этого прототипа с созданной сборкой bootstrap создадим наш адаптивный шаблон.

1.1 Сборка bootstrap
Итак первым делом настраиваем сборку bootstrap под себя. Для этого идем на RU сайт или EN сайт
Я беру все компоненты css и JavaScript.
При кастомизации CSS настраиваем как минимум следующие блоки:

  1. Colors — 4 базовых цвета вашего сайта. Обычно это какие то корпоративные цвета кроме черного и белого.
  2. Scaffolding — Цвет фона и цвет ссылок и текста.
  3. Typography — Шрифты, которые будут использоваться на вашем сайте. После выхода шрифта Google Noto я использую только его. Можем прописать любые другие шрифты, напрмер open sans.

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

В папке css есть как полные так и минимизированные версии файлов стилей нашей сборки bootstrap.

В папке js файл с javascript компонентами и его минимизированная копия.

В папке fonts находятся файлы шрифта glyphicons для создания иконок с помощью написания их кода. Подробнее о них по ссылке .

1.2 Блоки bootstrap и верстка прототипа сайта

Теперь нам нужен прототип дизайнаи функциональные блоки для нашего сайта. Заходим на сайт http://www.layoutit.com/build и переносим из левого меню сайта нужные на нашем сайте блоки в правую часть. Это делается с помощью перетаскивания, при этом появляются подсказки и вы можете настроить эти блоки.

Я обычно переношу следующие обязательные блоки:

Обязательный элемент настройки.
Выносим блоки:

  • 12
  • 6-6
  • 8-4
  • 4-4-4
  • 3-3-3-3 (вписываем в пустое поле)

Base CSS

  1. Title
  2. Paragraph
  3. Address
  4. Blockquote
  5. Unordered List
  6. Ordered List
  7. Description
  8. Table
  9. Form
  10. Horizontal Form
  11. Button
  12. Anchor Button
  13. Image

Components

  1. Breadcrumb
  2. Pagination
  3. Jumbotron
  4. Text
  5. Thumbnails
  6. Media Object

JavaScript

  1. Navbar
  2. Tabs
  3. Alerts
  4. Collapse
  5. Carousel

Посте того, как вы перенесли и настроили все блоки, скачиваем наш прототип.

В архиве у нас некастомизированный bootstrap 3 и файл index.html с блоками нашего прототипа.

В итоге у нас скачан архив с готовыми стилями bootstrap и прототип шаблона. Теперь переходим к этапу 2.

2: Создаем базовый адаптивный шаблон для 1С-Битрикс

Теперь переходим к созданию адаптивного шаблона для сайта под управлением 1С-Битрикс.
Для этого заходим на наш сервер в SFTP или FTP и переходим в папку «/bitrix/tempates/»
В ней создаем 4 пустых файла:

  • footer.php
  • header.php
  • description.php
  • styles.css
  • template_styles.css

В файле header.php прописываем подключение пролога и языковых файлов:

Из папки с подготовленными ранее стилями bootstrap копируем папки fonts и js.

Содержимое файлов стилей копируем:

bootstrap.css в style.css
bootstrap-theme.css в template_styles.css

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

В файле description.php прописываем название шаблона, чтобы его можно было выбрать в панели управления сайтом.

Далее переходим к переносу прототипа. Идем в папку с архивом прототипа и разархивируем ее.
Идем в папку «/layoutit/src/js/» и копируем файл jquery.min.js в наш адаптивный шаблон в папку js.
Далее идем в папку «/layoutit/src/» и открываем файл index.html на редактирование.

Копируем в файл header.php следующее содержимое файла index.html

Потом добавляем «гамбургер» кнопку, которая появляется только на смартфонах. При нажатии на нее у нас на смартфоне появится меню.

Дальше у нас идет логотип

Да логотип нужно перед этим зачать в созданную папку /public_html/bitrix/templates/bootstrap/images/

Переменная содержит путь до корня сайта
Переменная содержит путь до шаблона в котором вызвана. В нашем случае это /bitrix/templates/bootstrap/

Подключаем файл header_logo.php в файле header.php в помощью компонента bitrix:main.include

Дальше у нас идет меню. Меню на разных устройствах может быть как развернутое, так и свернутое в «гамбургер». За то, что будет в свернутом блоке отвечает следующий div

Это стандартное горизонтальное меню с уровнем вложенности 2. То есть при нажатии на пункт меню низ выпадет список. Выглядит это изначально вот так.


Теперь мы копируем стиль компонента bitrix:menu и в него добавляем верстку из нашего прототипа index.html

Так как и в прототипе и в компоненте bitrix:menu используется ненумерованный список, то вы просто дописываем классы из прототипа вместо существующих

Его можно установить добавив в меню новый пункт с текстом divider

2.1.4 Телефон и другие элементы в header

Отдельно в div меню collapse navbar-collapse добавляем телефон. Делается это с помощью следующего кода кода

Так как меню у нас всегда приклеено к верхней части окна браузера, то часть элементов страницы расположенных ниже него будет перекрываться меню. Для предотвращения этого я использую div с вертикальным отступом margin-top. Размер отступа в пикселях ставим в зависимости от высоты блока с меню.

Тут все просто.
Устанавливаем код компонента хлебные крошки bitrix:breadcrumb в отдельный div из grid таблицы:

Если вы заметили у меня все блоки добавляются в отдельные div container а уже в нем в col-md-12. Это сделано, чтобы на смартфоне, данный блок правильно адаптировался под содержимое страницы. Все блоки в дальнейшем будут вставляться в отдельные div.
Теперь в браузере в режиме правки создаем копию стилей для данного компонента и копируем их в наш шаблон.

Правим код компонента на основе кода прототипа с сайта Layoutit

Следующий обязательный элемент на странице, заголовок H1. Тут все просто вставляем его в grid блок col-md-12

На этом с файлом header.php закончили. Переходим к файлу footer.php

В footer.php у нас обычно следующие блоки:

  • Адрес
  • Ссылки на важные разделы сайта
  • Соцсети или панель соцзакладок
  • Копирайты
  • Счетчики

Grid сетка выглядит так:

Блок адрес, счетчик, соцсети, ссылки выглядит так:

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

3: Верстка страниц в редакторе и сниппеты

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

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

Спиппеты находятся в папке /public_html/bitrix/templates/bootstrap/snippets

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

При редактировании новой страницы редактор выглядит так:

Мы будем создавать следующие типы сниппетов:

  • Grid сниппеты
  • Сниппеты оформления

Создадим первый grid сниппет col-md-12


Укажем категорию для сниппета.


Код сниппетра «Блок 12» из прототипа с сайта LayoutIt:

По этому же принципу делаем сниппеты для блоков:

  • 6-6
  • 8-4
  • 4-8
  • 4-4-4
  • 3-3-3-3

Это все распространенные блоки в gr >Также нам необходимы grid блоки с установленными в них стилями и другими элементами:

  • grid не фиксированные по ширине
  • grid с заголовками h2-h4
  • grid с картинкой
  • grid с кнопками

grid не фиксированные по ширине

Благодаря этому у нас появляются блоки необходимые для верстки страниц в редакторе.
Кроме того нам необходимы функциональные блоки:

  • Цитата
  • Табы
  • Алерт (выделенный блок определенного цвета
  • Спойлер

Эти блоки мы также переносим с сайта LayoutIt в наши спойлеры.
В итоге у нас есть все для верстки страницы.
Как работать с снипетами редактору и копирайтеру.

Вот я на видео показываю, как с этим может работать копирайтер или редактор вашего сайта. Это позволит при должном опыте делать 4-6 лендингов в день!

Вот как это выглядит на сайте в компьютера.

Вот как выглядит со смартфона.

В итоге у нас есть адаптивный шаблон Bootstrap для сайта на 1С-Битрикс и набор сниппетов для работы копирайтера и редактора с таким сайтом.
Ссылки на скачивание шаблона сайта с Bootstrap 3 для 1С-Битрикс и скачивание отдельно сниппетов для 1С-Битрикс.

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

источник

Создаём шаблон 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, изображения, шрифты) из шаблона страницы:



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

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

Если смотреть на шаблон через административный раздел 1С-Битрикс (), то мы увидим шаблон целиком, header.php будет отделён от footer.php с помощью тега #WORK_AREA#.

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

Таким образом мы можем распределить код index.html из исходного статического шаблона по трём файлам:

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

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

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

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

  • Добавляем панель инструментов 1С-Битрикс сразу после открытия тега —

Фактически мы создали статичный 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 не меняется каждый день!

Все эти области будут выводиться на всём сайте, поэтому создадим в шаблоне новую папку include, где будем складывать файлы включаемых областей:

  • /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: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):

Шаблон компонента в таком случае модифицируется совсем незначительно (поместим карту внутрь сайдбара и добавим заголовок):
‘; $APPLICATION->IncludeComponent(‘bitrix:map.google.system’, ‘.default’, $arTransParams, false, array(‘HIDE_ICONS’ => ‘Y’)); ?>

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

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

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

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

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

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

  • Символьный код инфоблока – 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С-Битрикс, сверстали страницу и получили полноценный шаблон!

источник

Читайте также:  Установка webasto на scenic

Добавить комментарий

Adblock
detector