Page Layouts in Magento 2

1. Page layout là gì và để làm gì?

Page layout declares the wireframe of a page inside the <body> section, for example one-column layout or two-column layout.

Page layout đưa ra 1 khung trang bên trong thẻ body. Có nghĩ chúng là 1 khung dựng sẵn và công việc của magento và của bạn là reference vào đó những block hay container có nội dung.

Bên dưới là 1 ví dụ đưa ra khi đối chiếu với Luna Homepage.

Và bạn có thể xác định được page đó layout type là gì bằng cách inspect và check trong thẻ body, nó sẽ kiểu như

page-layout-1column or page-layout-2columns-left

2. Where are the existing page layouts used in Magento 2?

By default, Magento provides 5 page layout types for the frontend (empty , 1column , 2columns-left , 2columns-right , and 3columns ) and 3 page layout types for the backend (admin-empty , admin-1column , and admin-2columns-left ).

empty ( page without container) ví dụ như trang checkout
1 column ( (one container for all the content) ví dụ như homepage hay trang product_view
2 column (container for content and left sidebar) ví dụ như trang category-view, subcategory-view, account-pages
Tương tự bạn có thể tìm kiếm thêm thông tin tại trang devdoc

3. Cụ thể 1 trang layout thường có gì?
Dưới đây sẽ phân tích trang Wish List Sharing

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Wishlist\Block\Customer\Sharing" name="wishlist.sharing" template="Magento_Wishlist::sharing.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

Thấy ngay layout được sử dụng là 3columns (3 optional containers). Khi control + click vào container content thì thấy chuyển sang file 3columns.xml trong theme.
Đây là 1 ví dụ super simple để bạn mới bắt đầu tham khảo và tự mình tìm hiểu nhé :smile_cat:

2 Likes

Làm bài nữa về template với block đi em, sẵn tiện luôn :))

ok a ơi. Em để ở file word mà nó dài quá hihi :smile_cat: