TL: DR
Чи будуєте ви, використовуючи рідну луму чи порожню тему? Або що-небудь ще?
Це вирішувати саме вам, оголошення батьківської теми необов’язковим. Якщо ви не заявляєте батьків, ви все одно будете відновлювати модулі (наприклад, Magento_Catalog), які надають XML-файли та файли шаблонів, але не мають стилів.
Чи використовуєте ви якесь розширення, щоб допомогти вам розробити свою тему?
Оскільки я вважаю за краще працювати з SCSS та GULP, тепер використовую Frontools та порожню тему SCSS . Це знімає велику напругу, пов’язану з робочим потоком за умовчанням Grunt / LESS
Яких кроків ви дотримуєтесь, розробляючи тему з нуля?
- Оголосіть тему
- Видаліть батьківську тему CSS (якщо потрібно)
- Додайте свій власний CSS / МЕНШЕ / SCSS
Моя особиста думка - найкраще створити власну «порожню тему» з нуля, оскільки ви зможете адаптувати це саме до того, що вам потрібно.
Ось як я створив би тему з нуля, я використовував NewStore / за замовчуванням як свого постачальника та назву теми.
Тепер для більш детальної відповіді ...
Створіть тему (відповідно до офіційних документів)
Створіть тему згідно з офіційними документами
За бажанням оголосити батьків
У app/design/frontend/NewStore/default/theme.xmlвас є вибір оголошення батьківської теми чи ні, для цього прикладу я залишив рядок 3 ( <parent>Vendor/theme</parent>), тому немає батьківської теми . Це означає, що всі файли шаблонів / макетів надходитимуть від самих модулів, а не Blank або Luma, і стилі теми не будуть, оскільки це додано в порожню тему.
Мій topic.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, а не менше, тому я додав цей файл - app/design/frontend/NewStore/default/web/css/styles.scss
Я змінив тут колір тла лише для того, щоб довести, що це працює, в ідеалі ви використовуєте цей файл лише для імпорту інших файлів Sass / Less.
Результат
Результатом того, що я щойно робив, є тема без стилізації (крім мого прекрасного зеленого фону), що дозволяє вам стилізувати свою тему, не працюючи зі стилями Magento (іноді складно працювати).
Поради
Якщо ви віддаєте перевагу роботі з SCSS і не маєте часу створювати тему з нуля, рекомендую використовувати Frontools та пусту тему SCSS як від Snowdog Apps .
Мені здається, що найспритнішим аспектом роботи з Magento переднього коду є те, наскільки специфічним є їх стиль, щоб уникнути цього, я б рекомендував використовувати конвенцію BEM про іменування під час написання власного стилю.
Також корисні коментарі є ключовими, якщо розробник, який працював з Luma / Blank, працював над темою, побудованою з нуля, вони, ймовірно, знайдуть, що все працює зовсім інакше, ніж вони очікують.