Как правильно добавлять CSS и JS файлы в в битрикс
В компонентах Битрикс можно подключать js и css коды, для этого нужно использовать style.css и script.js, лежащие в компоненте шаблона. Порой таких файлов не хватает, тогда можно подключить дополнительные скрипты и стили одним из способов:
Включить файл в шаблоне компонента:
Выполнить код в самом компоненте:
Если вызывать данный метод, то подключаемый файл окажется в пределах тега <head></head> сайта (при условии если осуществляется перенос скриптов в конец кода, для js)
Также можно подключать нужные файлы в component_epilog.php, тогда подключение не будет кешироваться, и можно, к примеру, отдавать на редактирование файл сторонним разработчикам:
Следующий метод, пожалуй самый правильный, который стал доступен с 15.5.1 версии - в файле шаблона template.php:
Вот еще способ с использованием ядра D7
Таким способом можно добавить в раздел на сайте целую строку, такой способ можно использовать для вставки другого кода, например, cannonical
30.05.2022
Включить файл в шаблоне компонента:
<link href="/local/styles.css" type="text/css" rel="stylesheet" /> <script src="/local/script.js"></script>
Выполнить код в самом компоненте:
// для css
$APPLICATION->SetAdditionalCss("/local/styles.css");
// для js
$APPLICATION->AddHeadScript('/local/script.js');
Если вызывать данный метод, то подключаемый файл окажется в пределах тега <head></head> сайта (при условии если осуществляется перенос скриптов в конец кода, для js)
Также можно подключать нужные файлы в component_epilog.php, тогда подключение не будет кешироваться, и можно, к примеру, отдавать на редактирование файл сторонним разработчикам:
SetAdditionalCss("/local/styles.css");
Следующий метод, пожалуй самый правильный, который стал доступен с 15.5.1 версии - в файле шаблона template.php:
$this->addExternalCss("/local/styles.css");
$this->addExternalJS("/local/script.js");
Вот еще способ с использованием ядра D7
addJs((SITE_TEMPLATE_PATH."/js/script.js"); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css"); ?>
Таким способом можно добавить в раздел на сайте целую строку, такой способ можно использовать для вставки другого кода, например, cannonical
Asset::getInstance()->addString('<meta prop="name" content="value/>');
