TL: DR
Apakah Anda membangun menggunakan luma asli atau tema kosong? Atau sesuatu yang lain ?
Ini terserah Anda, menyatakan tema induk adalah opsional. Jika Anda tidak mendeklarasikan orang tua, Anda masih akan mundur ke modul (mis. Magento_Catalog) yang menyediakan file XML dan templat tetapi tidak ada gaya.
Apakah Anda menggunakan ekstensi untuk membantu Anda mengembangkan tema Anda?
Karena saya lebih suka bekerja dengan SCSS dan GULP saya sekarang menggunakan Frontools dan tema kosong SCSS . Ini menghilangkan banyak tekanan berurusan dengan default Grunt / LESS worflow.
Langkah mana yang Anda ikuti saat mengembangkan tema dari awal?
- Nyatakan temanya
- Hapus CSS tema induk (jika diperlukan)
- Tambahkan CSS / KURANG / SCSS Anda sendiri
Pendapat pribadi saya adalah yang terbaik untuk membuat 'tema kosong' Anda sendiri dari awal karena Anda dapat menyesuaikan ini menjadi apa yang Anda butuhkan.
Ini adalah bagaimana saya akan membuat tema dari awal, saya telah menggunakan NewStore / default sebagai vendor dan nama tema saya.
Sekarang untuk jawaban yang lebih rinci ...
Buat tema (sesuai dokumen resmi)
Buat tema sesuai dokumen resmi
Secara opsional mendeklarasikan orang tua
Di dalam app/design/frontend/NewStore/default/theme.xmlAnda memiliki pilihan untuk mendeklarasikan tema induk atau tidak, untuk contoh ini saya telah meninggalkan baris 3 ( <parent>Vendor/theme</parent>) sehingga tidak ada tema induk . Ini berarti semua file templat / tata letak akan berasal dari modul itu sendiri dan bukan Blank atau Luma, dan tidak akan ada styling tema karena ini ditambahkan dalam tema kosong.
Theme.xml saya terlihat seperti ini:
<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>
Hapus styling (jika Anda menetapkan tema induk) dan tambahkan CSS Anda sendiri
Jika Anda mengosongkan atau Luma sebagai orangtua, Anda harus mencegah pemuatan file CSS. Untuk melakukan ini, buat app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmldan tambahkan XML berikut:
<?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>
Ini menghapus styles-m.css, styles-l.cssdan print.cssditambahkan oleh tema kosong. Itu juga menambahkan styles.css sebagai basis untuk CSS Anda sendiri.
Jika Anda tidak menentukan induk, Anda dapat menghapus 3 <remove />tag dalam kode di atas.
Tambahkan CSS Anda sendiri
Anda sekarang dapat menata tema Anda sesuka Anda, saya penggemar Sass daripada KURANG jadi saya menambahkan file ini - app/design/frontend/NewStore/default/web/css/styles.scss
Saya mengubah warna latar belakang di sini hanya untuk membuktikan ini berfungsi, idealnya Anda hanya akan menggunakan file ini untuk mengimpor file Sass / Less lainnya.
Hasil
Hasil dari apa yang baru saja saya lakukan adalah tema tanpa gaya (terlepas dari latar belakang hijau saya yang indah) yang memungkinkan Anda untuk menata tema Anda tanpa bekerja dengan gaya Magento (terkadang sulit untuk dikerjakan).
Kiat
Jika Anda lebih suka bekerja dengan SCSS dan tidak punya waktu untuk membuat tema dari awal, saya sarankan menggunakan Frontools dan tema kosong SCSS baik oleh Snowdog Apps .
Saya menemukan aspek yang paling membuat frustrasi untuk bekerja dengan kode front-end Magento adalah seberapa spesifik gaya mereka, untuk membantu menghindari hal ini, saya akan merekomendasikan menggunakan konvensi penamaan BEM saat menulis gaya Anda sendiri.
Juga komentar yang bermanfaat adalah kuncinya, jika seorang dev yang dulu bekerja dengan Luma / Blank bekerja pada sebuah tema yang dibangun dari awal, mereka mungkin akan menemukan hal-hal bekerja sangat berbeda dengan apa yang mereka harapkan.