Tạo mẫu trang chủ tùy chỉnh trong Magento2

Như tất cả những gì bạn biết rằng magento2 có một số mẫu bố cục như 1column, 2 cột bên trái, 2 cột bên phải, 3 cột và tôi muốn tạo mẫu bố cục trang chủ tùy chỉnh trong Magento2 để tôi làm theo vài hướng dẫn và tạo mô-đun và tệp như đã nói trong liên kết đó nhưng không ai trong số họ đang làm việc và tôi không thể có bố cục "trang chủ" trong trang cms -> tab thiết kế.

Tôi theo dõi bên dưới tất cả các liên kết nhưng không ai làm việc để bất cứ ai có giải pháp thích hợp xin vui lòng chia sẻ.

liên kết đầu tiên

liên kết thứ hai

liên kết thứ ba

liên kết ra

Ablove tất cả các giải pháp không hoạt động.

Trước hết, chúng ta cần biết cách tạo chủ đề tùy chỉnh Magento 2, chúng ta có thể tìm hiểu thêm tại đây: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/theme/theme-create. html

Sau khi tạo một chủ đề tùy chỉnh mới. Chúng tôi sẽ tạo bố cục tùy chỉnh mới cho trang chủ của chúng tôi. Ví dụ: cấu trúc thư mục của chúng tôi:

Chúng ta nên tập trung vào hai tệp xml: layouts.xmlvà page_layout/custom_home.xmltrong Magento_Themethư mục

ứng dụng / thiết kế / frontend / Boolfly / book / Magento_Theme / layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>

</page_layouts>

Id bố cục custom_homelà tên của bố cục trang bên dưới.

app / design / frontend / Boolfly / book / Magento_Theme / page_layout / custom_home.xml (Tôi đã tạo một bản sao từ 1column.xmlmặc định)

<?xml version="1.0"?>
<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="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

Đăng nhập vào Magento Admin, tìm trang chủ cms. Bây giờ, trang chủ bố trí tùy chỉnh của chúng tôi nằm trong danh sách bố trí:

Nếu chúng ta chọn bố cục này, chúng ta có thể thấy nó trên trang đầu:

Lưu ý: Chắc chắn rằng bộ nhớ cache Magento của chúng tôi đã bị xóa.

Nó dễ dàng đạt được từ Admin, tôi giả sử bạn đã tạo chủ đề.

Hầu hết những người bối rối sau khi tạo chủ đề mới, họ đã mất giao diện trang chủ vì các khối nhà không được gán cho trang chủ trong khi chúng tôi tạo chủ đề mới. Chúng tôi chỉ làm bằng tay.

vui lòng làm theo hướng dẫn

đăng nhập vào quản trị viên, sau đó điều hướng đến

Conten -> Trang

tìm Trang chủ, sau đó trong cột hành động bấm chỉnh sửa rồi

bấm vào tab Nội dung, sau đó đặt giá trị bên dưới vào vùng văn bản

{{block class="Magento\Cms\Block\Block" block_id="home-page-block"}}

lưu ý: ở đây block_id là id duy nhất của các khối, bạn có thể tìm thấy các khối danh sách và id khối trong Content-> Blocks

cuối cùng lưu trang

sau đó xóa bộ nhớ cache của magento và trình duyệt, tải trang chủ, bạn có thể thấy trang chủ trông giống như trang chủ luma.

nếu bạn muốn tìm nội dung html trang chủ, hãy tìm khối trang chủ trong Nội dung-> Khối sau đó chỉnh sửa khối, bạn có thể thấy nội dung html của trang chủ .

lấy tham chiếu của conetent html này, sau đó bạn có thể phát triển html của riêng bạn theo yêu cầu của bạn, Thêm CSS từ tệp bố cục chủ đề của bạn.

bạn cần bất kỳ sự làm rõ chỉ cần đề cập trong bình luận

chúc may mắn