So erstellen Sie eine benutzerdefinierte Layoutseite in einem benutzerdefinierten Thema


7

Ich möchte ein benutzerdefiniertes Seitenlayout in meinem benutzerdefinierten Design erstellen. Ich habe ein benutzerdefiniertes Thema mit dem Namen "ktheme" mit einem übergeordneten Thema erstellt. Ich habe cutome_home.xmlim Layout-Ordner erstellt, erhalte jedoch nur eine leere Startseite.

Wie kann ich die Kopfzeile auf der Startseite anzeigen lassen?


1
Teilen Sie Ihren
Themencode

Antworten:


18

Ihre Frage ist sehr kurz. Es hört sich so an, als würden Sie versuchen, ein neues Seitenlayout zu erstellen. Wenn das stimmt, müssen Sie es auch deklarieren layouts.xml.

Offizielle Dokumentation

So erstellen Sie ein benutzerdefiniertes Seitenlayout

Fügen Sie Ihr Layout hinzu

In diesem Beispiel erstelle ich ein Layout mit dem Namen Testlayout. Es entspricht genau dem Layout mit einer Spalte, aber Sie können hier Ihr eigenes hinzufügen.

Erstellen Sie diese Datei (ändern Sie den Namen entsprechend Ihrem Layout):

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/page_layout/test-layout.xml

Inhalt:

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

Mein Testlayout basiert auf dem leeren Seitenlayout, sodass es von vorne beginnt. Sie können auch ein Layout erstellen, das auf einem anderen Layout basiert, z. B. 2 Spalten links oder 3 Spalten. Ersetzen <update handle="empty"/>Sie dazu einfach das Layout, das Sie verwenden möchten, z<update handle="3columns"/>

Informieren Sie Magento über Ihr Layout

Erstellen Sie diese XML-Datei:

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/layouts.xml

Hier deklarieren Sie Ihre benutzerdefinierten Layouts wie folgt.

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="test-layout">
        <label translate="true">Test Layout</label>
    </layout>
</page_layouts>

Und jetzt können wir unser neues Layout entweder im XML oder im Admin verwenden:

Seitenlayout


Wenn ich
Testlayout

Sie müssen Ihr Layout in der XML-Datei hinzufügen / bearbeiten, damit es das anzeigt, was Sie möchten. In meinem Beispiel wäre es test-layout.xml. Wenn Sie nicht wissen, wie Sie Container über XML hinzufügen können, empfehlen wir Ihnen, die Dokumentation zu lesen - devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… . Wenn Sie es immer noch nicht verstehen, sollten wir Ihnen weiterhelfen können, wenn Sie Ihren Code angeben.
Ben Crook

Nach Ihrem Beispiel erhalte ich diesen Fehler in meinem system.log gist.githubusercontent.com/anonymous/…
Michelangelo

@Michelangelo - Ich glaube nicht, dass die meisten dieser Fehler damit zusammenhängen, außer No element found with ID 'before.body.end'.Haben Sie den Code von oben kopiert und eingefügt ? Da dieser Fehler für mich keinen Sinn ergibt, haben wir nicht gesagt, dass Magento before.body.endein Element ist, sondern ein Blockname.
Ben Crook

1
So viele Beispiele erwähnen nicht, dass sie in den Unterordner Magento_Theme des Themas gestellt werden sollen. Dies ist der einzige und erste Ort, an dem ich diese Informationen gefunden habe. Requisiten. Diese Lösung funktioniert für Magento 2.2
Hugh Wood
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.