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?
- Zadeklaruj motyw
- Usuń CSS motywu nadrzędnego (jeśli jest wymagany)
- 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).
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.