Правильное добавление CSS и JS файлов в битрикс
В битриксе, в компонентах, есть возможность подключения js и css кода, используя файлы style.css и script.js, которые лежат в компоненте шаблона. Иногда этих файлов бывает недостаточно, мы можем подключить дополнительные стили или скрипты несколькими способами: Путем включения файла в шаблоне компонента:
Выполнив код в самом компоненте:
// для css $APPLICATION->SetAdditionalCss("/local/styles.css"); // для js $APPLICATION->AddHeadScript('/local/script.js');
При вызове этого метода данный подключаемый файл окажется в секции сайта (в случае если не указан перенос скриптов в конец кода, для js)
Была возможность также подключать необходимы файлы в файле component_epilog.php, в этом случае подключение не кешируется, и можно, например, предоставить возможность редактировать файл сторонним разработчикам:
SetAdditionalCss("/local/styles.css");
И самый правильный метод, в файле шаблона template.php, этот метод стал доступен с версии 15.5.1:
$this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/script.js");
Вот еще способ с использованием ядра D7
addJs((SITE_TEMPLATE_PATH."/js/script.js"); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css"); ?>
Вот таким способом мы можем вставить целую строку в раздел на сайте, этот способ может быть удобен при необходимости вставки какого то другого кода, например, cannonical
- Форма обратной связи ajax
- Битрикс бесконечная прокрутка страниц
- data-skip-moving битрикс
- Битрикс многосайтовость
- Bitrix server test
- Битрикс меню каталога
- Битрикс не добавляются товары в корзину
- Перенос сайта на битриксе на другой хостинг
- Перенос сайта на битрикс
- Не приходят письма битрикс
- Битрикс сео оптимизация
- Ssl сертификат Битрикс
- Битрикс выгрузка на яндекс маркет
- Битрикс добавляем google analytics и яндекс метрику
- Цели яндекс метрика & google analytics битрикс
- phpmyadmin на битрикс
- Эквайринг битрикс
- Конвертер на лету. Webp в битрикс
- Битрикс, авторизация скриптом
- Добавление свойств товара в корзину Битрикс
- Настройки ошибки 404
- Битрикс Яндекс.Касса
- Размещаем robots.txt в Битрикс
- Битрикс остатки по складам
- Настройка поиска
Битрикс – Как правильно подключать CSS и JS файлы в шаблон
Разберем все способы подключения и выберем какой же самый лучший.
Как подключить стили в обычном HTML
Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):
2. Инлайново (крайне не рекомендуется):
3. через тег style (иногда допустимо, но редко):
body
Битрикс – Как добавить стили в шаблон?
В битриксе стили подключаются таким способом:
SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css")?>
Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH – указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:
// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addCss('/path/style.css');
Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additional – Необязательный. По умолчанию “false”. Добавление файлов стилей или js в конец списка ресурсов шаблона.
То есть, для его использования пишем:
Asset::getInstance()->addCss('/path/style.css', true); // или $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css", true);
Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.
Битрикс – Как добавить скрипты в шаблон?
Сначала функция на ядре D7:
// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addJs('/path/main.js');
Старая запись выглядит так и использует $APPLICATION->AddHeadScript:
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/main.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/cookie.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');
$additional – По умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.
А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину
Теперь вы знаете несколько способов подключения своих CSS и JS файлов, знаете про скрытый параметр, а также зачем подключать стили и скрипты именно с использованием API.
Как в битриксе добавить свою строку в head
Очень просто, делается это при помощи:
Как подключить css файл в bitrix?
Есть страничка для которой требуется собственные стили (боди, контейнер и т д), предыдущий разработчик, прописал просто стили в style для index.php, внимание вопрос: как подключить стили к index.php ?
Или как подключить стили в template чтобы они не конфликтовали ?
Или создавать отдельный шаблон ? (стилей не много, страничка простая, типо как 404)
- Вопрос задан более трёх лет назад
- 1619 просмотров
Комментировать
Решения вопроса 1
Алексей Емельянов @babarun Куратор тега 1С-Битрикс
Безумный план моих идей в руках больных людей
addJs('/путь/скрипт.js'); Asset::getInstance()->addCss('/путь/стиль.css'); Asset::getInstance()->addString(''); ?>Ответ написан более трёх лет назад
Как правильно подключать файлы js и css в Битриксе
30 Декабря 2015 Многие забывают, что в системе Битрикс существует настройка сжатия файлов JS и CSS, и чтобы эта функция корректно работала необходимо правильно их подключать.
Подключение с использованием ядра D7
Asset::getInstance()->addJs('/путь/скрипт.js'); Asset::getInstance()->addCss('/путь/стиль.css'); Asset::getInstance()->addString('');
?>
Пояснения для новичков
$APPLICATION или Bitrix\Main\Page\Asset — глобальные объекты. Они доступны после подключения пролога Битрикса. Таким образом мы можете их использовать в любом месте компонента, модуля или шаблона. Но, если вы создаёте отдельную страницу и желаете подключить скрипты или стили которые будут кешироваться и сжиматься, то нужно подключить пролог. Обычная страница index.php будет выглядеть так:
SetPageProperty("title", "Блог"); $APPLICATION->SetTitle("Блог"); use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/js/highlight/styles/github.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/highlight/highlight.pack.js'); ?> . Ваш компонент . НО, это плохая практика подключения стилей и скриптов на странице. Лучшим решением будет подключение в шаблоне компонента в файле component_epilog.php
Устаревший способ
Не рекомендуется вставка нужных строк напрямую в файл header.php, который находится по адресу /bitrix/templates/имя_шаблона/header.php (или /local/templates/имя_шаблона/header.php для D7).
Следует заметить, что в этом случае файлы будут постоянно подключаться при использовании данного шаблона. Бывают случаи, когда необходимо подключать скрипты/стили, лишь на некоторых страницах, например слайдер на главной. Правильно — подгружать файлы стилей и скриптов через метод $APPLICATION->AddHeadScript() и $APPLICATION->SetAdditionalCSS() в header.php. И при необходимости подключения на определенных страницах сайта, добавив их в файл template.php. Данный способ часто используется в шаблонах компонентов подключаемых в различных участках кода.
$APPLICATION->AddHeadScript('/путь/скрипт.js');// для скриптов $APPLICATION->SetAdditionalCSS('/путь/стиль.css'); // для стилей
?>Так же есть еще один способ, который позволяет добавить в
любую строчку. Порой это необходимо при встраивании meta-тегов и скриптов социальных сетей, которым необходимо подключение именно в .AddHeadString('ваш_код',true); ?>