Magento 2: макеты страниц и контейнеры (page layouts & containers)
Давайте узнаем, как создаются страницы в Magento с помощью XML. Перейдем в каталог vendor/magento/module-theme
, который является модулем Magento_Theme.
Весь макет XML находится в каталоге view, а также (в зависимости от того, какая область Magento изменяется) в одном из таких каталогов как base
, default
или adminhtml
. Каталог base
влияет на все макеты, поэтому давайте перейдем в этот каталог. Далее перейдем в каталог page_layout
, и увидим единственный файл empty.xml
.
vendor/magento/module-theme/view/base/page_layout/empty.xml
Это файл, который используют все макеты в Magento, включая frontend (внешний интерфейс) и admin area (административную область). Вы заметите, что он заполнен контейнерными узлами (нодами). Контейнеры — они как строительные блоки страницы. Контейнеры можно представить как большие невидимые области страницы, но имеющими чёткие контуры.
Контейнеры ничего не отображают на странице, если к ним не добавлены блоки. Как только блоки добавлены, они становятся дочерними для контейнера и он их с лёгкостью отобразит на странице.
Давайте вернемся выше на пару каталогов и перейдём в каталог
frontend
. В нём снова перейдем в каталог page_layout
, и вы заметите, что там определено уже несколько макетов (layouts). Если вы откроете файл макета 1column.xml
, вы увидите похожий макет.Обратите внимание, что первый XML-узел — это
layout
. Этот макет страницы расширяет макет empty.xml
из каталога base
и строится поверх того, что уже определено в этом файле. Второй узел(node) — referenceContainer
, и он ссылается на page.wrapper
. То есть это - ссылка на контейнер в empty.xml
с name="page.wrapper"
. Всё, что делает 1column.xml
, так это добавляет дополнительные узлы <container>
в контейнер page.wrapper.Давайте откроем другой файл макета страницы,
2columns-left.xml
. Этот макет строится поверх макета 1column.xml
, это сделано для того, чтобы избежать необходимости дублировать одни и те же элементы контейнера. Этот макет(layout) также добавляет дополнительные узлы <container>
, только уже в контейнер columns (name="columns"
) - контейнер расположенный в файле макета empty.xml
. Также мы видим, что узлам - container могут быть добавлены атрибуты htmlTag
и htmlClass
, в которых указываются HTML-теги и классы. В результате связанный контейнер будет обрамлён указанными HTML тегом с указанным классом\классами.Макет страницы 2columns-right строится на основе макета
2columns-left.xml
, просто CSS страницы берет на себя перемещение столбца. С макетом 3columns.xml
- аналогично, он основан на макете 2columns-left, и он позволяет связанным CSS и XML-макету добавлять дополнительные контейнеры на страницу.
Перечисленные макеты страниц - составляют общий каркас страницы сайта.
Обычно эти встроенные макеты страниц отлично работают, если только у вас нет особых потребностей в полностью настраиваемых макетах. В случае, если такие потребности у вас есть, вы всегда можете создать свой собственный макет. Для этого,
в вашем пользовательском модуле все, что вам нужно сделать - это написать соответствующий XML-файл в каталоге
page_layout
вашего модуля, а затем добавить свой макет в свой собственный файл layouts.xml
.