TP: DR
Yerel luma mı yoksa boş temayı mı kullanıyorsunuz? Veya başka bir şey?
Bu size bağlıdır, bir ana temayı bildirmek isteğe bağlıdır. Bir ebeveyn ilan etmezseniz, yine de XML ve şablon dosyaları sağlayan ancak stil içermeyen modüllere (örn. Magento_Catalog) geri döneceksiniz.
Temanızı geliştirmenize yardımcı olacak herhangi bir uzantı kullanıyor musunuz?
SCSS ve GULP ile çalışmayı tercih ederken, şimdi Frontools ve SCSS boş temasını kullanıyorum . Varsayılan Grunt / LESS worflow ile uğraşma stresinin çoğunu ortadan kaldırır.
Sıfırdan bir tema geliştirirken hangi adımları izlersiniz?
- Temayı ilan et
- Üst tema CSS'yi kaldırın (gerekirse)
- Kendi CSS / LESS / SCSS'nizi ekleyin
Benim kişisel görüşüm, kendi 'boş temanızı' sıfırdan yaratmanız en iyisidir, çünkü bunu tam olarak neye ihtiyacınız olacak şekilde düzenleyebilirsiniz.
Bu şekilde sıfırdan bir tema oluşturacağım, NewStore / default'ı satıcı ve tema adım olarak kullandım.
Şimdi daha ayrıntılı cevap için ...
Temayı oluşturun (resmi belgelere göre)
Resmi dokümanlar uyarınca temayı oluşturun
İsteğe bağlı olarak bir ebeveyn ilan etmek
İçinizde app/design/frontend/NewStore/default/theme.xmlbir ana tema bildirme seçeneğine sahipsiniz veya olmasın, bu örnekte satır 3 ( <parent>Vendor/theme</parent>) ' ü dışarıda bıraktım, böylece ana tema yok . Bu, tüm şablonların / düzen dosyalarının Boş veya Luma'dan değil modüllerin kendisinden geleceği ve boş temaya eklendiği için tema stilinin olmayacağı anlamına gelir.
Benim tema.xml şöyle görünür:
<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>
Stillendirmeyi kaldırın (bir üst tema belirlerseniz) ve kendi CSS’nizi ekleyin
Boş veya Luma'yı ebeveyn olarak ayarlarsanız, CSS dosyalarının yüklenmesini önlemeniz gerekir. Bunu yapmak app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmliçin aşağıdaki XML'yi oluşturun ve ekleyin:
<?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>
Bu kaldırır styles-m.css, styles-l.cssve print.cssboş temaya göre ekledi. Ayrıca kendi CSS'iniz için üs olarak styles.css ekler.
Bir ebeveyn belirtmediyseniz <remove />, yukarıdaki koddaki 3 etiketi kaldırabilirsiniz .
Kendi CSS'inizi ekleyin
Şimdi temanızı biçimlendirebilirsiniz ancak lütfen LESS yerine Sass hayranıyım bu yüzden bu dosyayı ekledim - app/design/frontend/NewStore/default/web/css/styles.scss
Burada işe yaradığını ispatlamak için arka plan rengini değiştirdim, ideal olarak bu dosyayı sadece diğer Sass / Less dosyalarını almak için kullanacaktınız.
Sonuç
Az önce yaptığımın sonucu, Magento'nun (bazen üzerinde çalışılması zor olan) stillerle çalışmadan, stilinizi şekillendirmenize izin vermeyen (güzel yeşil arka planım dışında) bir tema.
İpuçları
SCSS ile çalışmayı tercih ediyorsanız ve sıfırdan bir tema oluşturmak için zamanınız yoksa, hem Snowdog Apps tarafından hem de Frontools ve SCSS blank temasını kullanmanızı öneririm .
Magento'nun ön koduyla çalışmanın en sinir bozucu yönünü kendi stilinin ne kadar belirgin olduğunu buluyorum, bunun önüne geçmek için BEM adlandırma kurallarını kendi stilinizi yazarken kullanmanızı tavsiye ederim .
Ayrıca faydalı yorumlar önemlidir, eğer Luma / Blank ile çalışmak için kullanılan bir cihaz sıfırdan inşa edilmiş bir tema üzerinde çalışmışsa, muhtemelen işleri beklediklerinden oldukça farklı buluyorlardı.