Bitrix добавить css файл
Наш модуль после установки добавляет на страницы сайта кнопку плавной прокрутки страницы вверх. Какие файлы и папки могут и должны быть, можно изучить в соответствующем разделе документации Битрикс. Модуль разместим в директории local/modules и создадим такую файловую структуру:
Как видите, внутри local/modules/scrollup у нас:
- install — набор скриптов для установки и удаления модуля;
- lang — набор языковых файлов модуля;
- lib — набор файлов, в которых реализуется логика решения;
- include.php — файл, подключаемый при вызове модуля в коде;
- options.php — страница настроек, подключаемая в административной части.
Рассмотрим подробнее папку install :
- assets — содержит JavaScript и CSS кнопки, которые будут подключаться в пользовательской части;
- index.php — файл, в котором содержится описание модуля и реализуется его установка и удаление;
- step.php и unstep.php — соответственно шаги установки и удаления, их может быть несколько;
- version.php — файл содержит версию и время обновления нашего модуля.
Теперь нам нужно написать класс, в котором будет реализована установка и удаление модуля. Имя класса должно совпадать с директорией модуля и являться наследником от CModule . Метод doInstall() вызывается при установке модуля из панели управления, метод doUninstall() — при деинсталляции модуля. Метод doInstall() подключает файл step.php , а метод doUninstall() — файл unstep.php
Теперь в панели управления на странице «Настройки • Настройки продукта • Модули» мы видим наш модуль:
И можем установить его:
Создадим страницу настроек для модуля. Через панель управления контент менеджер сможет:
- Включать/выключать модуль;
- Подключать библиотеку jQuery, если она еще не подключена;
- Изменять ширину/высоту/радиус и цвет кнопки;
- Менять положение кнопки и скорость анимации.
Когда мы описывали код установки модуля, то привязались к событию OnBeforeEndBufferContent и указали метод appendJavaScriptAndCSS() класса Main как обработчик. Теперь настало время его написать:
Осталось только написать js-код для прокрутки страницы наверх и задать css-стили для кнопки:
Дополнительно
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте "1С-Битрикс". .
Курс для разработчиков - продолжение линейки учебных курсов по Bitrix Framework. Получение сертификата по курсу рекомендуется после успешной сдачи тестов по всей линейке курсов, так как без понятия о работе Контент-менеджера и Администратора создание успешных сайтов будет затруднено.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
- Интерфейс программы - в главе Элементы управления курса Контент-менеджер.
- Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
- Информационные блоки - в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
- Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
- Работа с инструментами системы - в главе Работа с инструментами курса Администратор. Базовый.
- Модуль Поиск - в главе Поиск курса Администратор. Базовый.
- Вся информация по администрированию модулей размещена в курсах:
-
- модули "1С-Битрикс: Управление сайтом" - модули "1С-Битрикс: Управление сайтом", связанные с коммерческой деятельностью в Интернете. - модули "1С-Битрикс: Корпоративный портал"
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
- Junior сможет создавать простые сайты работая со штатными компонентами и модифицируя их шаблоны.
- Middle разработчик может работать с API Bitrix Framework.
- Senior умеет работать над производительностью и безопасностью сайтов, создавать свои модули и компоненты.
Примечание: Такое построение удобно для пошагового изучения принципов работы Bitrix Framework. По этому же принципу построены и тесты. Но такая структура не очень удобна для использования содержания курса как постоянного источника информации. Что бы переключить курс в режим Справочника, воспользуйтесь переключателем в верхнем правом углу шапки курса.
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
- основами PHP, баз данных;
- основами HTML, CSS.
У нас часто спрашивают, сколько нужно заплатить
Курс полностью бесплатен. Изучение курса, прохождение итоговых тестов и получение сертификатов - ничего из этого оплачивать не нужно.
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
В конце каждого урока есть кнопка Прочитано! . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:
уроке.
Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат - это если общее число набранных Вами баллов отличается от максимального на 1-2%.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания офлайн
Если данный курс берётся в качестве основы для офлайнового преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла - от 10.03.2022.
Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс
Пример на моем сайте
При верстке своего сайта я использовал 5 javascript файлов: фансибокс, табы, карусель контента. В исходной html верстке это выглядело так
Для того, что бы при интеграции с битрикс, автоматически, все эти файлы объеденились в один, сжались и вывелись в head шаблона достаточно подключить их вот так
Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов.
После этого все ваши js файлы объединяться и сожмутся, что значительно ускорит работу сайта, подгрузку js да и поисковые системы будут рады.
PS: Точно так же, можно объединять подключаемые файлы стилей
Мои каналы:
Каналы на которые я выкладываю видео. Контент дублируется, смотрите где удобнее.
Почему то все скрипты начинают срабатывать дважды
А если отключаете свой
Не сразу заметил, у вас там ";" лишняя вроде бы, если смайлик не врет
Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.
Css файлы объединил в один через
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/bootstrap.css" ;
JS файлы так же $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/bootstrap.min.js" ;
На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.
Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом / не помогло тоже кешь сбрасывал и отключал ничего не помогает.
Надеюсь на вашу помощь и хочу сразу сказать если даже не сможете помочь всё равно спасибо за все ваши труды и информацию что вы предоставляете.
Михаил, вообщем я нашёл для себя единственное и по моему правильное решение это подключать эти шрифты отдельным файлом и объединить в один через SetAdditionalCSS это так работает и думаю что правильно но почему не работает когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.
Все файлы шаблонов хранятся в директории /bitrix/templates/ или /local/templates/ , для каждого шаблона — отдельная директория. Список всех шаблонов, доступных для использования, можно посмотреть в панели управления: Настройки • Настройки продукта • Сайты • Шаблоны сайтов.
Битрикс рекомендует следующую структуру для директории каждого шаблона:
- каталог images — для картинок шаблона
- каталог include_areas — для включаемых файлов
- каталог page_templates — для образцов включаемых областей
- файл header.php — часть шаблона до контента
- файл footer.php — часть шаблона после контента
- файл description.php — название и описание шаблона
- файл .styles.php — описания стилей для визуального редактора страниц
- файл template_styles.css — стили для шаблона сайта, кроме основого контента
- файл styles.css — стили для основого контента и включаемых областей
- файл screen.jpg — скриншот шаблона
Но это необязательно, можно делать, как удобнее. Итак, наш шаблон имеет вид:
Создаем в директории /local/templates директорию example , а внутри нее — три каталога и четыре файла:
- css — для файлов стилей
- js — для файлов скриптов
- img — для файлов изображений
- description.php — описание шаблона
- header.php — шапка сайта
- footer.php — подвал сайта
- screen.jpg — скриншот
В файле description.php задаем название и описание шаблона (показываются в панели управления, в списке шаблонов):
Для файла header.php вырезаем из исходного html-файла все, что выше заголовка , с которого начинается основной контент. Подключаем css и js файлы, заменяем пути к файлам изображений с помощью константы SITE_TEMPLATE_PATH :
Для файла footer.php вырезаем из исходного html-файла все, что ниже основного контента. У нас контент заканчивается перед :
Все, что осталось от исходного html-файла, помещаем в файл index.php в корне сервера:
Наконец, можем посмотреть, что получилось — для этого надо подключить шаблон к сайту. В панели управления: Настройки • Настройки продукта • Сайты, выбираем наш сайт (чаще всего там один-единственный сайт s1 ), далее выбираем наш шаблон.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Подключение стилей и js в шаблонах компонентов
Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией
Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат
Мои каналы:
Каналы на которые я выкладываю видео. Контент дублируется, смотрите где удобнее.
Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.
Данная возможность позволяет автоматически, без заморочек объеденить весь javascript в один файл
Для чего подключать скрипты и js через API
Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида
Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс
До выхода нового ядра D7
Подключение стилей и скриптов с D7:
По условиям обратной совместимости, использовать можно оба метода. Лично я предпочитаю подключать по старинке, без использования D7- но оба способа работают правильно и принципиальной разницы не имеют
Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы
Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.
Самое главное, вы сможете подключать необходимые файлы в "объединение" по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта
Читайте также: