Remontnouta.ru

ПК Ремонт техники
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Иной взгляд на файлы template_, и в 1С-Битрикс

Иной взгляд на файлы template_, kernel_main.js и kernel_main.css в 1С-Битрикс

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

Первое, что они пытаются сделать это удалить эти файлы. Мол удалю его и все будет отлично. И такие способы действительно можно найти. Но эти попытки похожи на гонку за призраком, ведь файлов template_ и kernel_main по сути нет – это автоматически генерируемые файлы. Поэтому просто их удалить как физический файл не получиться, поэтому для достижения поставленной цели придумывают разного рода костыли.

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

Интегрируем шаблон сайтана битрикс

Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, header.php и footer.php и остальные нужные проекту файлы Путь будет такой /local/templates/main/ Папку с шаблоном назовем «main» Работать будем с папкой local, а bitrix трогать вообще не будем. Разделим верстку страницы в битрикс на три части.

  • Первую положим в header.php
  • Вторую положим в index.php
  • Третью положим в footer.php

Файлы header.php и footer.php будут подключаться на каждой странице сайта, а index.php будет у каждой странице свой.

Создаем шаблон через административный раздел

Мы не будем использовать текущий установленный шаблон из маркеплейса, а создадим свой с нуля на примере того что есть сейчас. Для этого перейдем в административную часть сайта, Настройки, Настройки продуктов, выбираем Шаблоны сайтов. Добавляем новый шаблон.

Добавление шаблона

Задаем основные настройки шаблона, ID пропишем «lendtv» , в поле название «Лендинг», в описании прописываем «Наш шаблон лендинга», порядок указываем «1», Тип оставляем по умолчанию «Шаблон сайта». Спускаемся ниже.

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

Открываем нашу страницу верстки HTML шаблона в редакторе, выделяем код, копируем и вставляем в нашу форму. Мы с Вами условились, что все рабочие блоки отнесем в header . Для этого спускаемся до закрытия секции </section><!— /#contact-page —> . Ставим курсор между section и footer , жмем #WORK_AREA# , добавился маркер.

Вставляем код в шаблон

При помощи вставки данного маркера система Битрикс создаст автоматически файлы header.php и footer.php с размещенным в них нашим кодом. Вкладку «Стили сайта» оставляем пустой, в «Стили шаблона» копируем наш основной код стилей из файла style.css, и сохраняемся.

Вставляем стили в шаблон

Далее все работы будем проводить через FTP.

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

Читайте так же:
Вацап вайбер и другие

Пропишем код проверки

Для примера откроем наш установленный шаблон из маркеплейса и скопируем код для проверки константы «B_PROLOG_INCLUDED» , эта константа запрещает запуск данного файла без подключения ядра Битрикс.

if(!defined(‘B_PROLOG_INCLUDED’) || B_PROLOG_INCLUDED !== true) die(); // проверка

Подключение перевода

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

IncludeTemplateLangFile(__FILE__); // перевод файлов

Подключаем скрипты

Затем, чтобы отображались наши мето-данные, мы задействуем метод «ShowHead» , он выведет наши мета данные страниц, а также подключит скрипты из шаблона. Заменяем <meta charset=»UTF-8″> на вызов метода.

$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона

Подключение title

Следующим этапом подключаем title при помощи метода «ShowTitle» .

$APPLICATION->ShowTitle(); // вывод title

Подключение директорий файлов

Затем укажем путь к нашим файлам при помощи константы «SITE_TEMPLATE_PATH» , она помогает определить директорию, где они находятся.

<?=SITE_TEMPLATE_PATH?> // путь к директории шаблона (обязательно поставить флешь в конце).

Вставляем проверочный код

Вставляем константу к нашим стилям шаблона и обязательно за ней, вставляем флешь. У файла style.css мы код перенесли в templates_styles.css поэтому, он нам не нужен, и можем его удалить.

Укажем данную константу по всему шаблону у подключаемых файлов скриптов, стилей, картинок. Поместим favicon в основную директорию шаблона, заменим в атрибуте type=»png» на x-icon и укажем расширение файла .ico .

При помощи данного сервиса http://www.tools.dynamicdrive.com/favicon/ преобразуем ее в наше расширение и зальем в основную директорию, а favicon.png удалим.

Не забываем в footer.php прописать подключение файлов к текущему шаблону.

Подключение административной панели

Далее сразу за тегом body , подключаем административную панель при помощи метода «ShowPanel» .

$APPLICATION->ShowPanel(); //панель админки

Выносим языковое фразы

Теперь вынесем языковые файлы, которые будем подключать без компонентов, то есть напрямую через шаблон. Для этого создадим соответствующею директорию, где они будут храниться. Создаем папку lang , в ней поддиректории ru и en .

Открываем директорию ru и создаем в ней файл, с которого будем выносить языковые фразы, пишем header.php . В основном шаблоне смотрим, что нам нужно вынести в ленговские файлы. Возьмем из header.php шаблона заголовки наших блоков, открываем leng , формируем массив с первой нашей фразой «В настоящее время мы работаем над удивительным проектом» с ключом «WORKING_PROJECT» , а в header.php пропишем вместо фразы функцию «GetMessage» с нашим ключом «WORKING_PROJECT» .

