154  /  396

Шаблон сайта (создание папки шаблона)

Просмотров: 346 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

Создание шаблона – первый шаг в интеграции дизайна.

Примечание: Ранее можно было задавать внешний вид шаблона сайта с помощью визуального редактора. С версии 14.0 работа выполняется без визуального редактора.

Рассмотрим подробнее на примере, как это сделать.

Добавление кода шаблона / создание папки шаблона

  • Откроем исходный код страницы index.html, выделим весь код и скопируем его в буфер обмена.
  • На сайте перейдём в раздел Настройки > Настройки продукта > Сайты > Шаблоны сайтов. Кликнем по кнопке Добавить шаблон, и в Рабочей области откроется форма Шаблоны сайтов.
  • Выполним команду Добавить шаблон на Контекстной панели. В открывшейся форме создания нового шаблона укажем идентификатор шаблона Можно использовать латинские буквы и цифры. и остальные параметры (описание понятно интуитивно).
  • Вставим скопированный код в поле Внешний вид шаблона сайта.
  • Теперь нужно определить шапку сайта (header) и подвал (footer) - это те области, которые будут неизменны на каждой странице сайта.

    В нашем примере шапка сайта будет содержать основную заставку с названием сайта и навигацию по странице (верхнее горизонтальное меню, кнопки РЫБЫ.НЕТ и Узнать больше) - т.е. заканчиваться на теге </header>. Подвал сайта будет содержать только копирайт, т.е. начинаться с блока <!-- Footer -->.

    Выделим и удалим весь код между шапкой (header) и подвалом сайта (footer).

    Таким образом, мы удалили весь код (контент сайта) между тегом </header> и блоком <!-- Footer -->. Вместо удаленного кода пропишем #WORK_AREA#:

  • Теперь нужно заполнить вкладки Стили сайта Стили, используемые при оформлении контента страниц (стили сайта), хранятся
    в файле styles.css.

    и Стили шаблона. Стили, используемые в шаблоне дизайна, хранятся в файле template_styles.css. Это - основной
    CSS-файл шаблона.

    Скопируйте туда содержимое файлов styles.css и creative.css (если же эти вкладки оставить пустыми, то придется дополнительно подключать файлы в шапке сайта).
  • Сохраним изменения.

После выполнения вышеперечисленных действий будет создана папка этого шаблона, включающая отдельные файлы шапки сайта (header.php), подвала сайта (footer.php) и файлы с автоматически подключаемыми скриптами и стилями (Контент > Структура сайта > Файлы и папки > bitrix > templates):

Нажмите на рисунок, чтобы увеличить

Загрузка файлов шаблона

  • Загрузите Например, по протоколу FTP. Или же можно создать папки вручную и загрузить в них содержимое. в папку созданного шаблона следующие папки из архива (стили шаблона, картинки и js-файлы):

    • css
    • img
    • js
    • vendor

Новый шаблон создан (точнее, создана папка этого шаблона со всем необходимым содержимым). Теперь нужно отредактировать шапку и подвал сайта (файлы header.php и footer.php), а также настроить их подключение. Об этом читайте в следующем уроке. В папке шаблона откроем файл header.php в режиме редактирования как PHP.

Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра).

Подробнее...

Примечание: вместо папки bitrix можно использовать папку local (подробнее в уроке Чтобы сделать жизнь разработчиков проектов удобнее, в рамках работ по новому ядру D7 с версии главного модуля 14.0.1 основные файлы проекта вынесены из папки /bitrix в папку /local. Это позволит изолировать изменяющиеся файлы проекта от папки продукта. По сути, в исключения достаточно будет добавить одну папку /bitrix.

Подробнее...
).



0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии