Шаблон 1 с битрикс. Готовые решения. Где два, там и три
Шаблон определяет расположение функциональных элементов, отображение страниц и художественный стиль. От него зависит общий внешний вид сайта.
Обычно для всех страниц используется одна схема, но 1С Битрикс позволяет одновременно пользоваться несколькими вариантами оформления .
При помощи встроенных инструментов можно задавать собственные шаблоны для всех разделов и даже страниц. Также можно задавать различные условия для вывода той или иной схемы. Настройки производятся через панель администратора.
Шаблоны страниц хранятся в одноименной папке «templates». В визуальном редакторе достаточно выбрать из списка необходимый вариант и дополнить его нужными данными. Особенность шаблонизации – отделение логики от представления.
Кому и зачем нужны шаблоны?Система Битрикс позволяет создавать и использовать предварительно заготовленные шаблоны, применяя их к рабочим областям.
Это практичное и эффективное решение при работе с многокомпонентными страницами со сложной структурой, например при работе с интернет-магазином или новостным порталом.
Преимущества правильно подобранного шаблона:
- Первое впечатление. Дизайн сайта дает понять, на чем специализируется компания и формировать благоприятное впечатление.
- Запоминаемость. Сайт ассоциируется с конкретной компанией и остается узнаваемым.
- Целостность. Шаблон должен быть прописан до мелочей, представляя собой гармоничную картину.
- Функциональность. Привлекательность сочетается с юзабилити и практичностью.
Структура шаблона 1С Битрикс представляет собой совокупность файлов и папок. В основной директории хранится описание и общая информация для административного раздела. Иногда там же приписываются некоторые дополнительные функции.
Рабочая область шаблона служит для размещения основного содержимого, а необходимость деления обусловлена структурой. Она обозначается как work_area и прописывается в форме редактирования, выступая в роли разделителя пространства.
Основные разделы сайта также представлены в виде соответствующих директорий. Основа шаблона 1С Битрикс – файлы header и footer. В них прописывается код, подключается вызов расширений, CSS и другие функции.
Динамическое содержимое включается в шаблон с директивами Битрикс Фреймворк. Здесь задаются PHP-вставки, вызывающие специальные компоненты Битрикс.
Сперва задаются заголовок, иконки, таблицы каскадных стилей, теги и другие базовые параметры. После этого необходимо определить месторасположение административной части. Все рабочие изображения лучше размещать в одной определенной папке.
Нумерованный список с меню заменяется вызовом компонента Битрикс для создания и редактирования пунктов. В виде компонентов создано и большинство других стандартных элементов.
Для размещения необходимого расширения на предварительно выбранное место страницы вставляется код его вызова. Изначально он находится в документации пользователя или во вкладке визуального редактора.
Еще один важный аспект – CSS-файлы шаблона. Изначально их три: основной и два вспомогательных для оформления содержимого. Но это разграничение очень условно, ведь все элементы тесно взаимосвязаны между собой.
Как установить шаблон?Установка готового шаблона производится по следующей схеме:
Заключительная часть – указание всех переменных Битрикс, которые прописываются в файле header. Важно не забывать редактировать пути в CSS и сохранять промежуточные результаты. После этого можно применить шаблон к сайту, выбрав его в соответствующем списке в настройках продукта.
ВыводыШаблоны 1С Битрикс достаточно практичны и функциональны. Их использование значительно упростит и ускорит разработку проекта. Можно приобрести готовые шаблоны на сайте компании.
В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников 🙂
Какие файлы нужны для создания шаблонаВнешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix , в которой есть папка templates и уже в ней список всех наших шаблонов.
Путь к шаблонам: /bitrix/templates/
Создать шаблон можно 3 способами:
Как вы поняли 3-ий вариант самый хардкорный 🙂 . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон
.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru
ID шаблона это по сути имя папки в которой он будет лежать, я назову development . Остальные поля заполните как удобнее, они сейчас не очень важны. В код шаблона добавьте следующий код:
#WORK_AREA#
—
пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
—
показываем текущий title для страницы;
—
показываем keywords, description и все скрипты;
—
показываем панель для админов.
После сохранения шаблона, мой файл description.php, выглядит так:
Отлично, у нас в корне должны остаться 5 файлов, остальное на данный момент мы не будем использовать:
- description.php,
- header.php,
- footer.php,
- styles.css,
- template_styles.css
Та часть кода, которая находится до #WORK_AREA# в итоге записывается в header.php. Угадайте, какая часть записывается в footer.php 🙂 (та, что после нее). Сама ворк-арея представляет собой динамический контент (не всегда он такой уж и динамический), который находится, к примеру, в папке /contacts/ или /about/ в файле index.php. Сам файл обычно начинается подключением хедера и заканчивается подключением футера:
Text хир
Пока что, все выглядит логично.
1С-Битрикс папки и структура нового шаблонаВ документации есть несколько рекомендаций, которые лично мне не очень нравятся. Во-первых, они любят называть папку с изображениями images вместо сокращенного img . И, я конечно все понимаю, но когда вы пишите стили, вам в любом случае нужно ссылаться на изображения, зачем писать в 2 раза больше? 🙂 . Во-вторых, была такая рекомендация, хранить включаемые области в папке include_areas — почему бы не создать inc ? В-третьих, зачем нам 2 файла со стилями? Если мне захочется вынести все в отдельный файл и подключать потом по необходимости, то эти стили будут хранится либо в шаблоне компонента, либо в папке css шаблона.
Если подытожить, наша правильная структура шаблона:
Include_areas images components js
Если быть немного бунтарем, то:
Inc img components js
Вас в принципе никто не ограничивает, это лишь рекомендации.
И вот мы плавно подошли к первой проблеме — хардкод . Хардкод это когда вы вместо динамических значений, например доменное имя, используете текстовую запись. Большинство начинающих разработчиков не знают про константу SITE_ TEMPLATE_ PATH, которая в качестве значения хранит путь к текущему шаблону — в нашем случае это /bitrix/templates/development (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать: