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

 

 

project

 

Мы установили систему, теперь перейдем непосредственно к созданию шаблона.

 

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

 

Давайте приступим…

Зайдем в админпанель (http://ваше_доменное_имя/bitrix/admin), пройдем авторизацию (вводим логин и пароль администратора которое вы указывали при установки), выбираем вкладку «Настройки» на панели слева, далее раскрываем: «Настройка продуктов» -> «Сайты»  -> «Шаблоны сайтов». Жмем «Добавить шаблон», заполняем ID нашего будущего шаблона, название и его описание. Имейте ввиду, что название и описание шаблона относиться только к административной панели, это сделано для вас, а не для посетителей, в публичной части сайта это не видно.

 

Далее идет важный этап, вы должны решить, как разделить ваш html+css шаблон на верхнею (header) и нижнею часть (footer). Шаблон в 1С-Битрикс состоит из двух базовых частей: верхней части и нижней, боковых частей как в других CMS тут нет.

Итак, открываем ваш шаблон-заготовок, как пример будем рассматривать данный:

 

templeate_html_small

 

 

В верхнею часть, в любом случае попадает шапка сайта, далее за вами стоит выбор. К чему отнести левую и правую колонку шаблона прототипа, в официальной документации как пример дают такой вариант реализации:

 

bitrix_templates

 

 

Мы пойдем тем же путем и разделим наш шаблон так-же:

 

templeate_html_share_small

 

Цветами я обозначил, каким образом мы будем делить html+css шаблон. Далее откроем файл шаблона — index.html в любой текстовом редакторе (как пример Notepad++), скопируем html код, который относиться к верхней части нашего будущего шаблона (оранжево-красноватый) и вставим его в поле ввода на закладке «Шаблон».

 

panel_admin_html_small

 

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

Далее, скопируем html код нижней части нашего шаблона прототипа (зеленый цвет) и вставим в тоже поле ввода, но после «#WORK_AREA#» , далее жмем «Сохранить».

 

Теперь, надо добавить стили к нашему шаблону. Посмотрите html код шаблона-прототипа, в теге <head> должен подключаться файл стилей (.css).

 

templeate_style

 

В моем случае это файл style.css, откроем и скопируем его содержимое и вставим в поле ввода на закладке «Стили шаблона».

 

templeate_style_panel_admin

 

Осталось перенести изображения в будущий шаблон. В html+css шаблоне изображения обычно хранятся в директории с именем images или image. Создайте в www\bitrix\templates\имя_вашего_шаблона папку «images» и скопируйте в неё изображения вашего шаблона.

 

templeate_bad

 

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

Если говорить точнее, мы используем наш шаблонный <header> заголовок, а в нем подключается «старый файл css» которого не существует, да в добавок еще и  пути до любых подключаемых файлов уже не верные, т.к. положение файлов относительно формирующейся html страницы в CMS уже другое. Поэтому, нам надо использовать «битриксовый» заголовок, т.е. содержимое тега <head>, где подключиться стиль шаблона и все остальные файлы необходимые для работы 1С-Битрикс.

Подключим его, для этого переходим на вкладку «Шаблон», удаляем содержимое тега «head» и вставляем следующий код:

 

 

Получим что-то вроде этого:

 

templeate_blank

 

 

Изображения, которые вызываются не в файле стилей, а в html коде шаблона непосредственно будут отсутствовать, мы с ними разберемся потом с помощью компонент.

 

P.S. Если в теге <head> вашего шаблона-прототипа, помимо файла стилей подключались еще и JavaScript скрипты (.js), то их надо подключить и в наш новый шаблон, дабы не потерять функциональность, который заложил изначально верстальщик. Создайте в директории вашего шаблона (www\bitrix\templates\имя_вашего_шаблона) папку «js» и скопируйте туда скрипты, далее вставьте в любое место шаблона следующий код:

 

 

И так для каждого файла js.

 

Можно также подключить скрипт и с удаленной машины, например подключим фреймворк JQuery

 

 

Данные команды ничего не выводят, они лишь дают знать CMS, о наличие скриптов, которые нужно подключить в  <head> при использование метода:

 

 

Если посмотрите html код, то в заголовке вы увидите, что система подключит ваши скрипты через один файл, примерно таким образом:

 

 

Так 1С-Битрикс шифрует имя и положение файла в своей файловой системе.

 

В том случае, если вы хотите подключить к проекту дополнительные файлы стилей (.css), используйте метод $APPLICATION->SetAdditionalCSS(‘/bitrix/templates/имя_вашей_темы/имя_файла.css’), размещать его опять же можно, в любом месте шаблона. Но я рекомендую, получая первый опыт работы с системой на распылять SetAdditionalCSS и AddHeadScript по всему шаблону, это затруднит отладку, если что-то пойдет не так. Поместите лучше вызовы данных методов перед $APPLICATION->ShowHead().

 

Также хочу заметить, что подключаться ваши файлы будут не в последовательности вызова AddHeadScript и SetAdditionalCSS, а в заданной системой:

 

  1. первыми подключаться css файлы, т.е. заданные через метод SetAdditionalCSS,
  2. далее скрипты, заданные через метод AddHeadScript

 

Теперь надо добавить тег <title> и заменить стандартный вывод метатегов keywords и description на свой, т.к. по умолчанию CMS 1С-Битрикс выводит следующее:

<meta name=»keywords» content=»1С-Битрикс, CMS, PHP, bitrix, система управления контентом» />

<meta name=»description» content=»1С-Битрикс: Управление сайтом» />

 

Сначала добавим вывод <title>, для этого в теге <head> поместим следующий код:

 

 

Теперь разберемся как заполнить title, keywords и description. Раскрываем в админпанели «Настройки продукта» -> «Настройка модулей» -> «Управление структурой», смотрим:

 

templeate_panel_meta

 

 

В красной рамке обозначено как метатеги обозначаются в системе, запомним это. Далее переходим в «Структура сайта» -> «Моя компания», жмем «Дополнительно» выбираем «Свойства папки». Прописываем ключи (keywords) и описание (description) вашего сайта:

 

templeate_panel_meta2

 

 

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

 

 

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

 

И напоследок первого пункта, мы подключим панель администратора, которая будет отображаться в верхней части сайта, когда вы авторизуетесь на сайте как администратор. Вставим после тега <body> следующий код:

 

 

В результате вы увидите панель администратора в вашем шаблоне:

 

templeate_top_panel_admin

 

 

Сразу же рекомендую отключить кэширование на этапе разработки, нам оно будет только мешать, нажмите на стрелку вниз под «Сбросить Кеш» и далее «не использовать кэш».

 

Следующий этап «выбор компонентов для шаблона»

 




Буду признателен если вы поделитесь данным постом

Комментарии
  1. Зоя пишет:

    Добрый день! Как можно добавить к установленному Битрикс Демо( в моем случае требуется СТАРТ) шаблон сайта, подготовленный тоже в СТАРТ Демо. Шаблон не из сайта Битрикс. С уважением, Зоя

  2. admin пишет:

    Добрый день Зоя, я думаю ваш случай описан в статье

  3. Web Hosting пишет:

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



Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены