การสร้างเทมเพลตโฮมเพจที่กำหนดเองใน Magento2


11

อย่างที่คุณรู้ว่า magento2 มีเทมเพลตเลย์เอาต์เช่น 1column, 2 คอลัมน์ซ้าย, 2 คอลัมน์ - ขวา, 3 คอลัมน์และฉันต้องการสร้างเทมเพลตเลย์เอาต์โฮมเพจที่กำหนดเองใน Magento2 สำหรับฉันทำตามบทช่วยสอนเล็กน้อยและสร้างโมดูลและไฟล์ ลิงก์ดังกล่าว แต่ไม่มีการทำงานใดเลยและฉันไม่สามารถรับเลย์เอาต์ "โฮมเพจ" ในหน้า cms ​​-> แท็บการออกแบบ

ฉันทำตามลิงค์ด้านล่างทั้งหมด แต่ไม่มีการทำงานเพื่อให้ทุกคนมีทางออกที่เหมาะสมโปรดแบ่งปัน

ลิงค์แรก

ลิงค์ที่สอง

ลิงค์ที่สาม

ลิงค์มา

Ablove โซลูชันทั้งหมดไม่ทำงาน


@Khoa TruongDinh คุณรู้จักคำตอบของคำถามนี้หรือไม่?
Dhaval

คำตอบ:


23

ก่อนอื่นเราต้องรู้วิธีสร้าง Magento 2 ที่กำหนดเองเราสามารถเพิ่มเติมได้ที่นี่: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create HTML

หลังจากสร้างธีมที่กำหนดเองใหม่ เรากำลังจะสร้างเค้าโครงที่กำหนดเองใหม่สำหรับหน้าแรกของเรา ตัวอย่างเช่นโครงสร้างโฟลเดอร์ของเรา:

ป้อนคำอธิบายรูปภาพที่นี่

เราควรเน้นไฟล์ xml สองไฟล์: layouts.xmlและpage_layout/custom_home.xmlใต้Magento_Themeโฟลเดอร์

app / ออกแบบ / ส่วนหน้า / Boolfly / หนังสือ / 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>

รหัสเค้าโครงcustom_homeเป็นชื่อของเค้าโครงหน้าด้านล่าง

แอป / การออกแบบ / ส่วนหน้า / Boolfly / หนังสือ / Magento_Theme / page_layout / custom_home.xml (ฉันทำสำเนาจาก1column.xmlค่าเริ่มต้น)

<?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>

ลงชื่อเข้าใช้ Magento Admin ค้นหาหน้าแรกของ cms ตอนนี้หน้าแรกของเค้าโครงที่กำหนดเองของเราอยู่ในรายการเค้าโครง:

ป้อนคำอธิบายรูปภาพที่นี่

หากเราเลือกเลย์เอาต์นี้เราสามารถเห็นได้ในหน้าแรก:

ป้อนคำอธิบายรูปภาพที่นี่

หมายเหตุ:ตรวจสอบว่าแคช Magento ของเราถูกล้างแล้ว


1
ที่สมบูรณ์แบบ !!!!! ฉันเพียงแค่ติดตามเส้นทางของคุณและงานของฉันเสร็จแล้วขอบคุณมาก
Dhaval

ฉันอัปเดตแล้ว แต่บางทีคำตอบสุดท้ายอาจอธิบายได้ว่าจะหาแท็บออกแบบจากหน้าจอของคุณได้อย่างไร
Joshua Flood

0

มันทำได้อย่างง่ายดายจากผู้ดูแลระบบฉันคิดว่าคุณได้สร้างธีมแล้ว

หนึ่งในนั้นส่วนใหญ่สับสนหลังจากสร้างชุดรูปแบบใหม่พวกเขาสูญเสียรูปลักษณ์และความรู้สึกของหน้าแรกเพราะบล็อกบ้านไม่ได้ถูกกำหนดให้กับหน้าแรกในขณะที่เราสร้างชุดรูปแบบใหม่ เราทำด้วยตนเองเท่านั้น

โปรดปฏิบัติตามคำแนะนำ

ลงชื่อเข้าใช้ผู้ดูแลระบบจากนั้นไปที่

Conten -> หน้า

ค้นหาหน้าแรกจากนั้นในคอลัมน์การดำเนินการคลิกแก้ไขแล้ว

คลิกแท็บเนื้อหาจากนั้นวางค่าด้านล่างในพื้นที่ข้อความ

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

หมายเหตุ:ที่นี่ block_id เป็นรหัสเฉพาะของบล็อกคุณสามารถค้นหาบล็อกรายการและรหัสบล็อกได้ในเนื้อหา -> บล็อก

ในที่สุดก็บันทึกหน้า

จากนั้นล้างแคชของวีโอไอพีและเบราว์เซอร์ของคุณโหลดโฮมเพจคุณสามารถเห็นหน้าแรกดูเหมือนกับหน้าแรกของ luma

หากคุณต้องการค้นหาเนื้อหา html ของหน้าแรกให้ค้นหา block home-page-blockภายใต้เนื้อหา - > บล็อกจากนั้นแก้ไขบล็อกคุณสามารถดูเนื้อหา html ของหน้าแรก

นำการอ้างอิงของ html นี้หลังจากนั้นคุณสามารถพัฒนา html ของคุณเองตามความต้องการของคุณเพิ่ม CSS จากไฟล์โครงร่างธีมของคุณ

คุณต้องการคำอธิบายใด ๆ เพียงแค่พูดถึงในความคิดเห็น

ขอให้โชคดี


อย่างที่คุณทราบใน magento2 มีเทมเพลตไม่กี่แบบเช่น 1 คอลัมน์, 2column-left, 2 คอลัมน์ - ขวา, 3 คอลัมน์เป็นต้นฉันต้องการสร้างเทมเพลตเช่นนี้สำหรับ ex: หน้าแรกและหลังจากนั้นฉันต้องการกำหนดเค้าโครงใหม่นี้ให้ cms -> หน้า -> หน้าแรก ตอนนี้คุณได้รับคะแนนของฉันหรือไม่
Dhaval

ฉันคิดว่าคุณได้พยายามปรับแต่งเนื้อหาของหน้าแรก :-) ฉันไม่ได้ลองมาก่อนสิ่งที่คุณถามดังนั้นฉันไม่สามารถช่วยใครบางคนให้กับคุณ
Bilal Usean

ฉันได้ลองแล้ว แต่ไม่สามารถใช้งานได้ในกรณีของฉัน
Yusuf Ibrahim
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.