dimayakovlev.ru


Удаление лишних пробелов в генерируемом HTML коде страницы с помощью Twig

Поводом для написания этой заметки послужил вопрос о том, как минифицировать генерируемый HTML код страницы средствами Grav CMS с целью удаления лишних символов пробела, приводящих к неправильному отображению элементов страницы в браузере.

Ставить знак равенства между минификацией HTML кода и удалением лишних пробелов между HTML тегами некорректно. Однако избавление от лишних пробелов помогает решить проблемы с отображением элементов страницы в браузере и сделать минифицированный HTML код менее читаемым, поэтому выполнение этой операции оправдано.

На первый взгляд, для решения поставленной задачи требуется пропустить сгенерированный HTML код страницы через дополнительный обработчик, выполняющий фунцкцию парсера HTML кода и удаляющий требуемые символы пробелов.

Grav CMS не предоставляет встроенную функцию минификации генерируемого HTML кода страницы, но позволяет расширять доступную функциональность за счёт плагинов, а значит, для минификации HTML кода страниц может быть написан специальный плагин.

Однако не стоит забывать о том, что Grav CMS использует шаблонизатор Twig, включающий специальный тег spaceless.

Привычное для большинства разработчиков использование Twig тега spaceless - удаление лишних пробелов в отдельных генерируемых блоках HTML кода, расположенных внутри кода HTML документа.


<div>
{% spaceless %}
    <h2>Items List</h2>
    <div>
    {% for item in items %}
		<span style="padding: 2em";>{{ item }}</span>
    {%  endfor %}
    </div>
{% endspaceless %}
</div>

В пределах рассматриваемой задачи, полный код HTML документа не несёт в себе никаких отличий от HTML кода отдельных блоков. Поэтому для удаления лишних пробелов из полного кода HTML документа, Twig тег spaceless используется аналогичным способом, но включает в себя не фрагменты, а полный код документа, подлежащий обработке.


{% spaceless %}
<!DOCTYPE html>
<html>
	<head>
		<title>Spaceless</title>
	</head>
	<body>
		<h1>Spaceless</h1>
	</body>
</html>
{% endspaceless %}

Приведённый фрагмент кода показывает пример использования привычных инструментов при взгляде на задачу с непривычной стороны и не зависит от конкретной системы управления контентом.