Как правильно подключать файлы js и css в Битриксе
Многие забывают, что в системе Битрикс существует настройка сжатия файлов JS и CSS, и чтобы эта функция корректно работала необходимо правильно их подключать.
Подключение с использованием ядра D7
<?
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs('/путь/скрипт.js');
Asset::getInstance()->addCss('/путь/стиль.css');
Asset::getInstance()->addString('<meta itemprop="name" content="Название сайта"/>');
?>
Пояснения для новичков
$APPLICATION или Bitrix\Main\Page\Asset - глобальные объекты. Они доступны после подключения пролога Битрикса. Таким образом мы можете их использовать в любом месте компонента, модуля или шаблона. Но, если вы создаёте отдельную страницу и желаете подключить скрипты или стили которые будут кешироваться и сжиматься, то нужно подключить пролог. Обычная страница index.php будет выглядеть так:
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetPageProperty("title", "Блог");
$APPLICATION->SetTitle("Блог");
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/js/highlight/styles/github.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/highlight/highlight.pack.js');
?>
... Ваш компонент ...
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
НО, это плохая практика подключения стилей и скриптов на странице. Лучшим решением будет подключение в шаблоне компонента в файле component_epilog.php
Устаревший способ
Не рекомендуется вставка нужных строк напрямую в файл header.php, который находится по адресу /bitrix/templates/имя_шаблона/header.php (или /local/templates/имя_шаблона/header.php для D7).
<script type="text/javascript" src="/путь/скрипт.js"></script>
<link rel="stylesheet" type="text/css" href="/путь/стиль.css" />Следует заметить, что в этом случае файлы будут постоянно подключаться при использовании данного шаблона. Бывают случаи, когда необходимо подключать скрипты/стили, лишь на некоторых страницах, например слайдер на главной.
Правильно — подгружать файлы стилей и скриптов через метод $APPLICATION->AddHeadScript() и $APPLICATION->SetAdditionalCSS() в header.php. И при необходимости подключения на определенных страницах сайта, добавив их в файл template.php. Данный способ часто используется в шаблонах компонентов подключаемых в различных участках кода.
<?
$APPLICATION->AddHeadScript('/путь/скрипт.js');// для скриптов
$APPLICATION->SetAdditionalCSS('/путь/стиль.css'); // для стилей
?>Так же есть еще один способ, который позволяет добавить в <head> любую строчку. Порой это необходимо при встраивании meta-тегов и скриптов социальных сетей, которым необходимо подключение именно в <head>.
<? $APPLICATION->AddHeadString('ваш_код',true); ?>И, конечно же, предпочтительно пользоваться специальными константами.