Битрикс. Правильное подключение файлов 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");?>

Данные файлы тогда правильно объединятся с остальными.

Предыдущая новость

Анимация счетчика чисел при прокрутке страницы

Следующая новость

Битрикс. Установка на Openserver

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

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

Спасибо за обращение!