IT-Storm

There’s more than one way to do it

Menu

Magento 2: макеты страниц и контейнеры (page layouts & containers)

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.

Magento 2