Правильное подключение стилей и скриптов в Битрикс, заметки по Битрикс на сайте camouf.ru

 9608| 12 Автор: Михаил Базаров (КамуфляЖ)

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Для чего подключать скрипты и js через API

Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида

Для стилей
<link href="<a target="_blank" href="/file.css">

Для js файлов
<script type="text/javascript" src="<a href="/file.js">

Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс

До выхода нового ядра D7

Для подключения скриптов
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" );

Подключение css
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true);

Подключение мета тегов или сторонних файлов
$APPLICATION->AddHeadString("name='<meta name='yandex-verification' content='62be9ea1' />'");

В D7:

use Bitrix\Main\Page\Asset;

Для подключения css
Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css");

Для подключения скриптов
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js");

Подключение мета тегов или сторонних файлов
Asset::getInstance()->addString("<link rel='shortcut icon' href='/local/images/favicon.ico' />");

По условиям обратной совместимости, использовать можно оба метода. Лично я предпочитаю подключать по старинке, без использования D7- но оба способа работают правильно и принципиальной разницы не имеют

Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.

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

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

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

$this->getTemplate()->addExternalCss("/local/addcss.css");
$this->getTemplate()->addExternalJs("/local/addcss.css");

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

Автору на кофе и печеньки!

Через Яндекс деньги
С банковской карты
С мобильного

Предыдущая запись Следующая запись

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Ильёс Газиев 27.07.2017
Вот такой вопрос я написал небольшой компонент шаблон там со одним стилим и скриптом для меня он загружается нормально без проблем а для других без стилей

Ильёс Газиев 27.07.2017

Цитата
Ильёс Газиев пишет: Вот такой вопрос я написал небольшой компонент шаблон там со одним стилим и скриптом для меня он загружается нормально без проблем а для других без стилей

я и кэш очищал и отключал в компоненте его но без результатов то загружает то нет

Александр Кузнецов 06.08.2017
На самом деле остается открытым вопрос относительно оптимальности самой "оптимизации" битриксом ресурсов.

Михаил Базаров 06.08.2017

Цитата
Александр Кузнецов пишет: На самом деле остается открытым вопрос относительно оптимальности самой "оптимизации" битриксом ресурсов.

Если с самого начала сборки сайта, сделать все правильно- проблем быть не должно

Николай Соболев 13.10.2017
Михаил подскажи пожалуйста нужно ли подключать bootstrap в новых версиях битрикса

Михаил Базаров 13.10.2017

Цитата
Николай Соболев написал: Михаил подскажи пожалуйста нужно ли подключать bootstrap в новых версиях битрикса

Если bootstrap нужен при верстке-то можно. Если не используется-то не надо.
В общем, по желанию

Николай Соболев 14.10.2017

Цитата

Михаил Базаров пишет:

Цитата
Николай Соболев написал: Михаил подскажи пожалуйста нужно ли подключать bootstrap в новых версиях битрикса

Если bootstrap нужен при верстке-то можно. Если не используется-то не надо.
В общем, по желанию

Ну вроде бы как я понимаю он уже подключен и используется в системе в новых версиях или я ошибаюсь?

Михаил Базаров 14.10.2017

Цитата

Николай Соболев написал:

Цитата

Михаил Базаров пишет:

Цитата
Николай Соболев написал: Михаил подскажи пожалуйста нужно ли подключать bootstrap в новых версиях битрикса

Если bootstrap нужен при верстке-то можно. Если не используется-то не надо.
В общем, по желанию

Ну вроде бы как я понимаю он уже подключен и используется в системе в новых версиях или я ошибаюсь?

Нет, его нужно вручную прописывать в head. И в нескольких компонентах прописан (точно в умном фильтре и оформлении заказа), там просто комментируете эти строчки- где то в верху шаблона

Велес 26.11.2017

Цитата
Михаил Базаров пишет: Если с самого начала сборки сайта, сделать все правильно- проблем быть не должноПожал

Пожалуйста, ссылку дайте, где почитать об этом можно?)

nikolaevevge 25.12.2017
Вы пишите о правильном подключении JS имея ввиду Asset::getInstance()->addJs, но данный метод не всегда подходит. Например сайт работает в кодировке cp1251(она же windows-1251), и необходимо подключить кнопки шары Яндекс в соц-сети, JavaScript которых выложен на яндекс в кодировке UTF-8. Так вот метод addJs не имеет возможности указать кодировку. Решение задачи на форуме битрикса по ссылке(в соответствии с ответом техподдержки битрикс метод является стандартным): https://dev.1c-bitrix.ru/community/forums/forum6/topic104055/

Михаил Базаров 25.12.2017

Цитата

nikolaevevge написал:
Вы пишите о правильном подключении JS имея ввиду Asset::getInstance()->addJs, но данный метод не всегда подходит. Например сайт работает в кодировке cp1251(она же windows-1251), и необходимо подключить кнопки шары Яндекс в соц-сети, JavaScript которых выложен на яндекс в кодировке UTF-8. Так вот метод addJs не имеет возможности указать кодировку. Решение задачи на форуме битрикса по ссылке(в соответствии с ответом техподдержки битрикс метод является стандартным): https://dev.1c-bitrix.ru/community/forums/forum6/topic104055/

Если это правильное но не обязательное подключение, само собой, если по каким-то причинам не подходит или не совместимо- можно и по старинке отдельные скрипты подключать.

Еще и отключить объединение (например, счетчик Li не адекватно себя ведет) и перенос этих скриптов, можно через

Код
<script data-skip-moving="true"....../>

Lu Sh 20.03.2018
Добрый день! Подскажите,пожалуйста,можно ли не подключать штатную библиотеку JQuery? Если да,то как? Мне нужно подключить свою, но что бы я не делала,все равно подключается штатная 1.8, и ничего не работает. Как правильно это сделать? Заранее благодарю!