Erstellen einer benutzerdefinierten Homepage-Vorlage in Magento2

Wie alles, was Sie wissen, dass magento2 einige Layoutvorlagen wie 1 Spalte, 2 Spalten links, 2 Spalten rechts, 3 Spalten hat und ich eine benutzerdefinierte Homepage-Layoutvorlage in Magento2 erstellen möchte, folge ich einigen Lernprogrammen und erstelle Module und Dateien wie in beschrieben Diese Links funktionieren, aber keiner von ihnen funktioniert und ich kann kein "Homepage" -Layout in cms page -> design tab erhalten.

Ich folge unten allen Links, aber keiner funktioniert, so dass jeder die richtige Lösung hat, bitte teilen.

erster Link

zweiter Link

dritter Link

vierter Link

Ablove alle Lösungen funktionieren nicht.

Zunächst müssen wir wissen, wie ein benutzerdefiniertes Thema Magento 2 erstellt wird. Weitere Informationen finden Sie hier: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create. html

Nach dem Erstellen eines neuen benutzerdefinierten Themas. Wir werden ein neues benutzerdefiniertes Layout für unsere Homepage erstellen. Zum Beispiel unsere Ordnerstruktur:

Wir sollten uns auf zwei XML-Dateien konzentrieren: layouts.xmlund page_layout/custom_home.xmlunter Magento_ThemeOrdner

app / design / 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>

Die Layout-ID custom_homeist der Name des Seitenlayouts unten.

app / design / frontend / Boolfly / book / Magento_Theme / page_layout / custom_home.xml (Ich habe eine Kopie von der 1column.xmlStandardeinstellung erstellt)

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

Melden Sie sich bei Magento Admin an und suchen Sie die CMS-Startseite. Unsere benutzerdefinierte Layout-Homepage befindet sich jetzt in der Liste der Layouts:

Wenn wir dieses Layout wählen, können wir es auf der Titelseite sehen:

Hinweis: Sicher, dass unser Magento-Cache geleert wurde.

Es ist leicht von Admin zu erreichen, ich gehe davon aus, dass Sie bereits ein Thema erstellt haben.

Die meisten, die nach dem Erstellen eines neuen Themas verwirrt waren, verloren das Erscheinungsbild der Startseite, da der Startseite beim Erstellen eines neuen Designs keine Startblöcke zugewiesen wurden. Wir machen das nur manuell.

Bitte folgen Sie den Anweisungen

Melden Sie sich bei admin an und navigieren Sie zu

Inhalt -> Seiten

finden Home, dann in Aktion Spalte klicken bearbeiten dann

Klicken Sie auf die Registerkarte Inhalt und platzieren Sie den folgenden Wert im Textbereich

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

Hinweis: Hier ist block_id eine eindeutige ID von Blöcken. Die Listenblöcke und die Block-ID finden Sie unter Inhalt-> Blöcke

Seite endlich speichern

Leeren Sie dann Ihren Cache von Magento und Browser, laden Sie die Homepage, und Sie können sehen, dass die Homepage wie eine Luma-Homepage aussieht.

Wenn Sie den HTML-Inhalt der Homepage suchen möchten, suchen Sie den Block Homepage-Block unter Inhalt-> Blöcke und bearbeiten Sie den Block. Sie können dann den HTML-Inhalt der Homepage anzeigen .

Nehmen Sie die Referenz dieses HTML-Inhalts, danach können Sie Ihren eigenen HTML-Code gemäß Ihren Anforderungen entwickeln. Fügen Sie CSS aus Ihrer Design-Layout-Datei hinzu.

Sie brauchen eine Klarstellung, die Sie nur im Kommentar erwähnen

viel Glück.