Темы для Magento 2 - Начиная с нуля

27

Некоторые из вас, вероятно, читали эту тему, посвященную тематике с нуля, для Magento 1: Тематика - с нуля.

Мне было интересно, что будет лучшей практикой для разработки темы с нуля для Magento 2?

  • Вы строите, используя натив lumaили blankтему? Или что-нибудь еще?
  • Используете ли вы какие-либо расширения, чтобы помочь вам развить свою тему?
  • Какие шаги вы выполняете при разработке темы с нуля?
magento2 theme template magento-2.0 design Рафаэль в цифровом пианизме
источник
Я предоставляю некоторые ссылки в своем ответе, пожалуйста, пройдите по нему, вы узнаете о внешней архитектуре и разработке Magento 2.0.
Ашеем Патро
Следуйте инструкциям Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/…, чтобы создать тему для внешнего интерфейса.
Rishabh Rk Rai

Ответы:

45

TL: DR

Вы строите, используя родную люму или пустую тему? Или что-нибудь еще?

Это зависит от вас, объявление родительской темы не является обязательным. Если вы не объявите родителя, вы все равно будете использовать модули (например, Magento_Catalog), которые предоставляют XML и файлы шаблонов, но не имеют стиля.

Используете ли вы какие-либо расширения, чтобы помочь вам развить свою тему?

Поскольку я предпочитаю работать с SCSS и GULP, я теперь использую Frontools и пустую тему SCSS . Это устраняет большую часть стресса при работе со стандартным потоком Grunt / LESS.

Какие шаги вы выполняете при разработке темы с нуля?

  1. Объявить тему
  2. Удалить родительскую тему CSS (если требуется)
  3. Добавьте свой собственный 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, работал над созданной с нуля темой, он, вероятно, обнаружил бы, что все работает совсем не так, как они ожидали.

Бен Крук
источник
Я создал свою собственную пустую тему, используя ваши инструкции, без родительской темы, определенной в theme.xml. Тем не менее, есть все виды стилей, видимых в передней части. Установка Magento находится в developerрежиме, и все кэши были очищены. Я не знаю, откуда взялись все эти стили - у вас есть идея?
fritzmg
У вас установлены какие-либо расширения / плагины? Также может быть Varnish, если он установлен, чтобы исключить добавление знака вопроса и случайной строки после URL, например,?=123
Ben Crook
Да, я исключил лак (или аналогичный). Расширения или плагины не установлены.
fritzmg
Это полный стиль темы или только ее часть? Мне трудно сказать, не видя сайт и кодовую базу. Может быть, задать новый вопрос и опубликовать некоторые детали там? Если вы пометите меня, я посмотрю, смогу ли я решить это.
Бен Крук
Насколько я понимаю, это полная тема. Плюс включенный файл CSS из моей собственной темы. Да, вероятно, лучше создать новый вопрос для этого :)
fritzmg
8

Есть много обучающих программ для начала темы в Magento 2.0. Я предоставляю некоторые ссылки на видео и обычные ссылки, где вы можете получить хорошие знания о разработке темы в magento 2.0. нажмите здесь для видео

взять ссылку из этой ссылки также

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/

По этой ссылке вы узнаете о внешней архитектуре magento 2.0

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

также проверьте эти две ссылки

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

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

Ашеем Патро
источник
5

Я наследую с нуля, но быстро стремлюсь к созданию более легкой базовой темы, которая имеет гораздо менее сложную структуру CSS.

Стоит отметить, что в 2015 году Magento вышли и сказали, что они не рекомендуют наследовать от luma, поскольку они оставляют за собой право вносить в него необъявленные изменения для своих собственных маркетинговых и демонстрационных целей. Позже они пересмотрели это утверждение, заявив, что их цель - разрешить наследование .

Лоренс
источник
3

Лучший способ начать разработку темы, чтобы начать с наследующим либо lumaили blank. Причина этого в том, что они построены так, чтобы быть отзывчивыми (т.е. дружественными к нескольким разрешениям). Это также уменьшает объем работы, которую вы должны выполнить при создании различных файлов шаблонов и определений JS / CSS. Все, что вам нужно сделать, это просто переопределить только те части, которые вы хотите настроить своими собственными. См. Ссылки ниже для различных инструкций о том, как разработать тему.

Magento Документация Ссылки:

Джеймс Калкабен
источник
Файлы шаблонов теперь берутся из модулей, а не из бланка / luma, так что вы можете эффективно обойти их, если вам не требуется стилизация / изменения. Например, если вы посмотрите на app / design / frontend / Magento / blank / Magento_Catalog, все, что он делает - это перемещает один элемент и добавляет некоторые стили, шаблоны приходят из app / code / Magento / Catalogue / view / frontend / templates и приложение / код / ​​Magento / Каталог / просмотр / база / шаблоны
Бен Крук