দ্রষ্টব্য 1: এটি সর্বদা ধরে নিবে আপনি প্রসারিত করছেন magento-blank।
নোট 2: <theme-dir>হয়app/design/frontend/Vendor/theme/
বেসিকগুলি: বেস ভেরিয়েবলগুলি পরিবর্তন করা
(টিএল; ডাঃ, উপসংহারে এড়িয়ে যান)
বেশিরভাগ গাইড আমি পেয়েছি কেবলমাত্র কম পদক্ষেপে এই পদক্ষেপটি কভার করে, তাই আমি এটিকে ছোট রাখার চেষ্টা করব। ম্যাজেন্টো 2 এ ভেরিয়েবলগুলির একটি বেস সেট রয়েছে যা একটি থিমের সাধারণত ব্যবহৃত দিকগুলি সংজ্ঞায়িত করে। রঙ, ফন্ট, পৃষ্ঠা শিরোনামের স্টাইল এবং আরও এই ভেরিয়েবলগুলিতে সংজ্ঞায়িত করা হয়।
এতে <magento-root>/lib/web/css/source/lib/variables/আপনি স্বজ্ঞাতভাবে নামকরণ করা অনেকগুলি এলইএসএস ফাইল পাবেন। এর প্রত্যেকটিতে আপনি Magento 2 এ প্রচলিত সাধারণ উপাদানগুলির জন্য ভেরিয়েবলগুলিকে নির্ধারিত মানগুলি পেতে পারেন।
এই ভেরিয়েবলগুলির কোনও পরিবর্তন করতে, কেবল একটি ফাইল তৈরি করুন <theme-dir>/web/css/source/_theme.less।
উদাহরণ:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
প্রযুক্তিগতভাবে, আপনি এখানে যে কোনও সিএসএস বা কম রাখতে পারেন এবং এটি সফলভাবে আপনার সাইটে প্রযোজ্য হবে (তবে এটি করবেন না)। আমি কীভাবে এটি একটি মুহুর্তে কাজ করে তা ব্যাখ্যা করব।
নতুন সিএসএস ফাইল যুক্ত করা হচ্ছে
আপনার সমস্ত টেম্পলেট পৃষ্ঠাগুলির শীর্ষে আপনি নতুন সিএসএস যুক্ত করতে পারেন।
তৈরি করুন <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>
এবং তারপরে আপনি আপনার নতুন সিএসএস বা কম ব্যবহার করে একটি ফাইল তৈরি করুন:
<theme-dir>/web/css/myStyle.less। আপনি এখানে কম বা সিএসএস লিখতে পারেন।
ওভাররাইডিং বিদ্যমান স্টাইলগুলি
আমি দেখতে পেলাম যে ম্যাজেন্টো 2 কম সহজেই একটি নতুন সিএসএস ফাইল যুক্ত করে ছাড়ানো হয় না। এবং এখান থেকেই আমি হারিয়ে যেতে শুরু করেছি এবং আমি ব্যাখ্যা করব কীভাবে ম্যাজেন্টো 2 এর কম ফাইলগুলি সন্ধান করে।
ডিফল্টরূপে, ম্যাজেন্টো 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
এই ফাইলগুলির মধ্যে অন্যান্য এলইএসএস ফাইল অন্তর্ভুক্ত রয়েছে (আমদানি করা), যা প্রায়শই আরও বেশি কম ফাইল অন্তর্ভুক্ত করে। এবং এখানেই অন্য গাইডগুলি আমার কাছে অসহায় হয়ে পড়েছিল এবং আমি যা পেয়েছি তা ব্যাখ্যা করব, সর্বোপরি আমার পক্ষে।
উত্স / lib যাদু
ইন styles-m.less, সেখানে লাইন হল: @import 'source/lib/_responsive.less';। আপনি খেয়াল করবেন থিমটিতে কোনও source/libডিরেক্টরি নেই magento-blank। এটি স্পষ্টতই যে ম্যাজেন্টো 2 স্টাইলগুলি শেষ পর্যন্ত ফিরে আসে <magento-root>/lib/web/css/। এটি আপনি খুঁজে পাবেন source/lib/_responsive.less।
থিমটিতে আমদানি করা _theme.lessকোনও source/libফাইলের কারণে আপনি যে ভেরিয়েবলগুলি ব্যবহার করেন সেগুলি উপলব্ধ magento-blank। দ্রষ্টব্য: _theme.less ডিফল্ট থিমগুলির মধ্যে একটি খালি ফাইল। এটি কেন নোট করা গুরুত্বপূর্ণ তা জানতে পড়া চালিয়ে যান
"স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত" কম ফাইলগুলি ESS
আমি পেয়েছি এমন কয়েকটি গাইড আপনি জোর দিয়েছিলেন যে আপনি তৈরি করতে পারেন <theme-dir>/web/css/_styles.lessকারণ ম্যাজেন্টো স্বয়ংক্রিয়ভাবে সেই ফাইলটি সন্ধান করে এবং এতে অন্তর্ভুক্ত রয়েছে। আমি এটি খারাপ পরামর্শ বলে মনে করেছি।
আপনি যদি তৈরি করেন তবে <theme-dir>/web/css/_styles.lessআপনার সাইটটি ভেঙে যাবে। theme-frontend-blank/web/css/styles-m.lessআমদানি করে _styles.less, যার ফলে আরও 3 টি .বিহীন ফাইল আমদানি হয়, যা প্রত্যেকে আরও বেশি .বিহীন ফাইল আমদানি করে।
আপনি যদি একটি তৈরি করেন তবে আপনি _styles.lessএটিকে ওভাররাইড করছেন। ওভাররাইড করে _styles.lessআপনি যে ফাইলগুলি আমদানি করেন সে সমস্ত ফাইল এবং সেই ফাইলগুলি আমদানি করে এমন সমস্ত ফাইলকে আপনি ওভাররাইড করছেন।
সম্পর্কে দ্রষ্টব্য _theme.less: এই ফাইলটি ডিফল্ট থিমগুলিতে খালি রয়েছে, এবং তাই আপনি নিজের থিমটি কোনও ডিফল্টর উপর ভিত্তি করে রাখলে কেবল তৈরি করা এবং যুক্ত করা নিরাপদ। তবে, আপনি যদি ইতিমধ্যে একটি ডিফল্ট প্রসারিত কোনও থিম প্রসারিত করেন তবে সম্ভাবনা_theme.lessইতিমধ্যে ব্যবহৃত হয়েছে is এটি আবার তৈরি করা এটিকে ওভাররাইড করবে।
যাদুকরী
ইন styles-m.lessআপনি খুঁজে মন্তব্য লাইনের একটি দম্পতি দেখতে পাবেন:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
এই লাইনগুলি আসলে মন্তব্য করে না! ম্যাজেন্টো 2 এর সাথে শুরু হওয়া লাইনের জন্য বিশেষ হ্যান্ডলিং রয়েছে //@magento_import। এই লাইনগুলি কেবলমাত্র ফাইলগুলিতে অন্তর্ভুক্ত করা যেতে পারে <theme-dir>/web/css।
উপরের লাইনগুলি ম্যাজেন্টো 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 হবে স্বয়ংক্রিয়ভাবে পাওয়া যায় এবং অন্তর্ভুক্ত করা, এমনকি যদি তার একটি নতুন মডিউল বা একটি মডিউল ইতিমধ্যে যে ফাইল নেই।
সচেতন থাকুন যে বেশিরভাগ মডিউলগুলির জন্য ম্যাজেন্টো-ব্লঙ্ক those ফাইলগুলি অন্তর্ভুক্ত করে এবং আপনি যদি এই পদ্ধতিটি ব্যবহার করতে চান তবে আপনাকে মূলগুলি কপি-পেস্ট করতে হবে (যদি আপনি একটি সম্পূর্ণ পুনরায় লেখার চেষ্টা না করেন)।
উপসংহার
(পড়ুন: ব্যবহার করবেন না _styles.less)।
আপনি যখন কোনও উপাদানটির সিএসএস পরিবর্তন করতে চাইছেন তখন আপনি যে ফাইলটি স্টাইলটি সংজ্ঞায়িত করেছেন তা সর্বাধিক করতে চান। কখনও কখনও আপনাকে যা করতে হবে তা হল একটি ভেরিয়েবল পরিবর্তন করা _theme.less। বেশির ভাগ সময়ই, আমি সন্দেহ, আপনি শুধু কপি-পেস্ট করতে হবে _module.lessবা _widgets.lessআপনার থিম মধ্যে এবং করতে পরিবর্তন।
আপনি যদি একটি নতুন মডিউল তৈরি করেছেন, বা নতুন এইচটিএমএল উপাদান রয়েছে, আপনার একটি কম ফাইল তৈরি করতে হবে এবং এটি <head>প্রতিটি পৃষ্ঠার পৃথকভাবে অন্তর্ভুক্ত করতে হবে ।
জটিল ক্ষেত্রে আপনার একটি নতুন তৈরি করতে হবে @importবা @magento_import। আপনি সর্বনিম্ন সন্তানের সন্ধান করতে চান যা আপনি যা করছেন তা বোঝায়, সুতরাং আপনি অনাবশ্যক ফাইলগুলির একগুচ্ছ অনুলিপি করছেন বা বিভ্রান্তিকর @importলাইন যুক্ত করছেন না যা কোথাও পৌঁছেছে বলে মনে হচ্ছে।