W Magento 2 dostępnych jest kilka standardowych layoutów, które możemy wybrać przy dodawaniu / aktualizacji podstrony (MENU -> CONTENT -> ELEMENTS -> PAGES):
- empty – pusty,
- 1 column – układ jednokolumnowy,
- 2 columns with left bar – dwie kolumny z lewym paskiem,
- 2 columns with right bar – dwie kolumny z prawym paskiem,
- 3 columns – trzy kolumny.
Aby rozszerzyć tą listę o nowy (niestandardowy) układ wystarczy dodać dwa pliki do własnego motywu:
app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layouts.xml
app/design/frontend/<Vendor>/<Theme>/Magento_Theme/page_layout/<layout.xml>
Przykład:
app/design/frontend/Spin/Geek/Magento_Theme/layouts.xml:
|
1 2 3 4 5 |
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd"> <layout id="my_layout"> <label translate="true">My Layout</label> </layout> </page_layouts> |
Identyfikator id=”my_layout” musi być taki sam jak nazwa pliku układu:
app/design/frontend/Spin/Geek/Magento_Theme/page_layout/my_layout.xml:
|
1 2 3 4 5 6 7 8 9 10 11 |
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="columns"> <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main"> <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/> </container> <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main"> <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/> </container> </referenceContainer> </layout> |