В этом разделе поговорим об архитектуре, иерархии папок и файлов, стартовом шаблоне «Чертоги Фрилансера» 4 (далее ЧФ4)
Разархивировав сборку, в корне вы обнаружите следующие файлы и папки:
- Папка src – содержит производные файлы и папки проекта. Именно здесь работает разработчик
- Файл template.config.js , содержащий пользовательские настройки ЧФ4
- Файл README.txt – важная краткая информация об использовании ЧФ4
- Файл cover.jpg – обложка ЧФ4
- Файл package.json , содержит команды запуска сборщиков, информацию об установленных плагинах и их версиях. А также другую информацию об авторе и версии сборника. Не рекомендуется редактировать без соответствующих знаний
- Файл docker-compose.yml , содержит инструкции по установке и запуску сервера в режиме fullstack для работы с CMS WordPress . Не рекомендуется редактировать без соответствующих знаний
- Папка template_modules содержит функционал сборки. Не рекомендуется редактировать
- Файл vite.config.js содержит инструкции для работы системы VITE Не рекомендуется редактировать.
- При первом запуске любого режима появится папка .vscode , которая будет содержать настройки редактора и сниппеты (если это разрешено в настройках ЧФ4)
- При первом запуске команды npm run zip появится папка zip , которая будет содержать zip-архив конечных файлов проекта
- При первом запуске режима fullstack (npm run wp, npm run wpbuild) появится папка backend , содержащая папки wordpress и database . Не рекомендуется редактировать без соответствующих знаний
- После установки также появятся автоматически папка node_modules и файл package-lock.json . Не редактировать
Содержимое папки src:
- Файл index.html — индексная (главная) страница разрабатываемого проекта
- Папка assets – используется для хранения медиа-файлов проекта – изображений, шрифтов, иконок и т.п.
- Папка styles – содержит общие файлы столов проекта
- Папка js — содержит общие файлы скриптов проекта, а также папки и файлы библиотек и фреймворков
- Папка pug – содержит файлы для работы с препроцессором PUG
- Папка php — содержит PHP-компоненты и является главной папкой PHP-сервера, если такая настройка включена
- Папка files (пустая) – все файлы этой папки будут скопированы в папку с результатом (dist/files)
- Папка components — содержит все HTML/CSS/SCSS/JS компоненты ЧФ4 , а также тему для CMS WordPress, шаблоны HTML-страниц и их главный контент
Содержимое папки src/components:
Содержит все HTML/CSS/SCSS/JS компоненты ЧФ4, а также тему для CMS WordPress, шаблоны HTML-страниц и их главный контент
- Папка custom (пустая) – здесь можно создавать собственные компоненты
- Папка wordpress – содержит тему для CMS WordPress, плагин и вспомогательные файлы. Используется для разработки интерфейса под CMS WordPress в режиме fullstack (npm run wp, npm run wpbuild)
- fls-theme – тема для CMS WordPress
- fls-plugin – собственный плагин для CMS WordPress
- JS-файлы – вспомогательные файлы, не редактировать, не удалять
- Папка templates – содержит шаблоны HTML-страниц, можно добавлять свои
- Папка main – содержит HTML/SCSS/JS файлы основного HTML-шаблона проекта
- Папка projectpage – содержит HTML-шаблон страницы проекта
- Папка pages — содержит HTML/SCSS/JS файлы основного контента
- Папка home содержит HTML/SCSS/JS файлы основного контента интексной (главной) страницы проекта
- Папка effects — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект различные эффекты. Можно добавлять свои
- Папка forms — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект разнообразный функционал для работы с формами и их элементами. Можно добавлять свои
- Папка layout — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект различные части интерфейса. Можно добавлять свои
Дополнительно папки компонентов могут содержать папки и файлы плагинов конкретного компонента, например src/components/layout/header/plugins/scroll
Содержимое папки src/assets:
- Папка fonts (пустая) – используется для конвертации и добавления локальных шрифтов в проект.
- Папка img – используется для хранения и использования изображений. Содержит файл favicon.ico, который подключен к HTML-страницам (заменяем на свой).
- Папка svgicons (пустая) — используется для конвертации и добавления в проект иконочного шрифта и/или спрайта
Содержимое папки src/styles:
- Файл style.scss – главный файл стилей, который подключается ко всем HTML-страницам.
- Файл settings.scss – файл настроек общих значений стилей проекта
- Папка fonts — содержит автоматически заполняемые при запуске любого режима CSS-файлы стилей подключения локальных и иконочного шрифтов.
- Папка includes – содержит общие CSS/SCSS-файлы столов
- Файл index.scss — а автоматически подключается к каждому SCSS-файлу проекта и содержит подключение настроек, SCSS миксинов и шаблонов. Можно подключать свои
- Файл extends.scss – содержит набор SCSS-шаблонов. Можно добавлять свои
- Файл mixins.scss – содержит набор SCSS-миксинов. Можно добавлять свои
- Файл spritemap.scss – содержит SCSS-миксин для работы с SVG-спрайтом. Заполняется автоматически
- Папка libs — содержит а втоматически подключаемые к HTML-страницам CSS-файлы
- Файл reset.css — а автоматически подключается к каждой HTML-страницы, если не используется другая CSS-библиотека/фреймворк
- Файл tailwind.css — а автоматически подключается к каждой HTML-страницы, если использование указано в настройках ЧФ4
Содержимое папки src/js:
- Файл app.js (пустой) – основной файл, общих для всего проекта, скриптов. Подключается к каждой HTML-странице
- Папка common – содержит файлы общих скриптов
- Файл functions.js – содержит полезные функции, используемые в компонентах ЧФ4
- Папка react – содержит стартовые файлы и папки для работы с React
- Папка vue – содержит стартовые файлы и папки для работы с Vue