Битрикс правильное подключение css
Битрикс. Правильное подключение файлов js и css в шаблоне
В данной статье мы рассмотрим как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работа настройка сжатия файлов js и css.
Прямое подключение дополнительных файлов не рекомендуется
Для правильного подключения есть методы $APPLICATION->AddHeadScript() и $APPLICATION->SetAdditionalCSS()
$APPLICATION->AddHeadScript() — нужен для добавления скриптов.
$APPLICATION->SetAdditionalCSS() — для добавления каскадных таблиц стилей
С появлением ядра D7 можно подключать так
Записи равнозначные, можно использовать и запись без обращения к ядру D7 и с обращением.
Подключение js и css а шаблоне компонента
Для правильного подключения дополнительных файлов, подключаем их из шаблона компонента, а не прописывает в шаблон сайта.
В шаблоне компонента прописываем
Данные файлы тогда правильно объединятся с остальными.
Создам для Вас —
- Уникальный адаптивный дизайн Заключение договора
2012 — 2022 ИП Бульденков Антон Валерьевич
Заполните форму
Продолжая использовать этот сайт, Вы принимаете условия политики конфиденциальности и даёте согласие на обработку пользовательских данных. Подробнее
Продолжая использовать этот сайт, Вы принимаете условия политики конфиденциальности и даёте согласие на обработку пользовательских данных (файлов cookie), в том числе с использованием систем аналитики «Яндекс. Метрика» и «Google Analytics», (IP-адрес; версия ОС; версия веб-браузера; сведения об устройстве (тип, производитель, модель); разрешение экрана и количество цветов экрана; наличие программного обеспечения для блокирования рекламы; наличие Cookies; наличие JavaScript; язык ОС и Браузера; время, проведенное на сайте; глубина просмотра; действия пользователя на сайте; географические данные) в целях определения посещаемости сайта. Отказаться от обработки пользовательских данных и использования «cookie» можно, выбрав соответствующие настройки в браузере. Однако это может повлиять на работу некоторых функций сайта. Скрыть
Битрикс — Как правильно подключать CSS и JS файлы в шаблон
Разберем все способы подключения и выберем какой же самый лучший.
Как подключить стили в обычном HTML
Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):
2. Инлайново (крайне не рекомендуется):
3. через тег style (иногда допустимо, но редко):
Битрикс — Как добавить стили в шаблон?
В битриксе стили подключаются таким способом:
Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH — указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:
Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additional — Необязательный. По умолчанию «false». Добавление файлов стилей или js в конец списка ресурсов шаблона.
То есть, для его использования пишем:
Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.
Битрикс — Как добавить скрипты в шаблон?
Сначала функция на ядре D7:
Старая запись выглядит так и использует $APPLICATION->AddHeadScript:
$additional — По умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.
А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину 
Теперь вы знаете несколько способов подключения своих CSS и JS файлов, знаете про скрытый параметр, а также зачем подключать стили и скрипты именно с использованием API.
Ускорение сайтов, оптимизация, сжатие, объединение css и js
Сегодня узнаем как грамотно оформлять header.php в Битрикс, как правильно подключать .css и .js в header.php, как правильно подключать jQuery в Битрикс и как включить сжатие .css и .js файлов в Битрикс.
Это очень острая и актуальная проблема на сегодняшний день. Самые частые обращения по модулям связаны с ошибками в скриптах, когда неправильно подключена jQuery в header.php, и очень часто подключено несколько jQuery, но должна быть подключена на всех страницах сайта только одна библиотека jQuery и самой первой среди всех скриптов шаблона сайта.
На одном сайте был рекорд, я насчитал 7 подключенных библиотек jQuery, просто человек замучился искать ошибки и деваться уже некуда было, когда проблема была найдена и исправлена, все стало работать на сайте правильно.
Правильный header.php в Битрикс
Итак, как грамотно должен быть оформлен файл header.php шаблона сайта в Битрикс:
- Перед не должно быть никаких пробелов и переносов
- Кодировка страницы задается перед
- После заголовка перечисляются все мета-теги
- После мета-тегов подключаются .css стили сайта
- И только после подключения .css стилей подключаются все .js скрипты
AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/core.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/grid.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/modal.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/dropdown.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/scrollspy.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/utility.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/button.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/switcher.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/nav.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/components/sticky.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/components/form-password.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/pace.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.nanoscroller.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.responsiveTabs.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/switchery.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/readmore.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.scrollUp.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/fn.js’);
//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
CUtil::GetAdditionalFileURL() — генерирует url к файлу с указанием метки версии файла, т.е. он будет кешироваться в браузере посетителя.
SITE_TEMPLATE_PATH — это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки, если измените папку шаблона, то в header.php ничего исправлять уже не придется, он изменится в этой константе, например: /bitrix/templates/папка шаблона сайта/
Разберем представленный выше код header.php детально, чтобы понимать, что тут для чего подключается.
Хочу обратить внимание на передаваемые параметры true и false в методах, например ShowMeta() и ShowCSS(), от них зависит стандарт вывода тегов, для HTML 4, HTML 5 в виде
Тут мы выводим мета-теги «описание» и «ключевые слова» для поисковых систем.
ShowMeta(«robots», false, false);
$APPLICATION->ShowMeta(«keywords», false, false);
$APPLICATION->ShowMeta(«description», false, false);
?>
Методом SetAdditionalCSS() подключаем стили шаблона, так каждый стиль.
Метод ShowCSS() выводит все стили шаблона и стили, которые могут подключаться в компонентах Битрикс, т.е. вообще все подключенные стили, включая стили ядра Битрикс.
Перед подключением вообще всех скриптов сайта и только для браузера Internet Explorer младше IE 9 я подключаю специальные полифилы функций/методов, которые в нем отсутствуют и вызывают ошибки javascript, возможная самая частая ошибка типа Object doesn’t support property or method ‘forEach’.
Т.е. если какого-то метода нет в IE 8, но он используется в новой jQuery или каком-то плагине, то может повезет и он найдется в этом скрипте, но Вы можете его не подключать, только если нужен.
А вот и подошли мы к самому интересному, на этом этапе самая частая ошибка подключения jQuery, которая должна выводиться самой первой среди всех остальных подключенных в компонентах или в шаблоне сайта jQuery-плагинах, т.е. ошибок с подключенными где-то в компоненте или шаблоне jQuery-плагинами быть не должно!
Все плагины и скрипты будут подключаться как положено, после jQuery, а не как у многих, в обратном порядке, это базовое правило подключения плагинов jQuery, знать его нужно всем!
Методом AddHeadScript() подключаем скрипты шаблона и только после подключения стилей, стили всегда подключайте выше скриптов.
Ниже два заключительных метода «выводят»:
- ShowHeadStrings() выводит все скрипты ядра Битрикс, включая встроенную jQuery, если вызывается методом CJSCore::Init(array(‘jquery’));
- ShowHeadScripts() выводит скрипты шаблона добавленные с помощью AddHeadScript(), а также специальные стили, JavaScript, либо произвольный html-код, который задается в компонентах с помощью CMain::AddHeadString() и все на свете пользовательское.
Обратите внимание на порядок, именно в таком порядке!
Почему строго в таком порядке?
Потому что в методе ShowHeadStrings() может выводиться jQuery ядра Битрикс, вызываемая таким образом:
Я ее специально закомментировал, чтобы Вы это знали, и знали где подключать. Вызываться он может в любом компоненте, в шаблоне, на любой странице сайта, а выводится она именно в этом самом первом методе, если поменять их местами, она окажется в самом низу, вот и ошибка разработки, можно это смело добавлять в чек-лист по разработке сайта.
Но если Вы выводите встроенную jQuery, значит подключенную ранее вручную jQuery надо удалить со страницы, не забывайте, она должна быть одна на всем сайте!
Итак, все это подключенное в исходном коде выглядит так:
Это конечно все круто! Но, как мы видим, к серверу очень много запросов — 93 шт., много подключено всяких файликов, а это заметно сказывается на скорости загрузки страницы, на время ожидания клиентом, мне-то как разработчику очень удобно, наглядно все видно в коде, но посетители мои от этого заметно страдают.
Оказывается, в Битрикс есть отличные опции в настройках главного модуля, позволяющие:
- Объединять CSS файлы
- Объединять JS файлы
- Подключать минифицированные версии CSS и JS файлов
- Создавать сжатую копию объединенных CSS и JS файлов — нужно отключить
Включается сжатие и объединение .css и .js здесь:
Администрирование -> Настройки -> Настройки модулей -> Главный модуль
Поставьте галочки и сохраните настройки модуля зеленой кнопкой Сохранить.
При включении этих опции в идеальном случае на странице подключается 3 css и 3 js файла, подробнее читайте в курсе про Сжатие css и js файлов.
Создавать сжатую копию объединенных CSS и JS файлов — это нужно отключить!
Потому что при включенной опции Битрикс сжимает вообще все подключенные на сайте скрипты и стили со всех страниц сайта, это и вес им прибавляет, и велика вероятность появления JS-ошибок на странице.
Лично я столкнулся с такой проблемой, JS-ошибка запросто будет в модуле, где у jQuery-плагина есть js-lang, эти лэнги хранятся в соответствующих php-файлах, вот если на странице сайта подключается какое-то расширение, то Битрикс его также сжимает, скрипт этого расширения будет на всех страницах сайта, а вот лэнги расширения подключаются только на той странице, где вызывается расширение, если jQuery-плагин не видит свой js-lang, то запросто может быть на странице js-ошибка.
Например, я свой jQuery-плагин подключил как расширение на странице Каталог, тут же и лэнги моего плагина подключаются, вот если включить сжатую копию всех JS-файлов, мой плагин будет на всех страницах сайта в хедере, а лэнг только на странице Каталог, соответственно, когда я открываю например главную страницу сайта или любую другую отличную от Каталога, то в консоли появляется JS-ошибка, т.к. лэнги моего плагина подключаются только на странице Каталог.
В общем, очень опасная опция, не включайте ее вообще.
Все, сжатие включено и должно работать.
Для точного результата работы сжатия необходимо разлогиниться, далее открывайте главную страницу сайта, обновите ее, откройте исходный код и увидите такую картину
Наглядно видим, насколько уменьшилось количество файлов, все скрипты шаблона сжаты в один файл, стили также в один файл.
Количество запросов уменьшилось в разы, время полной загрузки страницы сократилось с 3.8сек. до 1.8сек., запросы к серверу сократились с 93 до 43.
Заключение
Данный способ конечно не является идеальным, но он послужит хорошим образцом, как все подключать и в каком порядке, и как не совершать грубейших ошибок при разработке сайта.
Обязательно изучите все моменты подключения jQuery, скриптов и стилей, их порядок и включайте сжатие на сайте, это существенно ускорит время загрузки страницы и время ее отклика на действия посетителя, облегчит ее и нагрузку на сервер, сайт даже меньше трафика станет потреблять, т.к. каждый файлик на вашем сайте — это трафик!
Также, советую избавляться от всех малонужных и устаревших jQuery-плагинов, ко многим можно найти замену меньшую в разы и даже лучше по функционалу.
Это была моя первая статья из курса «Ускорение сайта», продолжение следует.
