TL: DR
Bauen Sie mit dem nativen Luma oder Blanko-Thema? Oder sonst noch etwas?
Es liegt an Ihnen, ein übergeordnetes Thema als optional zu deklarieren. Wenn Sie kein übergeordnetes Element deklarieren, greifen Sie dennoch auf die Module (z. B. Magento_Catalog) zurück, die XML- und Vorlagendateien, jedoch kein Styling bereitstellen.
Verwenden Sie eine Erweiterung, um Ihr Thema zu entwickeln?
Da ich lieber mit SCSS und GULP arbeite, verwende ich jetzt Frontools und das SCSS-Blanko-Theme . Dadurch wird die Belastung durch den Standard-Grunt / LESS-Workflow erheblich verringert.
Welche Schritte befolgen Sie, wenn Sie ein Thema von Grund auf neu entwickeln?
- Deklarieren Sie das Thema
- CSS des übergeordneten Themas entfernen (falls erforderlich)
- Fügen Sie Ihr eigenes CSS / WENIGER / SCSS hinzu
Meiner persönlichen Meinung nach ist es am besten, ein eigenes "leeres Thema" von Grund auf zu erstellen, da Sie dies so anpassen können, dass es genau Ihren Anforderungen entspricht.
So würde ich ein Thema von Grund auf neu erstellen. Ich habe NewStore / default als meinen Lieferanten- und Themennamen verwendet.
Nun zur detaillierteren Antwort ...
Erstellen Sie das Thema (gemäß den offiziellen Dokumenten)
Erstellen Sie das Thema gemäß den offiziellen Dokumenten
Optionales Deklarieren eines übergeordneten Elements
Innerhalb app/design/frontend/NewStore/default/theme.xmlSie die Wahl zur Vereinbarkeit einer Mutter Themas haben oder nicht, für dieses Beispiel habe ich weggelassen Linie 3 ( <parent>Vendor/theme</parent>) , so gibt es kein übergeordnetes Thema . Dies bedeutet, dass alle Vorlagen / Layout-Dateien von den Modulen selbst stammen und nicht von Blank oder Luma, und dass keine Themengestaltung erfolgt, da dies dem leeren Thema hinzugefügt wird.
Meine theme.xml sieht so aus:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>NewStore default</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Entfernen Sie das Styling (wenn Sie ein übergeordnetes Thema festlegen) und fügen Sie Ihr eigenes CSS hinzu
Wenn Sie "leer" oder "Luma" als übergeordnetes Element festlegen, müssen Sie verhindern, dass die CSS-Dateien geladen werden. Erstellen app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlSie dazu folgendes XML und fügen Sie es hinzu:
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove blank/luma theme styling if you declared a parent -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" />
<remove src="css/print.css" />
<!-- Add your own CSS files -->
<css src="css/styles.css" />
</head>
</page>
Dies entfernt styles-m.css, styles-l.cssund print.cssdurch das leere Thema hinzugefügt. Es fügt auch styles.css als Basis für Ihr eigenes CSS hinzu.
Wenn Sie kein übergeordnetes Element angegeben haben, können Sie die 3 <remove />Tags im obigen Code entfernen .
Fügen Sie Ihr eigenes CSS hinzu
Sie können Ihr Thema jetzt nach Belieben stylen. Ich bin eher ein Fan von Sass als von LESS. Deshalb habe ich diese Datei hinzugefügt. app/design/frontend/NewStore/default/web/css/styles.scss
Ich habe die Hintergrundfarbe hier geändert, um zu beweisen, dass dies funktioniert. Idealerweise würden Sie diese Datei nur zum Importieren anderer Sass / Less-Dateien verwenden.
Ergebnis
Das Ergebnis dessen, was ich gerade getan habe, ist ein Thema ohne Stil (abgesehen von meinem wunderschönen grünen Hintergrund), mit dem Sie Ihr Thema stylen können, ohne mit Magentos Stil (manchmal schwierig zu bearbeiten) zu arbeiten.
Tipps
Wenn Sie lieber mit SCSS arbeiten und keine Zeit haben, ein neues Design zu erstellen, empfehlen wir die Verwendung von Frontools und dem SCSS-Blanko- Design, beide von Snowdog Apps .
Ich finde, der frustrierendste Aspekt bei der Arbeit mit Magentos Front-End-Code ist, wie spezifisch das Styling ist. Um dies zu vermeiden, empfehle ich die Verwendung der BEM-Namenskonvention, wenn Sie Ihr eigenes Styling schreiben.
Auch hilfreiche Kommentare sind wichtig, wenn ein Entwickler, der mit Luma / Blank gearbeitet hat, an einem von Grund auf neu erstellten Thema arbeitete, würde er wahrscheinlich feststellen, dass die Dinge ganz anders funktionieren als erwartet.