ПОДПИСКА на УРОКИ


Дополнительное видео

Создание HTML шаблона в 1С Битрикс

2 урок: Установка 1С Битрикс на ХОСТИНГ

1 урок: Регистрация ХОСТИНГА с настройкой под 1С Битрикс


Хостинг от Макхост

Варианты внедрения HTML шаблона в битрикс


  • Денис Горелов
  • 18.02.2017
  • Создание сайта
  • Урок: 3
  • Просмотров: 961

Урок, Варианты внедрения HTML шаблона в битрикс, это третье видео из серии уроков «Интеграция шаблона в систему 1С Битрикс». В данном видео речь пойдет о структуре сайта, файлов и папок. Разберем варианты интеграции таких шаблонов и выберем оптимальный вариант для себя.

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

Когда хотим внедрить шаблон на сайт, нам нужно визуально разделить сайт на три части. Где верхняя часть выделенная синим цветом является header.php, зеленая это рабочая область #WORK_AREA#, а красная часть дизайна это footer.php.

Структура шаблона сайта

Более подробно об это, как формируется страница, я рассказывал в видео уроке «Структура сайта».

Давайте посмотрим нашу html верстку шаблона сайта. 

Ссылка на скачивания - архив с шаблоном

Вы можете скачать архив и на практике, повторяя за мной, натянуть шаблон на 1С битрикс.

Открываем index.html и через фаербаг посмотрим структуру данной странички.

Сайт состоит из одной страницы и в данном случае реализовать установку шаблона можно несколькими способами:

1.    В рабочую область, нечего не помещать, распределяем блоки между footer.php и header.php.

Первый вариант внедрения шаблона

2.    Мы убираем весь код в header.php до секции section id="home-page" (блок счетчик), остальное до тега footer class="footer" помещаем в рабочую область, оставшийся код в footer.php.

Второй метод внедрения HTML шаблона

3.    Другой вариант, поместить в рабочую область только блок «Характеристика», код выше характеристики в header, а ниже характеристики в footer.

Третий вариант интеграции Html шаблона

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

Для удобства администрирования желательно все блоки распределить не в рабочей области #WORK_AREA#, а поместить их в header, а в footer поместить подвал сайта. 

Давайте разделим верстку для нашей интеграции шаблона. Как видите все рабочие блоки, мы включили в header, а нижнею часть в сам footer.

Как будем внедрять вверстку на сайт

Управление шаблонами, структура шаблона

Управление шаблонами в Битрикс осуществляется в административном разделе.

Перейдем в раздел администратора, далее выбираем >> Настройки продукта >> Сайты >> открываем Шаблоны сайтов. Тут видим один пустой шаблон, который устанавливали из Маркеплейса, открываем его.

Шаблоны на сайте битрикс

В верхней части видим ID сайта, который является важным параметром в шаблоне, название, описание.  Ниже размещен сам код, в котором содержится верхняя часть сайта header, и нижняя часть шаблона footer разделенная маркером #WORK_AREA#.

Разделения на области интеграции шаблона

Редактировать шаблон можно напрямую тут, но удобнее всего работать через FTP в своем редакторе.

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

Стили в шаблоне

Откроем наш редактор PhpStorm и в нем директорию, в которой лежит шаблон сайта. Для этого переходим в папку bitrix >> templates, и текущий шаблон, рассмотрим подробнее присутствующие файлы.

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

Файлы и из значение при интеграции шаблона в битрикс

Имеется файл description.php где содержится описание текущего шаблона. Файл template_styles.css в нем хранятся стили шаблона. Файл styles.css тут располагаются стили контента.

Файл description.php

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

На этом вводный урок по "Вариантам внедрения HTML шаблона в битрикс" заканчиваю, в следующем видео внедрим верстку на сайт.

Оставить комментарий:

Отзывы

Отзывов нет.

Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.