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");?>
Как подключить css файл в bitrix?
Есть страничка для которой требуется собственные стили (боди, контейнер и т д), предыдущий разработчик, прописал просто стили в style для index.php, внимание вопрос: как подключить стили к index.php ?
Или как подключить стили в template чтобы они не конфликтовали ?
Или создавать отдельный шаблон ? (стилей не много, страничка простая, типо как 404)
- Вопрос задан более трёх лет назад
- 1567 просмотров
Комментировать
Решения вопроса 1
Алексей Емельянов @babarun Куратор тега 1С-Битрикс
Безумный план моих идей в руках больных людей
addJs('/путь/скрипт.js'); Asset::getInstance()->addCss('/путь/стиль.css'); Asset::getInstance()->addString(''); ?>Ответ написан более трёх лет назад
Битрикс – Как правильно подключать 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 файл, к определённой странице.
Классы к которым будут применяться css свойства, используются и на других страницах, поэтому важно, чтобы css отрабатывал только на одной странице.
Изменить классы нет возможности, как и нет возможности подключить css файл в header.php
1) Как можно реализовать эту задачу?
2) Как можно для конкретной страницы подключить другой header.php в котором уже будет подключён этот файл?
3) Как прописать условие, на php? Если страница такая, подгружается такой-то css файл, иначе всё как обычно.
Сообщений: 407 Баллов: 61 Регистрация: 08.10.2014
26.04.2018 15:05:08
Ну так добавьте стиль именно на нужную вам страницу
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 15:29:16
тест меседж
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 16:47:01
Посмотрел, но не понял, где это нужно прописать? Можно подробнее?
Как задать страницу то?
Шаблон для всех страниц общий.
Если я там пропишу:
SetAdditionalCSS("/bitrix/templates/demo/additional.css"); ?>
то вероятно он будет использоваться для всех страниц
Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 17:21:30
А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 20:06:26
| Цитата |
|---|
| Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить |
И для кого я всё расписываю..
Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 22:13:43
| Цитата |
|---|
| Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить |
Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?
if($APPLICATION->GetCurPage() == 'path/to/need/page') $APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 22:29:11
| Цитата |
|---|
| Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить |
Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?
if ( $APPLICATION ->GetCurPage() == 'path/to/need/page' ) $APPLICATION ->SetAdditionalCSS( "/bitrix/templates/demo/additional.css" );
Во-первых — да
Во-вторых — спасибо!)))
Только видимо условие дописано не до конца, как правильно закончить будет?
Типа если стр такая, то подгрузит этот css, иначе подгружаем обычный.
А то он опять на всех страницах отрабатывает почему-то.
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 23:19:31
Я в битриксе 0, так что буду описывать всё что сделал. В head вставил строки
GetCurPage() == 'http://site.ru/salut_speceffecti/nazemnye-feyerverki/'); $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); ?>
Файл css подгрузился
Но и работает для всех страниц..
Постоянный посетитель
Сообщений: 94 Баллов: 19 Регистрация: 20.09.2016
26.04.2018 23:29:32
GetCurPage() == '/salut_speceffecti/nazemnye-feyerverki/') < $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); > ?>
Страницы: 1 2 След.
Центр поддержки
Продукты
Управление сайтом
Битрикс24
Интернет-магазин + CRM
Решения
Для интернет-магазинов
Каталог готовых решений
Внедрение
Выбрать партнера
Проверить партнера
Стать партнером
1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507
© 2001-2024 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности