टी एल: डॉ
क्या आप देशी लूमा या रिक्त विषय का उपयोग कर निर्माण करते हैं? या फिर कुछ और ?
यह आपके ऊपर है, मूल विषय घोषित करना वैकल्पिक है। यदि आप एक अभिभावक की घोषणा नहीं करते हैं, तो आप अभी भी मॉड्यूल (जैसे Magento_Catalog) पर लौट आएंगे जो XML और टेम्पलेट फ़ाइलें प्रदान करते हैं, लेकिन बहुत स्टाइलिंग।
क्या आप अपने विषय को विकसित करने में सहायता के लिए किसी एक्सटेंशन का उपयोग करते हैं?
जैसा कि मैं एससीएसएस और जीयूएलपी के साथ काम करना पसंद करता हूं मैं अब फ्रंटूल और एससीएसएस रिक्त विषय का उपयोग करता हूं । यह डिफ़ॉल्ट ग्रन्ट / LESS वर्फ्लो से निपटने के तनाव को दूर करता है।
स्क्रैच से किसी थीम को विकसित करते समय आप किन चरणों का पालन करते हैं?
- थीम घोषित करें
- मूल विषय सीएसएस निकालें (यदि आवश्यक हो)
- अपना खुद का CSS / LESS / SCSS जोड़ें
मेरी व्यक्तिगत राय यह है कि खरोंच से अपना खुद का 'खाली विषय' बनाना सबसे अच्छा है क्योंकि आप इसे ठीक वैसा ही बना सकते हैं जैसा आपको चाहिए।
यह है कि मैं स्क्रैच से एक थीम कैसे बनाऊंगा, मैंने अपने विक्रेता और थीम नाम के रूप में न्यूस्टोर / डिफ़ॉल्ट का उपयोग किया है।
अब अधिक विस्तृत जवाब के लिए ...
थीम बनाएं (आधिकारिक डॉक्स के अनुसार)
आधिकारिक डॉक्स के अनुसार थीम बनाएं
वैकल्पिक रूप से माता-पिता घोषित करना
आपके भीतर app/design/frontend/NewStore/default/theme.xmlमूल विषय घोषित करने या न करने का विकल्प है, इस उदाहरण के लिए मैंने पंक्ति 3 ( <parent>Vendor/theme</parent>) को छोड़ दिया है, इसलिए कोई मूल विषय नहीं है । इसका मतलब है कि सभी टेम्प्लेट / लेआउट फाइलें मॉड्यूल से स्वयं आ रही होंगी और ब्लैंक या लूमा नहीं होंगी, और इसमें कोई थीम स्टाइल नहीं होगा क्योंकि यह रिक्त विषय में जोड़ा गया है।
मेरा विषय। 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>
स्टाइल निकालें (यदि आप एक मूल विषय सेट करते हैं) और अपना खुद का सीएसएस जोड़ें
यदि आप एक माता-पिता के रूप में रिक्त या लूमा सेट करते हैं, तो आपको सीएसएस फ़ाइलों को लोड होने से रोकने की आवश्यकता होगी। 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रिक्त विषय द्वारा जोड़ा जाता है। यह अपने खुद के सीएसएस के लिए आधार के रूप में style.css भी जोड़ता है।
यदि आपने माता-पिता को निर्दिष्ट नहीं किया है तो आप <remove />ऊपर दिए गए कोड में 3 टैग निकाल सकते हैं।
अपने खुद के सीएसएस जोड़ें
अब आप अपनी थीम को स्टाइल कर सकते हैं, लेकिन कृपया, मैं लेस के बजाय सैस का प्रशंसक हूं, इसलिए मैंने इस फाइल को जोड़ा - app/design/frontend/NewStore/default/web/css/styles.scss
मैंने इस कार्य को सिद्ध करने के लिए यहां पृष्ठभूमि का रंग बदल दिया है, आदर्श रूप से आप इस फ़ाइल का उपयोग अन्य Sass / Less फाइल आयात करने के लिए करेंगे।
परिणाम
जो मैंने अभी किया है उसका परिणाम बिना स्टाइल के (मेरे सुंदर हरे रंग की पृष्ठभूमि के अलावा) एक विषय है, जो आपको मैगेंटो के साथ काम करने के बिना अपनी थीम को स्टाइल करने की अनुमति देता है (कभी-कभी मुश्किल से स्टाइल करना)।
टिप्स
यदि आप SCSS के साथ काम करना पसंद करते हैं और मेरे पास फ़्रैड से थीम बनाने का समय नहीं है, तो मैं फ़्रान्स और SCSS ब्लैंक थीम का उपयोग स्नोडॉग ऐप्स द्वारा करने की सलाह देता हूँ ।
मुझे लगता है कि मैगेंटो के फ्रंट-एंड कोड के साथ काम करने के लिए सबसे निराशाजनक पहलू यह है कि उनकी स्टाइलिंग कितनी विशिष्ट है, इससे बचने में मदद करने के लिए मैं अपने स्वयं के स्टाइल को लिखते समय BEM नामकरण सम्मेलन का उपयोग करने की सलाह दूंगा ।
यदि सहायक देवता ल्युमा / ब्लैंक के साथ काम करते थे, तो स्क्रैच से निर्मित थीम पर काम करने के लिए इस्तेमाल की जाने वाली टिप्पणी भी महत्वपूर्ण है, वे संभवतः उन चीजों से अलग काम करते हैं जो वे अपेक्षा करते हैं।