Как сделать страницу в 1с битрикс
Добавил пользователь Владимир З. Обновлено: 04.10.2024
Создаем шаблон сайта в настройках
ID – идентификатор шаблона (а также название папки шаблона), используем латинские буквы/цифры. Пусть будет alfavitka
Название – как хотим, так и называем, например, Учебный шаблон
Описание – необязательное поле, заполняем по желанию. Я введу Создаем шаблон с нуля
Порядок – порядок отображения шаблона в списке шаблонов (можно не заполнять)
Обязательные поля мы заполнили, сохраняем шаблон:
Отлично, он появился в списке шаблонов:
Теперь зайдем в настройки сайта и установим наш (пока еще пустой) шаблон. Настройки => Настройки продукта => Сайты => Список сайтов => Кликаем на ID сайта, чтобы перейти к его настройкам:
Обратите внимание, что также пропала панель администратора, которая раньше отображалась в самом верху страницы. Так и должно быть, мы вернем ее чуть позже.
Знакомимся со структурой шаблона
Давайте посмотрим, из чего состоит созданный нами шаблон. Для этого по FTP перейдем в папку шаблона. В Битриксе шаблоны сайта лежат в папке /bitrix/templates/ , если мы зайдем туда – увидим следующий набор папок:
Это три шаблона, которые сейчас есть у нас на сайте.
.default – папка шаблона сайта по-умолчанию: он подключается, если нет никаких других шаблонов (именно он использовался Битриксом до тех пор, пока мы не создали и не выбрали в настройках наш собственный шаблон).
landing24 – папка стандартного шаблона, который используется для создания лэндингов в рамках Битрикса (этот функционал в рамках данного курса мы рассматривать не будем).
alfavitka – это папка нашего шаблона (совпадает с ID шаблона, который мы указали при его создании).
Зайдем в папку нашего шаблона и видим следующий набор файлов:
Быстренько разберемся, для чего нужен каждый из этих файлов.
.styles.php – файл для описания стилей, которые используются в визуальном редакторе Битрикса (с ним мы разберемся в следующих уроках).
description.php – здесь хранится текстовое название шаблона, описание и другая информация:
footer.php – содержит код подвала сайта.
header.php – содержит код шапки сайта.
Сейчас эти файлы пустые, потому что на этапе создания шаблона мы не внесли в них никакой код.
styles.css – содержит стили сайта (с этим файлом мы разберемся в следующих уроках).
template_styles.css – содержит стили шаблона сайта.
Эти файлы также пустые, т.к. при создании шаблона их мы не заполняли.
Вставляем HTML в шаблон и на главную страницу
Для начала нужно мысленно разбить нашу верстку на 2 части: на шапку и подвал. Открываем файл с версткой index.html и ищем контент (ту часть верстки, которая будет уникальная для каждой страницы сайта). В нашем случае контент выглядит следующим образом:
Всё, что выше контента – вставляем в файл шаблона header.php, весь код под контентом – в файл footer.php
Заголовок h1 тоже можно отнести к контенту, но т.к. этот тег у нас будет на каждой странице сайта – вынесем его в шапку.
Главная страница нашего сайта немного изменилась:
Т.к. в нашей верстке есть контент для главной страницы – давайте вставим его на главную страницу нашего сайта. Через FTP-менеджер идем в корень сайта и открываем файл index.php, видим следующее содержимое:
Очень грубо говоря: в первых четырех строчках подключается шапка сайта (и ядро битрикса) и устанавливается заголовок страницы. Последняя строчка подключает подвал сайта (и кое-какие служебные скрипты).
Между этими строчками и содержится контент страницы. Давайте заменим его на контент из верстки, получим следующее:
Главная страница сайта стала еще чуть более информативной:
Подключаем стили и скрипты
Верстку мы добавили, теперь подключим стили и скрипты. В нашем HTML шаблоне есть папка css-js, которая содержит файлы CSS-стилей и JS-скриптов. Давайте загрузим ее в папку Битрикс шаблона /bitrix/templates/alfavitka :
В header.php у нас есть 2 файла со стилями:
Файл bootstrap.min.css – это файл-библиотека, который в будущем мы точно не будем редактировать. Поэтому подключаем его как дополнительный файл стилей. Для подключения дополнительных файлов со стилями в Битриксе используется следующий код:
В нашем случае код будет иметь следующий вид:
Константа SITE_TEMPLATE_PATH в Битриксе содержит путь к папке текущего шаблона сайта. Поэтому всегда используем данную константу при подключении стилей/скриптов из папки шаблона.
Секция head в нашем шаблоне теперь выглядит следующим образом:
Теперь разберемся со вторым подключаемым файлом стилей styles.css – он содержит стили шаблона, которые мы в перспективе точно будем редактировать. Поэтому стили из этого файла мы вставляем в файл шаблона template_styles.css. Сам файл styles.css из папки css-js можем удалить. Также удаляем подключение этого файла из секции head, в итоге она выглядит следующим образом:
Отлично, мы передали Битриксу информацию о всех наших стилях, осталось вывести их в шаблоне. Для этого воспользуемся следующим кодом:
Этот код выводит не только все подключенные CSS-стили, но и JS-скрипты, а также мета-теги Content-Type, robots, keywords, description. Вставляем этот код в самый конец секции head, в итоге она выглядит следующим образом:
Обратите внимание, что мы нигде не подключали файл стилей шаблона template_styles.css, т.к. этот файл автоматически подключается Битриксом.
С подключением стилей мы разобрались, наш шаблон приобретает более-менее приемлемый вид:
Теперь давайте подключим JS-скрипты. В файле footer.php у нас есть две строчки со скриптами:
Как и в случае со стилями, для подключения JS-скриптов в Битриксе есть своя функция:
В нашем случае подключение скриптов будет выглядеть следующим образом:
Также давайте перенесем подключение скриптов из подвала в шапку.
Обычно JS-скрипты переносят в подвал сайта, чтобы они не замедляли скорость загрузки сайта. Как в Битриксе перенести подключение скриптов в конец сайта – разберемся в одном из следующих уроков.
В итоге секция head будет выглядеть следующим образом:
Прописываем актуальные пути к картинкам
Сейчас у нас на сайте есть две картинки, которые не отображаются. Во-первых, нам нужно загрузить их на хостинг: из локального HTML шаблона загружаем папку images в папку шаблона на нашем хостинге:
Теперь, чтобы картинки отобразились у нас на сайте, в атрибуте src каждому тегу img нужно указать актуальный путь к файлу изображения. Обе картинки теперь лежат в папке images внутри папки шаблона. Как вы уже догадались, здесь нам опять поможет константа SITE_TEMPLATE_PATH. Код подключения логотипа теперь выглядит так:
Аналогично используем SITE_TEMPLATE_PATH для получения пути картинки в контенте на главной странице (файл index.php в корне сайта):
Во втором случае не очень уместно подключать картинку из папки шаблона, т.к. изображение относится к контенту конкретной страницы => оно не должно быть привязано к какому-либо шаблону (ведь в будущем у сайта может поменяться шаблон, а значит, что это изображение может оказаться недоступным). Но пока оставим всё как есть, а в следующих уроках разберем правильный вариант добавления картинки в контент страницы.
В итоге наша главная страница выглядит следующим образом:
Выводим панель администратора
Напоследок давайте выведем панель администратора в самое начало страницы. Для вывода панели администратора в Битриксе используется следующий код:
Разместим этот код в header.php сразу после открывающего тега body:
При желании, панель администратора можно вывести и в подвале сайта (перед закрывающим тегом body). Это может помочь в том случае, если в шаблоне сайта используется абсолютное/фиксированное позиционирование элементов и верстка шаблона из-за этого конфликтует с панелью администратора.
Панель администратора отобразилась:
Читайте также: