В сборнике «Чертоги Фрилансера» 4 интегрированы широкие возможности работы с HTML-файлами, которые, по желанию, можно использовать при разработке того или иного проекта.
Подключение отдельных HTML-файлов
В процессе разработки HTML-конструкций часто возникают ситуации, когда есть необходимость переиспользовать тот или иной отрезок кода в разных местах, особенно учитывая компонентный подход ЧФ4.
Для решения этих задач встроен функционал «Вставка» (include).
<include src=»путь к HTML-файлу»></include>
Давайте рассмотрим этот функционал на простом примере блоков <head>, <header> и <footer> проекта, которые должны быть подключены на всех страницах HTML:
<!doctype html><html lang=»en»> <!— подключение head —> <include src=»@components/layout/head/head.html»></include><body><div class=»wrapper»><!— подключение header —><include src=»@components/layout/header/head> <!— контент страницы —> </main><!— подключение footer —><include src=»@components/layout/footer/footer.html»></include></div><script type=»module» src=»@js/app.js»></script></body></html>
Таким образом, изменяя файл компонента, например header.html, изменения произойдут по всему сайту, где этот компонент подключен.
Использование HTML-шаблонов
Для более сложных и больших проектов будет удобно использовать HTML-шаблоны (templates). Сохраняются шаблоны в папке src/components/templates. Конечно, можно добавлять свои.
Давайте рассмотрим пример когда на сайте есть разные структуры – на главной странице и еще нескольких нет боковой панели, а еще на нескольких есть. Соответственно, мы можем подготовить и затем использовать различные структурные шаблоны.
Вот пример шаблона main.html:
<!doctype html><html lang=»en»><include src=»@components/layout/head/head.html»></include><link rel=»stylesheet» href=»@components/templates/main/main.scss»><body><div class=»wrapper»><block name=»header»></block><block name=»main»></block><block name=»footer»></block> </div> <block name=»popup»></block><script type=»module» src=»@js/app.js»></script></body></html>
Вот пример шаблона inner.html:
<!doctype html><html lang=»en»><include src=»@components/layout/head/head.html»></include><link rel=»stylesheet» href=»@components/templates/inner/inner.scss»><body><div class=»wrapper»><block name=»header»></block><div class=»inner»><block name=»main»></block><block name=»aside»></block></div><block name=»footer»></block></div><block name=»popup»></block><script type=»module» src=»@js/app.js»></script></body></html>
Мы видим, что структура этих шаблонов отличается и к каждому подключен свой уникальный файл стилей.
<block name=»имя блока»> — это ячейка, в которую мы можем «вкладывать» нужный контент.
Вот пример главной страницы (index.html), которая использует шаблон «main.html»:
<template src=»@components/templates/main/main.html»><block name=»header»><include src=»@components/layout/header/header.html»></include></block><block name=»main»><include src=»@components/pages/home/home.html»></include></block><block name=»footer»><include src=»@components/layout/footer/footer.html»></include></block><block name=»popup»></block></template>
А вот пример внутренней страницы (contacts.html) строящейся по шаблону «inner.html»:
<template src=»@components/templates/inner/inner.html»><block name=»header»><include src=»@components/layout/header/header.html»></include></block><div class=»inner»><block name=»main»><include src=»@components/pages/contacts/contacts.html»></include></block><block name=»aside»><include src=»@components/layout/aside/aside.html»></include></block></div><block name=»footer»><include src=»@components/layout/footer/footer.html»></include></block><block name=»popup»></block></template>
Как мы видим, в «ячейки» шаблона вставлены различные компоненты, в том числе главный контент конкретной страницы — @components/pages/home/home.html и @components/pages/contacts/contacts.html
Использование элементов программирования в HTML-файлах
Использование include и template очень помогают в работе с HTML-файлами, а чтобы возможности были еще шире, я добавил элементы программирования.
Использование переменных
В ЧФ4 есть возможность передавать данные в отдельные HTML-файлы, подключенные через include и template с помощью locals (переменных).
Например, мы подключаем head сайта с помощью include и на той или иной странице (например «Контакты»), хотим вывести соответствующий текст в тег <title>. Для этого передаем данные в формате JSON :
<!DOCTYPE html><html lang=»uk»><include src=»@components/layout/head/head.html» locals='{«title»:»Контакты»}’></include><body><div class=»wrapper»><include src=»@components/layout/header/header.html»></include><include src=»@components/pages/home/home.html»></include><include src=»@components/layout/footer/footer.html»></include></div></body></html>
А в файле head.html в тэге <title> выводим переменную в двойных квадратных скобках [[…]]:
<head><meta charset=»UTF-8″ /><meta name=»viewport» content=»width=device-width, initial-scale=1.0″><link rel=»stylesheet» href=»@styles/style.scss»><title>[[title]]</title></head>
Результат:
Таким образом можно передавать и выводить множество информации:
<!DOCTYPE html>
<html lang="ru">
<include src="@components/layout/head/head.html" locals='{
"title":"Контакты",
"keywords":"ключевое слово...",
"description":"Описание страницы..."
}'></include>
<body>
<div class="wrapper">
<include src="@components/layout/header/header.html"></include>
<include src="@components/pages/home/home.html"></include>
<include src="@components/layout/footer/footer.html"></include>
</div>
</body>
</html>Использование условий
Передача информации с помощью переменных (locals) открывает еще более широкие возможности вместе с условным отражением <if> <elseif> <else>
Например, нам необходимо добавить класс пункта меню, соответствующий странице сайта. Для этого передаем информацию в файл header.html с помощью locals:
<!DOCTYPE html>
<html lang="en">
<include src="@components/layout/head/head.html" locals='{"title":"Главная страница"}'></include>
<body>
<div class="wrapper">
<include src="@components/layout/header/header.html" locals='{"active":"Главная"}'></include>
<include src="@components/pages/home/home.html"></include>
<include src="@components/layout/footer/footer.html"></include>
</div>
</body>
</html>В файле header.html, при построении меню, используем условие:
<div class="header__menu menu"><button type="button" data-fls-menu class="menu__icon icon-menu"><span></span></button>
<nav class="menu__body">
<ul class="menu__list">
<if condition="'[[active]]' === 'Главная'">
<li class="menu__item"><a href="#" class="menu__link menu__link--active">Главная</a></li>
</if>
<else>
<li class="menu__item"><a href="[[item.href]]" class="menu__link">Главная</a></li>
</else>...
</ul>
</nav>
</div>
Использование циклов
Для дополнительной оптимизации построений конструкций добавлена возможность использования циклов <each>.
Ост пример построения меню с помощью цикла на основе определенного массива данных:
<div class="header__menu menu"><button type="button" data-fls-menu class="menu__icon icon-menu"><span></span></button>
<nav class="menu__body">
<ul class="menu__list">
<each
loop='item in [{"href": "#","ancor": "Главная"},{"href": "#","ancor": "О нас"},{"href": "#","ancor": "Блог"},{"href": "#","ancor": "Контакты"}]'>
<if condition="'[[active]]' === '[[item.ancor]]'">
<li class="menu__item"><a href="[[item.href]]"
class="menu__link menu__link--active">[[item.ancor]]</a></li>
</if>
<else>
<li class="menu__item"><a href="[[item.href]]" class="menu__link">[[item.ancor]]</a></li>
</else>
</each>
</ul>
</nav>
</div>Настройка ЧФ4 для работы с HTML
В файле настроек ЧФ4 в разделе html вы найдете:
- beautify – настройка форматирования в режиме продакшн
- включить — переключатель
- indent – тип отступов