Как правильно подключать файлы js и css в Битриксе

Многие забывают, что в системе Битрикс существует настройка сжатия файлов JS и CSS, и чтобы эта функция корректно работала необходимо правильно их подключать.

Не рекомендуется вставка нужных строк напрямую в файл 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); ?>

И, конечно же, предпочтительно пользоваться специальными константами.

Подключение с использованием ядра 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


comments powered by HyperComments

Возврат к списку