Далее вынесем «Характеристика», прописываем массив с ключом «CHARACTERISTIC» и вставляем функцию «GetMessage» где передаем параметр данного ключа.

Затем заменим заголовок «Контакт», создаем массив с ключом «CONTACT» , и меняем заголовок на функцию с нашим ключом.

Читайте так же:
База данных для учета оборудования

Добавляем фразы в footer.php

Переходим в footer , тут можно вывести данный блок как есть через включаемую область, но для примера давайте вынесем эти фразы в Leng . Переходим в директорию ru и создаем новый файл с названием, у которого будем выносить фразы, пишем footer.php . В нем создаем массив с нашей фразой «ДАЛЬВЕБСТРОЙ» с ключом «COPY_DWS» и вставляем функцию «GetMessage» в основной файл с нашим параметром ключа.

Переносим следующую фразу «Все Права Защищены. Разработанный» в leng с ключом «COPY_RIGHTS» и не забываем заменить фразу в footer на функцию «GetMessage»

Английская версия языковых файлов

Для английской версии, нам нужно создать в директории en соответствующие файлы с такими же массивами только с английским переводом.

Копируем массив из файла header , переходим в нашу директорию en , создаем файл header.php , вставляем массив и вставляем переведенные фразы.

Тоже проделаем с footer , копируем массив, переходим в директорию en, и создаем файл footer.php в который вставляем наш массив и переводим фразы.

Включим шаблон в настройках сайта

Перейдем в административный раздел, Настройки продукта, Cайты, Список сайтов, открываем текущий сайт, спускаемся в самый низ и в Шаблонах укажем наш созданный шаблон «Лендинг», сохраняемся.

Включаем шаблон сайта

Переходим в визуальную часть и смотрим, что у нас получилось.

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

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

Давайте это поправим, перейдем в наш шаблон, откроем template_styles.css , находим код для вывода картинки, убираем [../] , так как текущий файл находится в основной директории шаблона. Сохранимся, перейдем на сайт и посмотрим отображение. Видим, появилась иконка загрузки и картинка слайдера.

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

Обновляем главную страницу, спускаем вниз, и у нас все нормально выводится. Давайте проверим английскую версию наших заголовков, для этого в настройках шаблона меняем язык на Английский и сохраняемся. Переходим в визуальную часть и все заголовки, которые мы выносили отдельно в leng файлы изменились.

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

Если из основного шаблона меняем путь файла style.css , тогда изменяем этот путь в самом коде, так как относительно данного файла картинки будут находиться в другой директории.

Читайте так же:
В приложении htc sense input произошла ошибка

Прописывая путь, с помощью константы «SITE_TEMPLATE_PATH» , не забывайте ставить в конце ее флешь.

На этом урок по Установке HTML заканчиваю, в следующих видео будем выводить некоторые блоки в отдельные включаемые области. С программируем компоненты, форму и так далее.

Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
— каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
— каталог include_areas — для включаемых файлов
— каталог page_templates — для образцов включаемых областей
— файл header.php — часть шаблона ДО контента
— файл footer.php — часть шаблона ПОСЛЕ контента
— файл description.php — название и описание шаблона
— файл .styles.php — описания стилей для визуального редактора страниц
— файл template_styles.css — стили шаблона
— файл styles.css — стили для контента и включаемых областей

Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.

В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок

По пунктам:
— в header.php включается 1 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
<?$APPLICATION->ShowPanel();?>
— вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные

— в footer.php целиком записываем 3ю часть
— ко всем относительным путям добавляем /bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/ Например, было

Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)

После описанных манипуляций должно получиться нечто похожее на
header.php

В template_styles.css все стили, файл styles.css пока пустой.

Файл description.php содержит всего одну строку вида:

В списке шаблонов имя каталога (у нас для примера оно test) будет в колонке ID, [template name] и [template description] в «Название» и «Описание» соответсвенно.

Решить проблему вывода сторонних плагинов выше jQuery из хедера можно двумя способами, замените вот эту строчку в хедере или закомментируйте

1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием

2) Либо вот на эту, это из ядра Битрикса подключит jQuery

jquery — подключит jQuery 1.8.3
jquery2 — подключит jQuery 2.1.3

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

Читайте так же:
Введите мастер пароль для доступа в etoken

Помните, только одна jQuery должна подключаться, либо ваша в шаблоне (вариант 1), либо из ядра Битрикса (вариант 2), все jQuery из сторонних модулей нужно отключать, т.к. они могут вызываться только на одной странице.

Что нам предлагает битрикс

