Как нужно подключать стили и скрипты в 1С-Битрикс?

Как нужно подключать стили и скрипты в 1С-Битрикс? При верстке шаблонов в Битрикс существуют разные варианты подключения скриптов и стилей. При готовой верстке в HTML/CSS, можно интегрировать шаблон в систему подключив стили, js и метатеги.
 

Js и скрипты необходимо подключать через API. Почему?

Ниже разберем вопрос Прежде всего это необходимо для оптимальной работы сайта. Система 1С-Битрикс, сама объединяет и сжимает стили и js файлы, которые к ней подключены. В случае, когда они подключаются такими вставками: 
  • Для js файлов <script type="text/javascript" src="<a href="/file.js">
  • Для стилей <link href="<a target="_blank" href="/file.css">
При этом существует один нюанс: оптимизация сайта не будет управляться с помощью CMS. Чтобы этого избежать, будет целесообразней, подключать такие файлы с помощью API Битрикс.

Способы подключения: 

До выхода ядра D7
  • Метатеги и другие  файлы $APPLICATION->AddHeadString("name='<meta name='yandex-verification' content='62be9ea1' />'");
  • Скрипты $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" ); 
  • Css $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true);
В D7:
  • use Bitrix\Main\Page\Asset;
  • Метатеги и другие  файлы Asset::getInstance()->addString("<link rel='shortcut icon' href='/local/images/favicon.ico' />"); 
  • Скрипты Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js");
  • Css Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css"); 


Существуют условия обратной совместимости, по ним разрешено пользоваться обоими методами. Я всегда склоняюсь к подключению без использования D7- но в любом случае оба метода работают, и больших различий в них нет. 

Подключая, через ядро Битрикс, внешние файлы, вы по максимуму оптимизируете свой сайт. Появится возможность сжимать и объединять css файлы. Как это сделать? См.инструкцию ниже:

В административном разделе Битрикс: открываете "Настройки", находите раздел "Настройки Модулей" и в нем выбираете "Главный модуль", там необходимо включить галочки (см.скрин): 

2020-09-16_22-12-18.png

Важно! У Вас будет возможность подключать требуемые файлы в "объединение" по первой необходимости, зависимо от необходимого функционала страницы или компонента. Следовательно, у Вас постоянно будут один js и один файл css, но их содержание и соответственно объем, будут другими в отличии от данного  раздела или страницы сайта.

Подключение стилей и js в шаблонах компонентов

Когда необходимо подключить скрипты и стили, внутри шаблонов компонентов. К примеру, Вы используете в основе списка новостей слайдер: может случиться такое, что у него много js и css, тогда нерационально, подключать его содержимое, полностью ко всему сайту.

Советую воспользоваться  такой конструкцией:
  • $this->getTemplate()->addExternalCss("/local/addcss.css"); 
  • $this->getTemplate()->addExternalJs("/local/addcss.css");
Все любят быстродействующие сайты, поэтому оптимизируйте. К тому же это просто и не нуждается в значительных трудозатратах.  


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

↑