Идея и синтаксис шаблона
Шаблонизатор — это функция, которая на вход получает некоторую разметку в виде чистого текста и контекст, а на выход даёт готовый DOM-элемент или текст, готовый к использованию в innerHTML. Под контекстом подразумевается набор информации, который подставляется вместо переменных в шаблонной строке.
Чтобы шаблонизатор мог работать, нужно придумать соглашение о синтаксисе — как описать в шаблоне места, куда должны подставляться данные из контекста. Обычно используют какие-нибудь скобки, в которые помещают идентификаторы переменных.
Скобки удваиваются, чтобы не спутать динамические данные со статическим текстом, который может быть в шаблоне. Они достаточно часто употребляются в текстах, поэтому без удвоения их легко перепутать:
Если выбрать круглые скобки в качестве маркера динамических данных и не удвоить их, непонятно, где переменная, а где просто текст в скобках.
Примем за обозначение переменных в шаблоне удвоенные фигурные скобки — такое решение достаточно распространённое. Таким образом шаблон для примера выше будет таким:
Дополнение к оригинальной статье
Вот пример простого шаблона на Twig, выводящего комментарии из примера гостевой книги выше:
<body>
{% for message in guestbook_messages %}
<p><b>{{ message.name }}</b>:</p>
<p>{{ message.message }}</p>
<hr />
{% else %}
<p>Сообщений пока нету.</p>
{% endfor %}
</body>
Вот пример HAML-шаблона:
%html
%head
%title Название страницы
%body
%h1 Заголовок страницы
#content
.left.column
%p= print_information
.right.column
= render :partial => "sidebar"
И пример Pug-шаблона:
doctype html
html(lang=»en»)
head
title= pageTitle
body
h1 Pug — шаблонизатор для JS
#container.col
if youAreUsingPug
p Вы молодец!
else
p Познакомьтесь с Pug!
p.
Pug — это лаконичный и простой язык шаблонов, уделяющий
внимание производительности и мощным возможностям. Вместо тегов здесь используется CSS-подобный синтаксис, а вложенность элементов друг в друга задается отступами
Например, конструкция в коде выше развернется в HTML-код. Для PHP есть шаблонизаторы с поддержкой синтаксисов Pug и HAML:
Вместо тегов здесь используется CSS-подобный синтаксис, а вложенность элементов друг в друга задается отступами. Например, конструкция в коде выше развернется в HTML-код . Для PHP есть шаблонизаторы с поддержкой синтаксисов Pug и HAML:
- https://github.com/kylekatarnls/jade-php
- https://github.com/pug-php/pug
- https://github.com/arnaud-lb/MtHaml
К недостаткам HAML можно отнести неудобство работы с инлайновыми тегами, и то, что при отладке придется разбирать HTML-код, который сильно отличается по виду от шаблона.
Особенность этих шаблонизаторов в том, что в них очень сильно ограничен набор и возможности управляющих конструкций (вроде ), чтобы в шаблонах был минимум логики. Вот шаблонизаторы на PHP, поддерживающие этот синтаксис:
- https://github.com/bobthecow/mustache.php
- https://github.com/zordius/lightncandy
А вот пример XML-данных, которые нужно передать в этот шаблон:
<guestbook-messages>
<message name="Иван" message="Текст сообщения Ивана">
<message name="Петр" message="Текст сообщения Петра">
</guestbook-messages>
Преимуществом XSLT является строгость синтаксиса — он не пропустит незакрытые или несбалансированные HTML-теги в шаблоне. К недостаткам относится громоздкость синтаксиса, сложность расширения шаблонизатора пользовательскими функциями, необходимость преобразовывать все данные в XML вместо передачи напрямую в шаблонизатор.
Создаем форму отправки данных в html
На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.
Первая строка будет следующей
Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:
Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.
Следующая строка:
Следующей строкой будет кнопка «отправить»:
И последней строкой в форме будет тэг </form>
Теперь соберем все вместе.
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
Вложенные шаблоны
Обычно код бывает удобно разбить на несколько шаблонов, которые затем подключать по мере необходимости. Пусть шаблон меню находится в файле menu.tpl. Тогда код из главного шаблона
<div id=»menu»>
{%*menu*}
<a href=»{*menu:url*}»>{*menu:title*}</a>
{%}</div>
в неизменном виде переместится в menu.tpl, а вместо него будет
…<div id=»logo»>
…</div>
{* +menu.tpl *} /* подключаем шаблон меню */<div id=»content»>
…
Путь к шаблону может также передаваться в переменной. Например, если записать путь к шаблону меню в $DATA’menu_template’, то подключение его примет вид
{* + *menu_template* *}
Существует несколько способов указания путей к шаблонам.
Самый наглядный метод — это указание абсолютного пути к файлу шаблона в файловой системе — что-то наподобие
$tpl = ‘/home/webew.ru/htdocs/templates/main.tpl’
Аналогично, для подключения шаблона меню с помощью абсолютного пути приходится писать
{* +/home/webew.ru/htdocs/templates/menu.tpl *}
Если в начале пути к шаблону отсутствует слэш, то путь интерпретируется относительно месторасположения текущего шаблона (это особенно удобно для группы связанных шаблонов, которые становится легче читать, и к тому же можно все вместе переносить, не меняя при этом путей в них, если они записаны как относительные).
Обычно все шаблоны находятся в каком-то одном каталоге (или его дочерних) и шаблонизатору можно указать так называемый корневой каталог шаблонов — такой, относительно которого он будет интерпретировать пути к ним. Корневой каталог передается третьим аргументом:
websun_parse_template_path(
$DATA,
$tpl,
‘/home/webew.ru/htdocs/templates’
);
Сообщать шаблонизатору о том, что интерпретировать путь нужно относительно корневого каталога шаблонов, следует, поместив в начало пути символ ^:
$tpl = ‘^/main.tpl’;
Можно указывать также путь к шаблону относительно корневого каталога веб-сервера (используется переменная $_SERVER’DOCUMENT_ROOT’). Для этого в начало пути нужно поместить знак доллара.
Таким образом, путь к одному и тому же шаблону (как при его подключении его из других шаблонов, так и при вызове websun_parse_template_path) можно указать четырьмя разными способами:
// пусть корневой каталог веб-сервера — /home/webew.ru/htdocs// корневой каталог шаблонизатора — /home/webew.ru/htdocs/templates// тогда следующие четыре записи эквивалентны:$tpl = ‘menu.tpl’; // путь относительно текущего шаблона$tpl = ‘^/menu.tpl’; // относительно корневого каталога шаблонизатора$tpl = ‘$/templates/menu.tpl’; // относительно корневого каталога веб-сервера$tpl = ‘/home/webew.ru/htdocs/templates/main.tpl’; // абсолютный путь для ФС
При запуске шаблонизатора (вызов функции websun_parse_template_path) и при подключении не связанных друг с другом шаблонов рекомендуется использовать путь относительно корневого каталога шаблонизатора, в остальных случаях как правило удобнее пользоваться относительными путями.
По соображениям безопасности список возможных расширений файлов шаблонов по умолчанию ограничен набором *.tpl, *.html, *.css, *.js, *.xml. Изменить этот набор можно, воспользовавшись объектной формой вызова шаблонизатора и передав ей параметр allowed_extensions.
Что такое шаблоны проектирования?
Это вовсе не аналитические шаблоны, не описание стандартных структур информации вроде связных перечней. Также это не правила, по которым строятся определенные интерфейсы и приложения.
Шаблоны проектирование — это:
- фактически является «описанием взаимодействия классов и объектов, построенным для решения типичных задач проектирования в конкретном контексте». Иными словами, шаблоны проектирования предоставляют весь набор подходов к решению различных каждодневных проблем.
- не класс или библиотека, которые можно бы было просто включить в имеющуюся систему, это не определенный алгоритм, который можно бы было преобразовать в код.
- что-то большее, они описывают способы, посредством которых может быть спроектирована любая программная система, которая решает проблему конкретного рода.
- значительно ускоряют разработку приложений, так как собой представляют проверенные практикой решения, которые нужно лишь воплотить в определенной архитектуре. Кроме того, шаблоны проектирования очень упрощают понимание достаточно сложных концепций.
Разумеется, следует в выборе шаблона проектирования для решения каждой определенной проблемы проявлять осмотрительность.
Зачем нужны шаблонизаторы?
Чем сложнее приложение, тем важнее разделять логику и представление. Только в случае успешного разделения логики от представления backend-разработчики смогут эффективно сотрудничать с frontend-разработчиками. Благодаря шаблонизаторам frontend-разработчики (или в простонародье — верстальщики) могут изменять внешний вид web-приложения, используя понятный синтаксис выбранного шаблонизатора. Обычно шаблоны представляют собой небольшие куски HTML-кода, в которые встроен вывод переменных, подготовленных backend-разработчиком.
Иногда фронт вообще написан на JavaScript, а общение с бэком происходит посредством API, но это совсем другая история.
А все дело в…
А всё дело в упомянутой в начале статьи фразе об отделении кода скрипта PHP от кода HTML шаблона. Так получилось, что огромная программистская общественность в буквальном смысле слова не поняла посыл неизвестного автора — отделять PHP от HTML не нужно! Нужно отделять логику приложения от логики отображения, но это не значит, что в HTML-шаблоне мы не можем использовать PHP-код. PHP изначально задумывался как язык, позволяющий делать вставки кода в HTML страницы:
Что из этого следует? PHP — сам по себе является не только очень мощным языком программирования, но и самодостаточным шаблонизатором, позволяющим делать качественные шаблоны без ущерба для логики приложения. Для этого надо соблюсти следующие условия:
- Не использовать в шаблонах логику приложения, передавать в шаблоны только данные, полученные из скрипта — скаляры, массивы, объекты. Никаких вызовов к базе, алгоритмов не связанных с логикой отображения и т.п.
Такой стиль шаблонизации на PHP называется pure-шаблонизация, т.е. чистая шаблонизация, основанная на возможностях самого PHP.
Используя pure-шаблонизацию код нашего скрипта и шаблона мог бы выглядеть так:
Скрипт:
<?php
$a = isset($_GET) && is_numeric($_GET) ? $_GET : ;
$b = isset($_GET) && is_numeric($_GET) ? $_GET : ;
$result = $a + $b;
// загружаем шаблон
include('template.html');
Шаблон:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Основной шаблон HTML-страницы</title>
</head>
<body>
<?php if ($result): ?>
<span style="color:blue; font-weight:bold">Результат: <?=$result?></span>
<? else: ?>
<span style="color:red; font-weight:bold">Результат равен нулю</span>
<? endif; ?>
</body>
</html>
Согласитесь, красиво и совершенно просто! Мы разделили логику приложения и логику отображения. Теперь верстальщик, хоть немного знакомый с тривиальными управляющими конструкциями любого языка программирования, может с легкостью поддерживать HTML-код, а программисту нет необходимости что-либо знать о том, как и где будет выведен результат работы программы. Мы разделили обязанности и создали поддерживаемый код, который легко модифицировать.
Конечно, наш пример очень прост, но приемущества pure-шаблонизации очень заметны на реальных проектах.
Пример шаблона посложнее — гостевая книга, вывод записей
В качестве примера посложнее можно привести шаблон гостевой книги, выводящей записи из заранее сформированного массива $guestbook_messages. Выводятся записи как зарегистрированных, так и незарегистрированных пользователей. Кроме того, возможен вывод сообщения администратора гостевой книги (если оно есть) под определенным сообщением пользователя.
В массиве присутствуют следующие ключи:
- $guestbook_messages — ID зарегистрированного пользователя. Если его нет, значит пользователь — анонимный.
- $guestbook_messages — Имя зарегистрированного пользователя. Если его нет, значит пользователь — анонимный.
- $guestbook_messages — IP-адрес пользователя.
- $guestbook_messages — Сообщение пользователя.
- $guestbook_messages — Дата публикации сообщения.
- $guestbook_messages — Сообщение администратора, относящееся к записи пользователя.
<!DOCTYPE html>
<html>
<head>
<title>Гостевая книга</title>
</head>
<body>
<?php if ($guestbook_messages): ?>
<?php foreach ($guestbook_messages as $message): ?>
<?php if ($message): ?>
<p class="register_user_info">Пользователь:
<a href="/users/<?=$message?>.html">
<?=htmlspecialchars($message)?>
</a>
</p>
<?php else: ?>
<p class="anonim_user_info">Анонимный пользователь с IP <?=$message?></p>
<?php endif; ?>
<div class="message"><?=htmlspecialchars($message)?></div>
<div class="date"><?=date(DATE_W3C, $message)?></div>
<?php if ($message): ?>
<div class="answer"><?=htmlspecialchars($message)?></div>
<?php endif; ?>
<?php endforeach; ?>
<?php else: ?>
<p>В гостевую книгу ещё не добавлено ни одной записи</p>
<?php endif;?>
</body>
</html>
Передача шаблонам параметров
Я много раз
произносил слово «шаблон», но что оно означает? Если посмотреть на файлы index.html или about.html, то это просто
текст, который загружается и отдается браузеру по соответствующему запросу. Все
так, но в этих же файлах можно прописать конструкции для отображения
информации, например, из БД. Давайте для начала сделаем так, чтобы на каждой
странице был свой заголовок, переданный ей через параметр title. Это можно
сделать так. В файлах index.html и about.html укажем переменную
title:
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
</body>
</html>
А в функциях
представлений передать параметр title соответствующему
шаблону:
def index(request):
return render(request, 'women/index.html', {'title': 'Главная страница'})
def about(request):
return render(request, 'women/about.html', {'title': 'О сайте'})
Все, теперь
вместо title будет
подставлена строка «Главная страница» или «О сайте» и отображаться на
соответствующей странице. Удобно, правда? Вот в этом и есть роль шаблонов: они
описывают структуру страницы, а ее наполнение происходит динамически в самой
программе.
Можно выполнять
передачу и более сложных данных, например, списков. Предположим, главное меню
сайта определено через список:
menu = "О сайте", "Добавить статью", "Обратная связь", "Войти"
А, затем, в
функциях представления, мы можем передать его как параметр:
def index(request):
return render(request, 'women/index.html', {'menu': menu, 'title': 'Главная страница'})
def about(request):
return render(request, 'women/index.html', {'menu': menu, 'title': 'О сайте'})
Для отображения
этого списка в шаблонах, очевидно нужно перебрать в цикле его элементы и
сформировать отдельные пункты:
<ul>
{% for m in menu %}
<li>{{m}}</li>
{% endfor %}
</ul>
Все, если теперь
перейти на сайт и отобразить, например, главную страницу, то увидим этот список
в виде HTML-тегов.
Приступаем к делу
Для того чтобы посмотреть, как работает Twig, предлагаю рассмотреть простой пример:
<html> <head></head> <body> <h2>Account successfully created!</h2> <p>Hello ` name `</p> <p>Thank you for registering with us. Your account details are as follows: </p> <p style="margin-left: 10px"> Username: ` username ` <br/> Password: ` password ` </p> <p>You've already been logged in, so go on in and have some fun!</p> </body> </html>
Сохраните данный файл templates/thanks.tmpl
Обратите внимание на то, что все маркеры, представляющие собой переменные, помещены в двойные фигурные скобки. Подобная запись подскажет Twig-у, где и как осуществлять вставку данных
Затем, нам необходимо создать основной скрипт, где будет происходить формирование переменных и данных:
<?php
// подгружаем и активируем авто-загрузчик Twig-а
require_once 'Twig/Autoloader.php';
Twig_Autoloader::register();
try {
// указывае где хранятся шаблоны
$loader = new Twig_Loader_Filesystem('templates');
// инициализируем Twig
$twig = new Twig_Environment($loader);
// подгружаем шаблон
$template = $twig->loadTemplate('thanks.tmpl');
// передаём в шаблон переменные и значения
// выводим сформированное содержание
echo $template->render(array(
'name' => 'Clark Kent',
'username' => 'ckent',
'password' => 'krypt0n1te',
));
} catch (Exception $e) {
die ('ERROR: ' . $e->getMessage());
}
?>
В результате, если вы откроете данную страницу в браузере, то увидите следующее:
Для использования Twig-а, вам нужно пройти следующие шаги:
- Инициализировать авто-загрузчик Twig-а, для того чтобы классы шаблонизатора подгружались автоматически.
- Инициализировать загрузчик шаблонов. В нашем случае эт Twig_Loader_FileSystem. В качестве аргумента передаём путь к каталогу с шаблонами.
- Создать объект самого Twig и передать ему уже сконфигурированные настройки.
- Подгрузить нужный нам шаблон с помощью метода loadTemplate, передав в него название используемого шаблона. В качестве результата метод вернёт экземпляр шаблона.
- Сформировать массив вида «ключ-значение», где ключи — это названия переменных, а значения — данные, выводимые в шаблоне. Затем этот массив нужно передать в метод render(), который совместит шаблон с переданными данными и вернёт сгенерированный результат.
Практика
Для начала создадим следующую структуру файлов и папок:
Теперь, откроем файл index.php и наполним его следующим кодом:
Тут вопросов возникнуть не должно.
Переходим к файлу app.php
Подцепляем составные части нашего веб-приложения (далее будет приведен их код).
В конце создаем экземпляр контроллера (фронт-контроллер).
![37 бесплатных курсов по php [2021] для начинающих с нуля](https://luxe-host.ru/wp-content/uploads/7/5/5/755ab6d1b3544a935c5985bb1e0fbdb5.jpeg)
Содержимое файла load.php
Не трудно догадаться, что данный класс предназначен для отображения видов. Для этого в метод view передается имя файла вида, содержащего html-разметку и массив параметров, значения которых будут отображены в виде.
Базовый класс контроллера содержится в файле controller.php
В методе index (действие по умолчанию), создается массив параметров, который наполняется данными модели, путем вызова метода user_info (о нем далее). Далее этот массив передается в метод view для отображения заданного вида.
Переходим к файлу model.php
Для простоты, здесь мы не будем использовать SQL-запросы или ORM-операторы. Вместо этого мы сэмулируем данные, сразу возвратив массив результатов.
Осталось написать файл вида someview.php, который мы указали в качестве параметра метода view в классе контроллера.
Здесь отображается HTML-шаблон, в котором выводятся данные полученные из модели.
Функция-шаблонизатор
Шаблонизатор — это функция, которая подключает файл шаблона, передаёт ему данные и возвращает сгенерированный HTML.
Именно шаблонизатор является тем клеем, что скрепляет воедино отдельные шаблоны в итоговую страницу. Работает он следующим образом: PHP-сценарий страницы выполяет все действия для подготовки необходимой информации, к примеру, запрашивает записи из базы данных. Эти записи в виде массива отправляются шаблонизатору вместе с именем шаблона страницы.
Шаблонизатор подключает указанный файл шаблона и передаёт туда всю информацию. Но, вместо вывода на экран содержимого этого шаблона, он захватывает получившийся HTML-код и возвращает его.
Затем сценарий вызывает шалбонизатор ещё раз, но теперь с его помощью подключает общий лейаут, куда отправляется общая информация, а также содержимое страницы, полученное из предыдущего шага. Весь результат работы выводится на экран.
Пример использования
Посмотрим на примере, как это всё работает. Начнём с того, что определим три шаблона: лейаут, шаблон страницы и какой нибудь блок.
Напоминаю, что в лейаут выносим общий HTML-код.
Теперь очередь за шаблоном страницы:
Здесь обрати внимание, что шаблон страницы помимо интерации по массиву, для каждого его элемента вызывает функцию-шаблонизатор. Шаблонизатор получает контент из шаблона блока и показывает его внутри списка
А вот и шаблон блока для показа одной записи:
[inc/item.php]
Так выглядели три шаблона. Все они примут участие в формировании итоговой страницы. Соберёт эти шаблоны и выведет страницу на экран наш сценарий — index.php:
Помещаем HTML и PHP код отправки формы в один файл
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Система Шаблонов
Вернемся к page.php. Вы использовали приведенный выше код для структурирования и стиля всех ваших страниц с помощью этого файла шаблона. Но теперь вы хотите, чтобы одна из ваших страниц, например «обратная связь» была структурирована совершенно по-другому.
Существует еще одна концепция, которую мы должны обсудить. Если вы зайдете в Админ-панель/Странцы и откроете любую страницу, вы заметите в правом нижнем углу панель «атрибуты страницы».
Первая опция касается иерархии, которая предоставляет выбор: хотите ли вы, чтобы эта страница была отдельной страницей или, вы хотите, чтобы она была дочерней другой соответствующей страницы.
Второй вариант «шаблон» — это то, что мы будем обсуждать дальше.
В корне темы создадим файл и назовем его page-contact.php в которой пропишем следующий код:
<?php
/*
Template Name: Контакты
*/
?>
Теперь перезагрузим открытую страницу и увидим, что в атрибутах появилась новая вкладка «Шаблоны». Щелкнув по ней нам станет доступным базовый шаблон и только что созданный нами шаблон «Контакты».
Если вы выберете его и нажмете обновить, WordPress будет использовать файл шаблона, который вы можете оформить по своему усмотрению, и значит эта страница уже не будет выглядеть как остальные страницы на сайте. Например, я хочу, чтобы на странице контактов всегда находилось фото, допустим бабочки. Для этого добавляем картинку через панель-библиотека файлов, а в шаблоне page-contact.php пропишем
Теперь добавим какой-то текст на страницу через панель и вот что у нас получилось:
Как видим, эта страница совсем не похожа на то, что получилось ранее, когда мы создавали шаблон для всех страниц.
Таким образом можно оформить любую страницу как вам угодно, при этом, не затрагивая основной шаблон page.php.
Таких шаблонов также можно создавать сколько угодно, делая каждую страницу уникальной.
Заключение
Итак, мы изучили, что такое шаблонизация, какие вопросы стоит задавать при создании шаблонизатора и как на них можно отвечать. Реализация получилась, что называется, на коленке, но она вполне отражает ход размышлений и при этом даже работает
Несомненно, эту реализацию можно улучшить, но стоит ли? В приведённом случае мы всё равно подвержены уязвимости в виде innerHTML, потому что не создаём в шаблонизаторе настоящий DOM, а только оперируем строкой.
Для создания настоящего DOM надо как минимум написать настоящий парсер для языка разметки, выстроить работу с абстрактным синтаксическим деревом (AST) и создать компилятор из AST в DOM API, чтобы на выходе из шаблонизатора был честный DOM-элемент с наполнением. А ещё чтобы это всё было создано с помощью document.createElement. Но эта тема тянет на несколько статей, и если вам интересно — мы с командой курса «Мидл фронтенд-разработчик» их напишем.
