नोट 1: यह हमेशा मान लेगा कि आप विस्तार कर रहे हैं magento-blank।
नोट 2: <theme-dir>हैapp/design/frontend/Vendor/theme/
मूल बातें: बेस वेरिएबल्स बदलना
(tl; डॉ। के लिए, निष्कर्ष पर जाएं)
अधिकांश मार्गदर्शिकाएँ मैंने केवल लेस के साथ थीमिंग में इस चरण को कवर किया, इसलिए मैं इसे छोटा रखने की कोशिश करूंगा। Magento 2 में वैरिएबल्स का एक बेस सेट है जो आमतौर पर किसी थीम के उपयोग किए गए पहलुओं को परिभाषित करता है। रंग, फ़ॉन्ट, पृष्ठ शीर्षक की शैली, और इसी तरह इन चरों में परिभाषित किया गया है।
इसमें <magento-root>/lib/web/css/source/lib/variables/आपको बहुत सारी सहज नाम वाली LESS फाइलें मिलेंगी। इनमें से प्रत्येक में आप Magento 2 में कई सामान्य तत्वों के लिए चर के लिए निर्दिष्ट मान पा सकते हैं।
इनमें से किसी भी चर को बदलने के लिए, बस एक फ़ाइल बनाएँ <theme-dir>/web/css/source/_theme.less।
उदाहरण:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
तकनीकी रूप से, आप यहां कोई सीएसएस या लेस रख सकते हैं, और यह आपकी साइट पर सफलतापूर्वक लागू होगा (लेकिन ऐसा न करें)। मैं समझाता हूं कि यह एक क्षण में कैसे काम करता है।
नई CSS फ़ाइल जोड़ना
आप अपने सभी टेम्पलेट पेजों के प्रमुख में नया सीएसएस जोड़ सकते हैं।
बनाएँ <theme-dir>/Magento_Theme/layout/default_head_blocks.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>
<css src="css/myStyle.css" />
</head>
</page>
और फिर आप अपने नए CSS या LESS के साथ एक फाइल बनाते हैं:
<theme-dir>/web/css/myStyle.less। आप यहां LESS या CSS लिख सकते हैं।
मौजूदा शैलियाँ ओवरराइडिंग
मैंने पाया कि केवल एक नई सीएसएस फ़ाइल जोड़कर Magento 2 LESS को आसानी से दबाया नहीं गया है। और यह वह जगह है जहां मैं खोना शुरू कर दिया, और मैं समझाऊंगा कि मैगेंटो 2 अपनी लेस फ़ाइलों को कैसे ढूंढता है।
डिफ़ॉल्ट रूप से, Magento 2 में ये फ़ाइलें शामिल होंगी (और अंततः वापस आती हैं):
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
इन फ़ाइलों में अन्य LESS फाइलें (आयात) शामिल हैं, जिनमें अक्सर LESS फाइलें भी शामिल हैं। और यह वह जगह है जहाँ अन्य मार्गदर्शक मेरे लिए अयोग्य हो गए और मैं समझाऊंगा कि मुझे क्या मिला, सबसे अच्छा मैं कर सकता था।
स्रोत / परिवाद जादू
में styles-m.less, वहाँ लाइन है @import 'source/lib/_responsive.less';:। आप देखेंगे कि विषय source/libमें कोई निर्देशिका नहीं है magento-blank। यह स्पष्ट है कि Magento 2 शैलियों अंततः वापस करने के लिए गिर जाते हैं <magento-root>/lib/web/css/। यह वहाँ है आप पाते हैं source/lib/_responsive.less।
आपके द्वारा उपयोग किए जाने वाले चर थीम में आयात की गई फ़ाइल के _theme.lessकारण उपलब्ध हैं । नोट: डिफ़ॉल्ट थीम में एक खाली फ़ाइल है। यह जानने के लिए पढ़ना जारी रखें कि यह नोट करना क्यों महत्वपूर्ण है।source/libmagento-blank _theme.less
"स्वचालित रूप से शामिल" कम फ़ाइलें
कुछ गाइडों में मैंने पाया कि आप बना सकते हैं <theme-dir>/web/css/_styles.lessक्योंकि Magento स्वचालित रूप से खोजता है, और इसमें वह फ़ाइल भी शामिल है। मुझे यह बुरी सलाह लगी।
यदि आप बनाते हैं <theme-dir>/web/css/_styles.less, तो आपकी साइट टूट जाएगी। theme-frontend-blank/web/css/styles-m.lessआयात _styles.less, जो बदले में 3 और .less फ़ाइलें आयात करता है, जो प्रत्येक और भी .less फ़ाइलें आयात करता है।
यदि आप एक बनाते हैं _styles.less, तो आप इसे ओवरराइड कर रहे हैं। ओवरराइड करके _styles.less, आप उन सभी फ़ाइलों को ओवरराइड कर रहे हैं जो इसे आयात करती हैं, और उन सभी फ़ाइलों को आयात करती हैं, और इसी तरह।
के बारे में ध्यान दें _theme.less: यह फ़ाइल डिफ़ॉल्ट थीम में खाली है, और इसलिए यदि आप डिफ़ॉल्ट रूप से अपने विषय को आधार बना रहे हैं, तो बस बनाना और जोड़ना शुरू करना सुरक्षित है। हालाँकि, यदि आप एक विषय का विस्तार कर रहे हैं जो पहले से ही एक डिफ़ॉल्ट का विस्तार करता है, तो संभावना_theme.lessपहले से ही उपयोग की जाती है। फिर से बनाने से यह ओवरराइड हो जाएगा।
जादुई @magento_import
में styles-m.lessआप बाहर टिप्पणी की लाइनों की एक जोड़ी देखेंगे:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
इन पंक्तियों ने वास्तव में टिप्पणी नहीं की! Magento 2 के साथ शुरू होने वाली लाइनों के लिए विशेष हैंडलिंग है //@magento_import। इन लाइनों को केवल फाइलों में शामिल किया जा सकता है <theme-dir>/web/css।
ऊपर दी गई लाइनें Magento 2 को निर्देश देती हैं कि दिए गए पैटर्न का पालन करने वाली थीम के भीतर कोई भी फाइल शामिल करें। तो उपरोक्त पंक्तियों में स्वचालित रूप से शामिल होंगे:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
फ़ाइलें नाम जोड़ने की _widgets.lessऔर _module.less होगा स्वतः मिल गया है और शामिल किया है, भले ही इसके लिए एक नया मॉड्यूल या एक मॉड्यूल है कि पहले से ही उस फ़ाइल नहीं है।
ध्यान रखें कि मैगेंटो-ब्लैंक में अधिकांश मॉड्यूल के लिए वे फाइलें शामिल हैं, और यदि आप इस पद्धति का उपयोग करना चाहते हैं, तो आपको मूल (जब तक आप पूर्ण री-राइट नहीं कर रहे हैं) कॉपी-पेस्ट करना होगा।
निष्कर्ष
(पढ़ें: उपयोग न करें _styles.less)।
जब आप किसी तत्व के सीएसएस को बदलना चाहते हैं, तो आप सबसे अच्छा करना चाहते हैं कि आप यह जान सकते हैं कि उस शैली को किस फ़ाइल में परिभाषित किया गया है। कभी-कभी आपको केवल एक चर को बदलने की आवश्यकता होती है _theme.less। ज्यादातर बार, मुझे संदेह है, आपको बस अपने विषय में कॉपी-पेस्ट करने _module.lessया _widgets.lessबदलाव करने की आवश्यकता होगी ।
यदि आपने एक नया मॉड्यूल बनाया है, या नए HTML तत्व हैं, तो आपको एक LESS फ़ाइल बनाने की आवश्यकता हो सकती है और इसे <head>हर पृष्ठ पर अलग से शामिल किया जा सकता है।
जटिल मामलों में, आपको एक नया @importया बनाने की आवश्यकता हो सकती है @magento_import। आप सबसे कम बच्चे को ढूंढना चाहते हैं जो आप कर रहे हैं उसके लिए समझ में आता है, इसलिए आप अनावश्यक फ़ाइलों के एक समूह को कॉपी-पेस्ट नहीं कर रहे हैं या भ्रमित @importलाइनों को जोड़ते हैं जो कहीं भी नेतृत्व करने के लिए प्रकट नहीं होते हैं।