Подключение CSS и JS файлов в шаблоне компонента 1С-Битрикс

, Михаил

Для оформления и реализации front-end логики компонента, в шаблоне доступны не обязательные файлы

  • style.css — дополнительные стили для шаблона;
  • script.js — дополнительные скрипты для шаблона.

Архитектурно правильный способ - создать component_epilog.php


<?php 

global $APPLICATION;
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH ."/js/divasoft.js");
$APPLICATION->SetAdditionalCss(SITE_TEMPLATE_PATH ."/css/divasoft.css");
$APPLICATION->AddHeadString("<link href='http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic' rel='stylesheet' type='text/css'>");

?>

Или в новом стиле D7:


<?php 

use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH "/js/divasoft.js");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH "/css/divasoft.css");
Asset::getInstance()->addString("<link href='http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic' rel='stylesheet' type='text/css'>");

?>

И теперь самый простой и правильный способ в template.php


<?php 

$this->addExternalCss("/local/styles.css");
$this->addExternalJS("/local/liba.js");

?>

Ещё один способ, если весь шаблон находится в отложенной функции template.php


<?php 

//we can't use $APPLICATION->SetAdditionalCSS()
$css $APPLICATION->GetCSSArray();
if(!is_array($css) || !in_array("/bitrix/css/main/font-awesome.css"$css)) {
	    $strReturn .= '<link href="'.CUtil::GetAdditionalFileURL("/bitrix/css/main/font-awesome.css").'" type="text/css" rel="stylesheet" />'."\n";
	}

?>