Junior Шаблоны сайта Обязательно

Подключение CSS и JS: Asset API

Все стили и скрипты подключаются через класс Bitrix\Main\Page\Asset, который автоматически версионирует пути по времени изменения файла для сброса кеша браузера. В шаблонах компонентов дополнительные ассеты подключаются через методы $this->addExternalCss() и $this->addExternalJs(), сохраняясь в кеше компонента.

1 разработчик прошёл

Прогресс хранится в этом браузере. Войдите, чтобы сохранить его в аккаунте.

Что нужно понимать

  • 1
    Bitrix\Main\Page\Asset
  • 2
    Порядок подключения и объединение файлов
  • 3
    Версионирование статики
  • 4
    Статика в шаблоне компонента

Материалы

Официальная документация

Проверь себя

После деплоя заказчик видит старые стили, а после Ctrl+F5 — новые. Где причина?

Файл подключён тегом link напрямую, без версии в URL. При подключении через Asset::addCss() ядро само добавляет к пути хвост из времени изменения и размера файла (CUtil::GetAdditionalFileURL), и URL меняется после каждой правки.

Зачем ставить $APPLICATION->ShowHead() выше любого своего script в header.php?

ShowHead() выводит CSS, ядро BX и скрипты, накопленные через Asset. Инлайновый скрипт выше него выполнится раньше ядра, и BX или BX.ready там ещё не существуют.

Чем addExternalCss() в template.php отличается от прямого Asset::addCss()?

addExternalCss() и addExternalJs() шаблона компонента запоминают путь в данных шаблона, которые уходят в кеш вместе с HTML, и на закешированном хите ядро подключит файл снова. Прямой вызов Asset при кешировании не выполняется, и файл пропадёт со второго открытия страницы.

Включили объединение CSS в настройках главного модуля, а часть стилей выпала из общего файла. Какие?

В сборку /bitrix/cache/css/ попадают только файлы, зарегистрированные через Asset: addCss, SetAdditionalCSS, style.css шаблонов компонентов. Теги link, написанные руками в header.php, ядро не видит и не объединяет.

Не сходится?

Спросите ассистента BXMax: он знает документацию и материалы сайта по этой теме.

Знаете материал лучше?

Предложите ссылку: после проверки она появится в этом разделе.

Войти, чтобы предложить
Поделиться в Telegram
Мы используем файлы cookie для улучшения работы сайта. Продолжая использовать сайт, вы соглашаетесь с нашей политикой конфиденциальности.
AI Домовой

AI Домовой История

на связи

пишет…
Нет истории чатов
AI Домовой

Нужна авторизация

Войдите, чтобы задавать вопросы AI Домовому.

Войти