Что такое компонент?
Компонент — это отдельный самодостаточный объект со своим собственным HTML/SCSS/JS кодом, который может использоваться и использовать в проекте. Размер компонента может быть как очень мал, например одна кнопка, так и очень велик – табы, спойлеры, модальные окна и т.д.
В стартовом шаблоне «Чертоги Фрилансера» 4 (далее ЧФ4) реализован полный компонентный подход к разработке, а также «горячее» подключение компонентов в проект.
Дополнительно, для тех или иных компонентов, реализована система плагинов, тоже оснащенных «горячим» подключением.
Компоненты находятся в папке src/components. И разбиты на несколько групп согласно своему типу:
- custom – папка для размещения собственных компонентов
- effects – компоненты для добавления определенных эффектов (анимаций) в проект
- forms – компоненты для работы с HTML-формами и их элементами
- layout – компоненты разных частей сайта, содержит также шаблоны страниц
- wordpress – содержит файлы и папки для разработки под CMS WordPress
Использование компонентов
В ЧФ4 было достигнуто минимальное вмешательство в JavaScript при работе с шаблоном, поэтому для того чтобы подключить тот или иной компонент в проект достаточно добавить определенный HTML-код, чаще всего это дата-атрибут, состоящий из data-fls-имя папки компонента.
ЧФ4 распознает этот код и автоматически подключит JS-файл и стили из соответствующей папки компонента.
Например, для добавления компонента табов в проект, мы используем HTML-структуру, содержащую дата-атрибут data-fls-tabs:
<div data-fls-tabs class="tabs">...</div>
А если там нужно использовать функционал «Динамического адаптива», то пользуемся соответствующим дата-атрибутом data-fls-dynamic=»…» и т.д.
Как правильно использовать тот или иной компонент ЧФ4 подробно описано всоответствующей документации компонента
Использование плагинов
Случается, что у определенного компонента есть или могут появиться дополнительные небольшие возможности JS/SCSS, поэтому в ЧФ4 разработана система плагинов для компонентов.
К примеру, компонент «Header» сам по себе не содержит никакого JS-функционала, и используется для вывода HTML-структуры и стилизации шапки сайта.
Но, согласно задаче, бывает, что необходимо добавить определенные эффекты к шапке в зависимости от скрола сайта. Для этого существует плагин scroll, который находится в папке plugins папки компонента.
Соответственно, для подключения данного плагина мы должны использовать дата-атрибут data-fls-header-scroll:
<header data-fls-header data-fls-header-scroll class="header">...</header>
При использовании плагинов учитывается, что они используются в качестве дополнения к компоненту и не используются отдельно.
Создание и использование собственных компонентов и плагинов
У ЧФ4 есть возможность создания собственных компонентов и плагинов с последующим использованием их в проекте.
Для создания собственных плагинов и компонентов выполните следующие действия:
Для собственного компонента
- Создайте папку компонента в src/component/custom/, назвав ее именем вашего компонента
- Создайте HTML/SCSS/JS файлы компонента с тем же именем, что и папка вашего компонента. Если ваш компонент не использует HTML или SCSS или JS код, то соответствующие файлы создавать не обязательно.
- Если вы создали и планируете использовать SCSS-файл стилей, то его необходимо подключить в JS-файл (если он есть) с помощью import ‘./имя компонента.scss’ или в HTML-файл: <link rel=»stylesheet» href=»@components/custom/имя компонента/имя>
Внимание!Для быстрого создания базовых файлов собственного компонента в папке src/component/custom вы можете воспользоваться командой npm run add имя компонента.
Имя должно быть латиницей без пробелов цифр и символов.
После выполнения в папке src/component/custom/имя компонента будут созданы HTML, SCSS и JS файлы компонента. В JS-файле уже будет подключен SCSS-файл
Для собственного плагина
- Создайте папку плагина в src/component/custom/имя компонента/plugins, назвав ее именем вашего плагина
- Создайте HTML/SCSS/JS файлы плагина с тем же именем, что и папка вашего плагина. Если ваш плагин не использует HTML или SCSS или JS код, то соответствующие файлы создавать не обязательно.
- Если вы создали и планируете использовать SCSS-файл стилей, то его необходимо подключить в JS-файл (если он есть) с помощью import ‘./имя плагина.scss’ или в HTML-файл: <link rel=»stylesheet» href=»@components/custom/имя компонента/’plug плагина.scss»>
Для использования собственных компонентов и плагинов выполните следующие действия:
Для использования собственного компонента
- Если ваш компонент содержит JS-файл, то для его автоматического («горячего») подключения в проект добавьте в ваш HTML код дата-атрибут состоящий из data-fls-имя папки вашего компонента. Например, вы создали компонент «aside», поэтому для его подключения дата-атрибут будет выглядеть как data-fls-aside
- Если ваш компонент содержит HTML-файл, который необходимо подключать к проекту, делайте это с помощью <include>
- Если ваш компонент содержит SCSS-файл, он подключится вместе с файлом компонента способом, соответствующим тому как именно вы создали компонент
Для использования собственного плагина
- Если ваш плагин содержит JS-файл, то для его автоматического («горячего») подключения в проект добавьте в ваш HTML код дата-атрибут состоящий из data-fls-имя папки вашего компонента-имя папки вашего плагина. Например, вы создали плагин «move» компонента «aside», поэтому для его подключения дата-атрибут будет выглядеть как data-fls-aside-move
- Если ваш плагин содержит HTML-файл, который необходимо подключать к проекту, делайте это с помощью <include>
- Если ваш плагин содержит SCSS-файл, он подключится вместе с файлом плагина таким образом, как вы создали плагин.
Страница удобной разработки компонентов
Если вы разрабатываете компоненты перед их использованием, в ЧФ4 присутствует отдельная страница для удобного вывода компонентов и их разработки.
Эта страница не попадает в собранный проект (режим продакшн) и служит только для удобства работы с компонентами
Для отображения страницы в панели разработки укажите параметр devcomponents -> enable: true в настройках ЧФ4