Слава разработчикам, что они наконец-то начали отделять код ядра от кода разработчиков. С 12й версии битрикс появилась возможность использовать директорию /local (более полная поддержка пришла с 14й версией). Данная директория должна находиться в корне сайта. По структуре она полностью повторяет структуру директории /bitrix, за тем исключением, что в ней нет файлов ядра (встроенных модулей, компонентов и т.д.). Что же может содержать в себе директория /local? Основываясь на статье перечисляю поддерживаемые вложенные директории:

  • /local/activities — действия из модуля бизнес-процессов
  • /local/components — сторонние компоненты
  • /local/gadgets — гаджеты для рабочего стола админки
  • /local/modules — сторонние модули
  • /local/php_interface — работает только init.php и директория user_lang (для подмены языковых файлов)
  • /loca/templates — шаблоны сайта

Директория local имеет приоритет перед /bitrix, т.ч. при одинаковых именах файлов будет использован вариант из /local.

Шаблон сайта

Вроде все базово, все и всё знают, однако сколько проектов ни видел, нигде нет единого варианта. Шаблон сайта должен находиться в директории /local/templates/<templatename>. Структура файлов директории с шаблоном сайта достаточно подробно расписана тут, а я все-таки остановлюсь немного подробнее на нескольких файлах:

    header.php и footer.php. Пожалуйста — не стоит размещать в них логику. Только в самых крайних случаях. Надо понимать — что это файлы шаблонов — а в шаблонах должны быть только шаблоны, и ничего более. Тупой пример с одного из проектов, где в header.php определяется тип пользователя. Мало того, что логика в шаблоне, так и код еще ужасный:

Компоненты, свой — чужой

Часто наблюдаю нелепую ситуацию. Разработчик написал компонент, узкоспециальный, который решает конкретную в рамках продукта задачу. Сохраняет код компонента в /local/component/mx/my.component. А шаблон внезапно выносит зачем-то в шаблон сайта, или того хуже — в /bitrix/templates/.default/components/mx/my.component/templates/. Есть еще уникумы, которые в шаблоне своего компонента пишут result_modifier.php, который изменяет результат собственной выборки. На мой взгляд это полный бред. Если уж ты написал компонент, который правильно будет работать с конкретным шаблоном, то храни шаблон компонента внутри директории компонента /local/components/mx/my.component/templates. Если шаблон этого компонента работает исключительно с определенным шаблоном сайта, то я бы назвал шаблон этого компонента по имени шаблона сайта. И уж тем более не нужно использовать result_modifier.php, когда эту логику можно оставить в теле компонента.

Читайте так же:
В контакте приложение секреты

Также, разработчики часто забывают про возможности ООП внутри компонентов. Если кто не знает, то уже давно внутри компонента можно создать файл class.php, который должен содержать класс, унаследованный от CBitrixComponent.
Благодаря этому можно использовать наследование классов других компонентов при создании своих — иногда это очень полезный инструмент. Подробнее — тут.

Перед тем, как кастомизировать встроенный компонент — нужно 1000 раз подумать, а действительно ли он не соответствует вашим требованиям? Может вместо копирования встроенного компонента лучше прибегнуть к написанию собственного? Если вы все-таки решили скопировать встроенный компонент, то обязательно документируйте, что и где вы изменили внутри этого компонента, это сильно поможет другим разработчикам, а также поможет при обновлении компонентов при обновлении ядра.

Собственные и сторонние классы, библиотеки

Я предлагаю для хранения библиотек и классов завести директорию /local/lib. Для php библиотек — /local/lib/backend, для js — /local/lib/frontend
Внутри директории для php библиотек можно хранить библиотеки и классы по типу, описанному в одной из моих статей. В идеале — приводить свои библиотеки к виду, регламентируемому замечательным composer (про него когда-нибудь тоже напишу).
Каждая js библиотека должна храниться в отдельной директории, т.к. для библиотеки часто в комплекте может идти несколько css файлов, map, или еще чего. Ну и удобнее так будет, ибо нужно хранить и исходник файла, и его минифицированную версию.

Для конфигураций предлагаю создать директорию /local/config, внутри которой вижу следующие файлы:

  • const.php — константы вашего проекта
  • events.php — вызовы AddEventHandler для всех возможных кастомных обработчиков событий проекта.
  • frontend.php — регистрация js библиотек из /local/lib/frontend/ — об этом ниже

Не нужно подключать все свои js файлы прямым включением в шапку сайта. Для подключения js файлов в битриксе есть добротный класс CJSCore. Можно зарегистрировать все свои js библиотеки, и подключать их строго на нужных страницах. Для регистрации библиотек используем файл, который должен быть подключен на всех страницах нашего проекта — /local/config/frontend.php

Ниже в примере показано, как зарегистрировать библиотеку и подключить ее:

Заключение

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

Обязательно изучите все моменты подключения jQuery, скриптов и стилей, их порядок и включайте сжатие на сайте, это существенно ускорит время загрузки страницы и время ее отклика на действия посетителя, облегчит ее и нагрузку на сервер, сайт даже меньше трафика станет потреблять, т.к. каждый файлик на вашем сайте — это трафик!
Также, советую избавляться от всех малонужных и устаревших jQuery-плагинов, ко многим можно найти замену меньшую в разы и даже лучше по функционалу.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector