Битрикс — Как правильно подключать CSS и JS файлы в шаблон

Разберем все способы подключения и выберем какой же самый лучший.

Как подключить стили в обычном HTML

Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):

<link rel="stylesheet" href="css/style.min.css" />

2. Инлайново (крайне не рекомендуется):

<img src="" style="width:100px;">

3. через тег style (иногда допустимо, но редко):

<style>body{color:red;}</style>

Битрикс — Как добавить стили в шаблон?

В битриксе стили подключаются таким способом:

<?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css")?>

Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH — указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:

// В начале файла вам нужно будет указать пространство имён
use Bitrix\Main\Page\Asset; 

Asset::getInstance()->addCss('/path/style.css'); 

Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additionalНеобязательный. По умолчанию «false». Добавление файлов стилей или js в конец списка ресурсов шаблона.

То есть, для его использования пишем:

Asset::getInstance()->addCss('/path/style.css', true); 
// или
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css", true);

Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.

Битрикс — Как добавить скрипты в шаблон?

Сначала функция на ядре D7:

// В начале файла вам нужно будет указать пространство имён
use Bitrix\Main\Page\Asset; 

Asset::getInstance()->addJs('/path/main.js'); 

Старая запись выглядит так и использует $APPLICATION->AddHeadScript:

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/main.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/cookie.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');

$additionalПо умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.

А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину

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

Как в битриксе добавить свою строку в head

Очень просто, делается это при помощи:

Asset::getInstance()->addString('<meta prop="name" content="value/>');

Просьба также прочитать официальную документацию, тут довольно много параметров, опять таки, неочевидных:
https://dev.1c-bitrix.ru/api_help/main/reference/cmain/addheadstring.php
Спасибо за внимание 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

- Создание сайтов на 1С-Битрикс любой сложности
- Вёрстка макетов Figma, Photoshop, Zeplin
- Поддержка проектов на Битриксе
- Разработка нового функционала для сайта
- Парсинг данных
- Выгрузка \ Загрузка файлов в формате XML, YML, XLS, XLSX, CSV, JSON
- Интеграция по API со сторонними сервисами
и многое другое

E-mail: dmitriyribka@gmail.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *