Theming for Magento 2 - Zaczynając od zera

27

Niektórzy z was zapewne przeczytali ten temat dotyczący tematów od zera w Magento 1: Theming - od zera

Zastanawiałem się, jaka byłaby najlepsza praktyka opracowania od podstaw motywu dla Magento 2?

  • Czy budujesz przy użyciu natywnego lumalub blankmotywu? Albo coś innego ?
  • Czy używasz jakiegoś rozszerzenia, aby pomóc Ci rozwinąć swój motyw?
  • Jakie kroki wykonujesz, opracowując motyw od zera?
magento2 theme template magento-2.0 design Raphael at Digital Pianism
źródło
Podaję kilka linków w mojej odpowiedzi, proszę przejrzyj ją, dowiesz się o architekturze frontendu i rozwoju Magento 2.0.
Asheem Patro,
Postępuj zgodnie ze wskazówkami Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/…, aby utworzyć motyw dla interfejsu użytkownika.
Rishabh Rk Rai

Odpowiedzi:

45

TL: DR

Czy budujesz przy użyciu natywnej lumy lub pustego motywu? Albo coś innego ?

To od Ciebie zależy, czy motyw nadrzędny jest opcjonalny. Jeśli nie zadeklarujesz rodzica, nadal będziesz korzystać z modułów (np. Magento_Catalog), które udostępniają pliki XML i szablony, ale nie mają stylizacji.

Czy używasz jakiegoś rozszerzenia, aby pomóc Ci rozwinąć swój motyw?

Ponieważ wolę pracować z SCSS i GULP, teraz używam Frontools i pustego motywu SCSS . Eliminuje wiele stresu związanego z domyślnym przepływem pracy Grunt / LESS.

Jakie kroki wykonujesz, opracowując motyw od zera?

  1. Zadeklaruj motyw
  2. Usuń CSS motywu nadrzędnego (jeśli jest wymagany)
  3. Dodaj własny CSS / LESS / SCSS

Moim osobistym zdaniem najlepiej jest stworzyć od podstaw własny „pusty motyw”, ponieważ możesz go dostosować tak, aby był dokładnie tym, czego potrzebujesz.

W ten sposób stworzę motyw od zera. Użyłem NewStore / default jako nazwy mojego dostawcy i motywu.

Teraz bardziej szczegółowa odpowiedź ...

Utwórz motyw (zgodnie z oficjalnymi dokumentami)

Utwórz motyw zgodnie z oficjalnymi dokumentami

Opcjonalnie deklarując rodzica

W app/design/frontend/NewStore/default/theme.xmltobie masz wybór zadeklarowania motywu nadrzędnego lub nie, w tym przykładzie pominąłem wiersz 3 ( <parent>Vendor/theme</parent>), więc nie ma motywu nadrzędnego . Oznacza to, że wszystkie szablony / pliki układu będą pochodzić z samych modułów, a nie puste lub Luma, i nie będzie stylizacji motywu, ponieważ jest dodawany w pustym motywie.

Mój theme.xml wygląda następująco:

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

Usuń styl (jeśli ustawisz motyw nadrzędny) i dodaj własny CSS

Jeśli ustawisz puste lub Luma jako rodzic, będziesz musiał zapobiec ładowaniu plików CSS. Aby to zrobić, utwórz app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmli dodaj następujący kod XML:

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

Spowoduje to usunięcie styles-m.css, styles-l.cssa print.cssdodane przez tematu pusty. Dodaje też styles.css jako bazę do własnego CSS.

Jeśli nie określiłeś rodzica, możesz usunąć 3 <remove />tagi z powyższego kodu.

Dodaj własny CSS

Możesz teraz stylizować swój motyw, jak tylko zechcesz, jestem raczej fanem Sassa niż MNIEJ, więc dodałem ten plik - app/design/frontend/NewStore/default/web/css/styles.scss

Zmieniłem tutaj kolor tła tylko po to, aby udowodnić, że działa, najlepiej użyć tego pliku do importowania innych plików Sass / Less.

Wynik

Rezultatem tego, co właśnie zrobiłem, jest motyw bez stylizacji (oprócz mojego pięknego zielonego tła), który pozwala stylizować motyw bez pracy ze stylem Magento (czasem trudnym w obróbce).

wprowadź opis zdjęcia tutaj

