Битрикс. Правильное подключение файлов js и css в шаблоне

Битрикс. Правильное подключение файлов js и css в шаблоне
Блог
24.02.2018 14:42:00
В данной статье мы рассмотрим как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работа настройка сжатия файлов js и css.

Прямое подключение дополнительных файлов не рекомендуется
<script type="text/javascript" src="/js/script.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" />

Для правильного подключения есть методы $APPLICATION->AddHeadScript() и $APPLICATION->SetAdditionalCSS() 

$APPLICATION->AddHeadScript() - нужен для добавления скриптов.

$APPLICATION->SetAdditionalCSS()  - для добавления каскадных таблиц стилей

<?
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/script.js");
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css");
?>

С появлением ядра D7 можно подключать так

<?
 use Bitrix\Main\Page\Asset; 
Asset::getInstance()->addJs((SITE_TEMPLATE_PATH."/js/script.js"); 
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css"); 
?>
Записи равнозначные, можно использовать и запись без обращения к ядру D7 и с обращением.

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

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

В шаблоне компонента прописываем

<?
$this->addExternalCss("/local/css/style.cs");
$this->addExternalJS("/local/js/script.jss");?>
Данные файлы тогда правильно объединятся с остальными.
Что я предлагаю

Создам для Вас -

  • Уникальный адаптивный дизайн
  • Заключение договора

Заполните форму