Где в битрикс подключить css

Битрикс – Как правильно подключать 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.

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

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

Asset::getInstance()->addString(‘<meta prop=»name» content author-section»>

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

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Для чего подключать скрипты и js через API

Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида

Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс

До выхода нового ядра D7

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

По условиям обратной совместимости, использовать можно оба метода- оба способа работают правильно и принципиальной разницы не имеют

Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.

Самое главное, вы сможете подключать необходимые файлы в «объединение» по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта

Подключение стилей и js в шаблонах компонентов

Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

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

Подключение CSS и JS файлов в шаблоне компонента

Очень простое и полезное API есть в продукте, которое достойно отдельного внимания! Наверняка еще не все знают

Для оформления и реализации front-end логики компонента, в его шаблоне доступны не обязательные файлы
— style.css , который определяет стили, необходимые данному шаблону
— script.js , который определяет и подключает яваскрипты, необходимые данному шаблону.

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

— В шаблоне "подключить жестко" инлайном, что совсем не спортивно

В комплекте идёт поддержка кеширования не только текущего шаблона, но и родительского.
Не зависимо от кеша, файлы всегда будут с шаблоном! Ура!

Новая страничка в курсе разработчика. Поделитесь с коллегами

а в component_epilog.php будет работать?

Так как в файле шаблона $this это объект CBitrixComponentTemplate, к которому и принаджлежит метод addExternalCss, а в component_epilog.php $this это CBitrixComponent , через который можно получить и объект шаблона.

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

Теперь у CBitrixComponent ($this в component_epilog) есть метод getTemplate()

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

Да, это прошлый релиз, оказалось фича «сама в массы не ушла» и стоит рассказать

Иван, ошибаетесь, ушла в массы
http://dev.1c-bitrix.ru/community/webdev/user/10337/blog/14859/

и более того, эти функции уже активно используются в составе ядра bxready (мы еще напишем про этот продукт, сейчас активно работаем над ним, веб-мастерам рекомендую следить за нами https://www.facebook.com/bxready/

Но когда только мы эти функции встретили,
из ядра нашего продукта мы выбросили целый вагон кода. В общем, эти функции для нас оказались настоящей находкой

за последние несколько лет, это был действительно подарок от Битрикс

Большое спасибо

Есть другая задача.
Как сделать так, чтобы, например, при ajax-запросе компонента штатные style.css и script.js подключились тут же инлайново?
P.S. Создание отдельного шаблона сайта для ajax запросов компонентов — не наш метод

А если в шаблонах используются одни и те же плагины (css+js) и их много? Например, плагин jqueryUI Календарь, насколько помню, использует основной стиль плагина, тему, основной скрипт и скрипт локализации, т.е. 4 файла — 4 строки вызова ресурсов. А если там несколько плагинов, то будет куча повторяющегося кода?
Если работают несколько разработчиков, то могут вообще подключить одинаковые файлы одни и тех же плагинов из разных шаблонов, что может вызвать непредвиденное поведение.
Если необходимо обновить плагин, то потенциально придется лезть во все шаблоны, где используется плагин и менять пути вызова ресурсов.

Лаконичнее по-моему выносить вызов ресурсов плагина в CJSCore::RegisterExt, а затем в component_epilog.php одной функцией вызвать все необходимые плагины CJSCore::Init.

Про данные атрибуты разработчики конечно же не знали и не сделали возможность их добавления, как всегда.
async=»async»
defer=»defer»

Всегда нужна возможность для CSS и JS скриптов передавать массив доп.атрибутов, как перечисленных выше, так и своих.

Хотелось бы узнать, константы не запретят когда нибудь? Ведь $_REQUEST по какой-то причине внезапно оказался вне закона.

Я и раньше константы с осторожностью использовал, всегда делал так:

Подключение файлов js и css

Посмотрим, как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работала настройка сжатия файлов js и css Настройки -> Настройки модулей -> Главный модуль :

Прямое подключение дополнительных файлов не рекомендуется:

Для правильного подключения есть методы:

1. $APPLICATION->SetAdditionalCSS() для добавления файлов стилей
2. $APPLICATION->AddHeadScript() для добавления скриптов
3. $APPLICATION->SetHeadString() для добавления произвольных строк

С появлением ядра D7 добавились методы:

1. \Bitrix\Main\Page\Asset::addCss() для добавления файлов стилей
2. \Bitrix\Main\Page\Asset::addJs() для добавления скриптов
3. \Bitrix\Main\Page\Asset::addString() для добавления произвольных строк

Записи равнозначные, можно использовать и запись без обращения к ядру D7 и с обращением.

$APPLICATION (экземпляр класса CMain ) и Asset::getInstance() глобальные объекты. Они доступны после подключения служебной части пролога Битрикса. Таким образом, можно их использовать в любом месте компонента, модуля или шаблона.

Подключение js и css в шаблоне компонента

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