В этом разделе поговорим об архитектуре, иерархии папок и файлов, стартовом шаблоне «Чертоги Фрилансера» v3.0.0 (далее ЧФ)
Разархивировав загруженный шаблон, в корне вы обнаружите следующие файлы и папки:
- Файл package.json – файл, содержащий команды запуска сборщиков, информацию об установленных плагинах и их версиях (можно редактировать по необходимости). А также другую информацию об авторе и версии шаблона.
- Файл gulpfile.js – главный файл сборщика GULP. Содержит подключение различных задач и сценарии их выполнения (можно редактировать по необходимости)
- Файл snnipets.txt – файл со сноппетами, используемыми при работе с шаблоном. Как их добавить к своему редактору описано здесь
- Файл README.txt – краткая информация о работе с шаблоном
- Файл cover.jpg – обложка ЧФ
- Папка config содержит папки и файлы для настройки работы инструментов, а также файлы с отдельными задачами. Подробнее.
- Папка src – содержит исходные файлы и папки проекта. Подробнее.
Содержимое папки config:
- Файл gulp-settings.js – содержит настройки путей для файлов и папок для работы GULP, а также настройки FTP соединения для выгрузки результата на сервер
- Файл gulp-plugins.js – вспомогательный файл, содержащий подключение и экспорт списка общих плагинов для задач GULP
- Файл webpack.dev.js содержит конфигурацию работы WEBPACK в режиме разработчика
- Файл webpack.prod.js – содержит конфигурацию работы WEBPACK в режиме продакшн
- Папка gulp-tasks – содержит файлы отдельных задач GULP
Содержимое папки src:
- Файл favicon.ico – иконка сайта
- Файл index.html -индексная страница-содержание, она не обновляется автоматически при редактировании (по желанию удалить)
- Файл home.html – главная страница сайта (по желанию переименовать в index.html)
- Папка files (пустая) – все файлы этой папки будут скопированы в папку с результатом (dist/files)
- Папка fonts (пустая) – используется для подключения локальных и иконочных шрифтов
- Папка svgicons (пустая) – используется для создания SVG спрайта
- Папка html – содержит .HTM файлы, подключаемые к HTML файлам страниц (например, home.html). Здесь можно создавать свои подключаемые файлы.
- Папка scss – содержит файлы и папки стилей сайта
- Папка js – содержит файлы и папки скриптов сайта
- Папка img – здесь хранятся изображения проекта. Поначалу только кавер-фото шаблона
Содержимое папки src/html:
Файлы этой папки предназначены для подключения к HTML-файлам страниц.
- Файл _header.htm – подготовка для создания шапки сайта. Содержит тег <header> и ограничивающий контейнер. Сначала подключено к home.html
- Файл _footer.htm – подготовка для создания подвала сайта. Содержит тег <footer> и ограничивающий контейнер. Сначала подключено к home.html
- Файл _head.htm – содержит тег <head> внутри которого указаны метатеги, подключена иконка сайта, файл стилей, а также тег <title> с переменной-заголовком. Сначала подключено к home.html
- Файл _js.htm предназначен для подключения общих JS-файлов. Содержит подключение основного файла js/app.min.js из результата. Сначала подключено к home.html
- Файл _popup.htm – подготовка к созданию попапов. Содержит шаблонный закомментированный HTML-код. Первоначально подключен к home.html. Смотри работу с попапами
- Файл _pagging.htm – подготовка к созданию блока постраничной навигации. Содержит шаблонный HTML-код.
- Файл _preloader.htm – содержит HTML CSS и JS функционал прелоадера на сайте
Содержимое папки src/scss:
- Файл style.scss – основной файл стилей. Содержит различные настройки и подключения других файлов. Подробнее…
- Файл home.scss – файл стилей на главной странице. Сначала пуст и подключен к style.scss
- Файл header.scss – файл стиль шапки сайта. Содержит закомментированный код кнопки меню-бургера . Сначала подключен к style.scss
- Файл footer.scss – файл стилей подвала сайта. Сначала пуст и подключен к style.scss
- Файл common.scss – файл стилей для переобщаемых общих блоков конкретного проекта. Сначала пуст и подключен к style.scss
- Файл base.scss – файл базового стиля шаблона ЧФ. Содержит полезные SCSS-шаблоны и закомментированные подключения файлов с базовыми стилями разных модулей.
- Папка libs – содержит файлы полных (заводских) стилей разных модулей и плагинов
- Папка fonts – содержит файл(ы) стилей, связанных со шрифтами. Содержит файл icons.scss для подключения иконочного шрифта. Также, в процессе подключения локальных шрифтов здесь появляется файл fonts.scss
- Папка base – содержит вспомогательные файлы стилей ЧФ, а также файлы с базовыми стилями разных моделей. Для удобства файлы модулей одной группы (например, элементы форм) собраны в отдельные подпапки. Здесь же находится файл с обнуляющими стилями, null.scss
Содержимое папки src/js:
- Файл app.js – основной файл скриптов. Служит для подключения требуемого в проекте функционала и других настроек.
- Папка libs содержит файлы готовых дополнений, как правило, не предусмотренные для редактирования.
- Папка files – содержит файлы разных модулей и другого функционала.
Содержимое папки src/js/files:
- Файл script.js – предназначен для написания кода для проекта. Сначала импортировано в app.js
- Файл functions.js содержит мелкие модули и различный вспомогательный функционал. Сначала импортирован в app.js, но модули закомментированы
- Файл gallery.js содержит подключение плагина и стилей галереи. Сначала импортированный в app.js, закомментированный. При необходимости, в него можно вносить изменения
- Файл sliders.js – включает в себя подключение плагина и стилей слайдера, функционал для автоматического добавления классов, код для создания конкретных слайдеров. Сначала импортированный в app.js, закомментированный.
- Файл tippy.js – включает в себя подключение плагина и стилей плагина подсказок. Сначала импортированный в app.js, закомментированный.
- Файл map.js (в работе) содержит шаблонный код для реализации функционала карт.
- Файл modules.js – вспомогательный файл для работы ЧФ.
- Папка forms – содержит файлы модулей для работы с формами.
- Папка scroll – содержит модули для работы с прокруткой сайта.