1С-Битрикс: правильно подключаем файлы CSS и JS
Профессиональный и серьезный сайт всегда требует профессионального и серьезного подхода к его разработке. Разделы и страницы могут существенно отличаться друг от друга как по внешнему виду, так и по функционалу. Эта, казалось бы, очевидная истина требует не всегда очевидного подхода. Попробуем разобраться, какие механизмы предлагает CMS «1С-Битрикс: управление сайтом».
При разработке сайта мы часто используем альтернативные механизмы представления контента. Это могут быть, например, слайдеры изображений, фотогалереи и многое другое. Подобные решения существуют в готовом виде. Мы, например, любим пользоваться jQuery-плагином Owl Carousel для создания слайдеров и каруселей. В комплекте этого бесплатного плагина идут файлы CSS и JS, которые необходимо подключать дополнительно, чтобы все работало должным образом. Более того, помимо комплектных файлов Owl Carousel требует инициализации, она указывает, какие элементы страницы должны отображаться как слайдер или карусель.
Очевидным решением было бы подключить все необходимые файлы в шаблоне сайта, чтобы они были доступны на любой странице проекта. Это нехорошо и неправильно. Ведь если какая-то из страниц не предполагает наличия слайдера или карусели, то и подключать их на этой странице совершенно незачем. Для таких случаев CMS «1С-Битрикс: управление сайтом» предлагает механизмы их подключения либо на отдельных страницах, либо даже в коде компонентов.
Это, на наш взгляд, правильный подход. К примеру, если в какой-то момент нужда в одном из компонентов на странице отпадает, мы удаляем данный компонент со страницы, и он «забирает» с собой все свои файлы CSS и JS, облегчая таким образом страницу, на которой он «жил». И наоборот, если на какой-либо странице такой компонент становится надобен, мы размещаем этот компонент в коде данной страницы, и он автоматически «подтягивает» все, что ему необходимо для работы.
Вы будете смеяться, но после такого долгого предисловия решение выглядит предельно просто.
Итак, первым делом размещаем в папке с шаблоном вашего сайта все необходимые файлы CSS и JS. Условно назовем их style.css и script.js. Чтобы не превращать папку в хаотичную свалку файлов, разместим эти файлы в подкаталогах соответственно /css/ и /js/. В нужном месте подключим их.
Если вам необходимо подключить их на физической странице сайта, то вносить изменения будем в «шапке» этой страницы. Через административную панель откроем данную страницу и будем редактировать ее как PHP-код. Для примера используем классический дефолтный шаблон «Битрикса» — «Мебельную компанию». И разместим на главной странице данного решения нужный нам код.
Найдем файл index.php в корне сайта, кликнем по «гамбургеру» слева от нее и в выпадающем меню выберем пункт «Редактировать как PHP».
В «шапке» на странице подключим эти файлы, указав их местоположение. До нашего вмешательства нужный нам участок кода выглядел так:
SetTitle("Мебельная компания"); ?>
После нашего вмешательства получаем вот такую конструкцию:
SetTitle("Мебельная компания"); $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css"); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/script.js"); ?>
Собственно говоря, на этом наша миссия завершена. Теперь на данной странице доступны необходимые нам скрипты и стили.
Теперь рассмотрим вариант, когда нам нужно подключить стили и скрипты в компоненте. За образец возьмем шаблон комплексного компонента «Новости». Подключим наши скрипты и стили тоже в самом верху. Вот что было до:
setFrameMode(true); ?>
Вот что стало после:
setFrameMode(true); $this->addExternalCss(SITE_TEMPLATE_PATH."/css/style.css"); $this->addExternalJS(SITE_TEMPLATE_PATH."/js/script.js"); ?>
Подытожим. Для подключения файлов CSS и JS на физической странице используется следующая конструкция:
SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css");?>
Если же подключение производится в коде компонента, то делаем это следующим образом:
addExternalCss(SITE_TEMPLATE_PATH."/css/style.css");?> addExternalJS(SITE_TEMPLATE_PATH."/js/script.js");?>
Правильное подключение стилей и скриптов в Битрикс
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Для чего подключать скрипты и js через API
Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида
Для стилей Для js файлов Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс
До выхода нового ядра D7
// Для подключения скриптов $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" ); // Подключение css $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true); // Подключение мета тегов или сторонних файлов $APPLICATION->AddHeadString("name=''"); Подключение стилей и скриптов с 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("");По условиям обратной совместимости, использовать можно оба метода- оба способа работают правильно и принципиальной разницы не имеют
Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы
Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.
Самое главное, вы сможете подключать необходимые файлы в «объединение» по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта
Подключение стилей и js в шаблонах компонентов
Если нужно подключить стили и скрипты, внутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто воспользуйтесь такой конструкцией:
$this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/liba.js"); Кроме того. Внутри ядра 1С-Битрикс есть вспомогательные скрипты и библиотеки: jQuery, Vue, font-awesome итд. Например, четвертый bootstrap можно подключить так:
\Bitrix\Main\UI\Extension::load(«ui.bootstrap4»);
Как подключить CSS и JS файлы к шаблону 1С Битрикс
Для подключения стилей к странице сайта обычно используется следующий код:
Особенности оптимизации стилей и скриптов в 1С Битрикс
Однако в 1С Битрикс есть ряд особенностей работы с подключаемыми файлами стилей и javascript сценариев, например сжатие таких файлов или автоматический перенос их вконец страницы, для более быстрой её отрисовки. Эти опции можно включить в настройках главного модуля (Настройки -> Настройки продукта -> Настройки модулей -> Главный модуль), в блоке «Оптимизация CSS».
- Объединять CSS файлы — создаётся виртуальный файл со всеми стилями на странице
- Объединять JS файлы — создаётся виртуальный файл всех js сценариев на странице
- Подключать минифицированные версии CSS и JS файлов — если в шаблонах компонентов есть файлы style.min.css и script.min.js система подключит их
- Переместить весь Javascript в конец страницы — перед отдачей страницы сайта браузеру, все js скрипты будут перемещены вниз страницы как требует Google, с опцией надо быть осторожнее, иногда приводит к ошибке потери контекста вызова
- Создавать сжатую копию объединённых CSS и JS файлов — те виртуальные файлы которые создаются благодаря первым двум пунктам ужимаются, обычно удаляются переносы строк и лишние пробелы, где это возможно
Подключение css и js в старом ядре
В старом ядре для этого использовался объект $APPLICATION доступный в любой части сайта. В данном случае, в файле header.php вашего шалона, необходимо было вызвать следующий код:
SetAdditionalCss(SITE_TEMPLATE_PATH . "/css/styles.css"); //Для подключения скриптов $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/ja/script.js'); //Для подключения внешних скриптов и стилей, например Google Fonts $APPLICATION->AddHeadString("", true); Подключение css и js ядро D7
Если вы используете более новое ядро D7, то для подключения скриптов и стилей, используется следующий код:
addCss(SITE_TEMPLATE_PATH . "/css/styles.css"); //Для подключения скриптов Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/fix.js"); //Для подключения внешних скриптов и стилей, например Google Fonts Asset::getInstance()->addString(""); В целом то же самое, но задействованы более современные методы. Вполне возможно вскоре $APPLICATION станет недоступным объектом.
Подключение стилей и скриптов в шаблоне компонента
Вообще так делать не рекомендуется, т.к. это может усложнить понимание кода программистом, который будет поддерживать сайт после вас. В среде разработчиков 1С Битрикс принято выносить общие стили и скрипты в соответствующие файлы в папке шаблона сайта, а уникальные стили и скрипты оставлять в файлах style.css и script.js в папке шаблона компонента. Они будут подключаться автоматически. Но если всё же приспичит, то подключить в шаблон их можно вот так:
addExternalCss(SITE_TEMPLATE_PATH . "/css/template_styles.css"); $this->addExternalJS(SITE_TEMPLATE_PATH . "/js/template_script.js"); Это всё, что следует знать новичку о работе со сторонними файлами стилей и скриптов в 1С Битрикс. Пишите код понятно и правильно, желаю удачи!
Как подключить css и js в битрикс?
На локальном сервере(Open Server) сайт выглядит так как нужно, но когда я подключаю html шаблон к bitrix(через WinSCP), то все стили пропадают.
Как это исправить?
Вот как выглядит на локальном сервере:
Вот как выглядит на битрикс:
- Вопрос задан более трёх лет назад
- 299 просмотров
1 комментарий
Простой 1 комментарий
Пройдите курс https://academy.1c-bitrix.ru/training/course/5862/ . Уровень того что вы спрашиваете, находится на очень базовом уровне. Это показываете что с фреймворком вы не работали ранее.
Примерно тоже самое, что по первой ссылке можно найти тут https://dev.1c-bitrix.ru/learning/course/index.php. .
Так же советую ознакомиться с этим https://dev.1c-bitrix.ru/api_help/main/general/pag. . Если собираетесь работать с фреймворком в дальнейшем, то эта информация 100% пригодится.
Решения вопроса 0
Ответы на вопрос 1
занимаюсь разработкой сайтов на 1c-bitrix
Чтобы подключить css используйте:
Bitrix\Main\Page\Asset::getInstance()->addCss("/path/to/css/style.css");Чтобы подключить js используйте:
Bitrix\Main\Page\Asset::getInstance()->addJs("/path/to/js/script.js");В чем именно проблема в вашем коде, сказать сложно. Нужно смотреть код, а не скрины.