Porady

  • Jeśli wolisz pracować z SCSS i nie masz czasu na tworzenie motywu od podstaw, polecam korzystanie z Frontools i pustego motywu SCSS zarówno przez Snowdog Apps .

  • Najbardziej frustrującym aspektem pracy z kodem frontonu Magento jest to, jak specyficzna jest ich stylizacja. Aby tego uniknąć, zalecam stosowanie konwencji nazewnictwa BEM podczas pisania własnego stylu.

  • Kluczowe są także pomocne komentarze, jeśli programista przyzwyczajony do pracy z Lumą / Blankem pracował nad motywem zbudowanym od zera, prawdopodobnie zauważy, że wszystko działa zupełnie inaczej niż się spodziewano.

Ben Crook
źródło
Stworzyłem własny pusty motyw, korzystając z twoich instrukcji, bez motywu nadrzędnego zdefiniowanego w theme.xml. Jednak nadal są różne style widoczne na froncie. Instalacja Magento jest w developertrybie i wszystkie pamięci podręczne zostały wyczyszczone. Nie wiem, skąd się biorą te wszystkie style - masz pomysł?
fritzmg,
Czy masz zainstalowane jakieś rozszerzenia / wtyczki? Może to być również Lakier, jeśli jest zainstalowany, aby wykluczyć dodanie znaku zapytania i losowego ciągu po adresie URL, na przykład?=123
Ben Crook
Tak, wykluczyłem Lakier (lub podobny). Brak zainstalowanych rozszerzeń lub wtyczek.
fritzmg,
Czy to pełna stylizacja motywu, czy tylko jej część? Trudno mi powiedzieć, nie widząc strony i bazy kodów. Może zadaj nowe pytanie i zamieść tam jakieś szczegóły? Jeśli mnie otagujesz, zobaczę, czy dam radę.
Ben Crook,
O ile mi wiadomo, to pełne motywy. Plus dołączony plik CSS z mojego własnego motywu. Tak, prawdopodobnie lepiej jest dla tego utworzyć nowe pytanie :)
fritzmg
8

Istnieje wiele samouczków dotyczących rozpoczynania tematu w Magento 2.0. Podaję kilka linków wideo i kilka normalnych linków, dzięki którym można uzyskać dobrą wiedzę na temat tworzenia motywów w Magento 2.0. kliknij tutaj, aby obejrzeć wideo

zapoznaj się również z tymi linkami

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

Z tego linku dowiesz się o architekturze frontendu magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

sprawdź również te dwa linki

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

Asheem Patro
źródło
5

Dziedziczę po pustych, ale szybko dążę do stworzenia bardziej lekkiego podstawowego motywu o znacznie mniej złożonej strukturze CSS.

Warto zauważyć, że w 2015 roku Magento wyszło i powiedział, że nie zaleca dziedziczenia po lumie, ponieważ zastrzega sobie prawo do wprowadzania niezapowiedzianych zmian w celach marketingowych i demonstracyjnych. Później zmienili to stwierdzenie, mówiąc, że ich celem jest umożliwienie dziedziczenia .

Lawrence
źródło
3

Najlepszym sposobem na rozpoczęcie tworzenia motywu jest rozpoczęcie od dziedziczenia z jednego lumalub drugiego blank. Powodem tego jest to, że są one zbudowane tak, aby były responsywne (tj. Przyjazne dla wielu rozdzielczości). Zmniejsza to również nakład pracy związany z tworzeniem różnych plików szablonów i definicji JS / CSS. Wszystko, co musisz zrobić, to po prostu zastąpić tylko te elementy, które chcesz dostosować za pomocą własnych. Zobacz poniższe linki, aby uzyskać instrukcje dotyczące tworzenia motywu.

Dokumentacja Magento Linki:

James Calcaben
źródło
Pliki szablonów pochodzą teraz z modułów, a nie pustych / luma, więc możesz je ominąć, jeśli nie potrzebujesz stylizacji / zmian. Na przykład, jeśli spojrzysz na app / design / frontend / Magento / blank / Magento_Catalog, wystarczy przenieść jeden element i dodać trochę stylizacji, szablony pochodzą z app / code / Magento / Catalog / view / frontend / templates i app / code / Magento / Catalog / view / base / templates
Ben Crook