- Битрикс – Как правильно подключать CSS и JS файлы в шаблон
- Как подключить стили в обычном HTML
- Битрикс – Как добавить стили в шаблон?
- Битрикс – Как добавить скрипты в шаблон?
- Как в битриксе добавить свою строку в head
- Подключение CSS и JS файлов в шаблоне компонента
- Продукты
- Управление сайтом
- Битрикс24
- Интернет-магазин + CRM
- Решения
- Для интернет-магазинов
- Каталог готовых решений
- Внедрение
- Выбрать партнера
- Проверить партнера
- Стать партнером
Битрикс – Как правильно подключать CSS и JS файлы в шаблон
Разберем все способы подключения и выберем какой же самый лучший.
Как подключить стили в обычном HTML
Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):
2. Инлайново (крайне не рекомендуется):
3. через тег style (иногда допустимо, но редко):
Битрикс – Как добавить стили в шаблон?
В битриксе стили подключаются таким способом:
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
Очень просто, делается это при помощи:
Подключение CSS и JS файлов в шаблоне компонента
Очень простое и полезное API есть в продукте, которое достойно отдельного внимания! Наверняка еще не все знают
Для оформления и реализации front-end логики компонента, в его шаблоне доступны не обязательные файлы
— style.css , который определяет стили, необходимые данному шаблону
— script.js , который определяет и подключает яваскрипты, необходимые данному шаблону.
Не всегда их хватает. Для подключения внешних css/js можно было пойти разными путями
— В шаблоне «подключить жестко» инлайном, что совсем не спортивно
$APPLICATION->SetAdditionalCss("/local/styles.css");
— Архитектурно правильный способ (но его уже можно считать устаревшим), для тех кто знаком с устройством компонента,
создать component_epilog.php:
чуть выше ответ.
у самого был затык с этим.
$APPLICATION->ShowAjaxHead();
вставить после пролога перед компонентом.
так думаю работать будет по любому
Это здорово, но файл подключенный с помощью $this->addExternalJS() вызывается после script.js шаблона компонента.
То есть если я подключаю библиотеку в $this->addExternalJS(), то в script.js я не могу использовать ее. Как быть?
Продукты
Управление сайтом
Битрикс24
Интернет-магазин + CRM
Решения
Для интернет-магазинов
Каталог готовых решений
Внедрение
Выбрать партнера
Проверить партнера
Стать партнером
1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507
© 2001-2023 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности