TL: DR
Вы строите, используя родную люму или пустую тему? Или что-нибудь еще?
Это зависит от вас, объявление родительской темы не является обязательным. Если вы не объявите родителя, вы все равно будете использовать модули (например, Magento_Catalog), которые предоставляют XML и файлы шаблонов, но не имеют стиля.
Используете ли вы какие-либо расширения, чтобы помочь вам развить свою тему?
Поскольку я предпочитаю работать с SCSS и GULP, я теперь использую Frontools и пустую тему SCSS . Это устраняет большую часть стресса при работе со стандартным потоком Grunt / LESS.
Какие шаги вы выполняете при разработке темы с нуля?
- Объявить тему
- Удалить родительскую тему CSS (если требуется)
- Добавьте свой собственный CSS / LESS / SCSS
Мое личное мнение: лучше всего создать свою собственную «пустую тему» с нуля, так как вы можете настроить ее именно так, как вам нужно.
Вот так я бы создал тему с нуля, я использовал NewStore / default в качестве своего поставщика и название темы.
Теперь для более подробного ответа ...
Создать тему (согласно официальным документам)
Создайте тему согласно официальным документам
При желании объявление родителя
Внутри у app/design/frontend/NewStore/default/theme.xmlвас есть выбор: объявить родительскую тему или нет, для этого примера я пропустил строку 3 ( <parent>Vendor/theme</parent>), поэтому родительская тема отсутствует . Это означает, что все шаблоны / файлы макетов будут исходить от самих модулей, а не от Blank или Luma, и не будет стилизации темы, так как это добавлено в пустую тему.
Мой theme.xml выглядит так:
<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>
Удалите стилизацию (если вы установили родительскую тему) и добавьте свой собственный CSS
Если вы установите пустой или Luma в качестве родителя, вам нужно будет запретить загрузку CSS-файлов. Для этого создайте app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlи добавьте следующий 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>
Это удаляет styles-m.css, styles-l.cssи print.cssдобавляется пустой темой. Он также добавляет styles.css в качестве основы для вашего собственного CSS.
Если вы не указали родителя, вы можете удалить 3 <remove />тега из кода выше.
Добавьте свой собственный CSS
Теперь вы можете оформить свою тему, как вам угодно, я поклонник Sass, а не LESS, поэтому я добавил этот файл - app/design/frontend/NewStore/default/web/css/styles.scss
Я изменил цвет фона здесь, чтобы доказать, что это работает, в идеале вы должны использовать этот файл только для импорта других файлов Sass / Less.
Результат
Результатом того, что я только что сделал, является тема без стилей (кроме моего красивого зеленого фона), позволяющая вам стилизовать вашу тему, не работая с стилем Magento (иногда трудным для работы).
подсказки
Если вы предпочитаете работать с SCSS и у вас нет времени на создание темы с нуля, я рекомендую использовать Frontools и пустую тему SCSS, разработанные Snowdog Apps .
Я считаю, что наиболее разочаровывающим аспектом работы с интерфейсным кодом Magento является то, насколько специфичен их стиль. Чтобы избежать этого, я бы порекомендовал использовать соглашение об именах BEM при написании собственного стиля.
Также полезные комментарии являются ключевыми, если бы разработчик, привыкший работать с Luma / Blank, работал над созданной с нуля темой, он, вероятно, обнаружил бы, что все работает совсем не так, как они ожидали.