লিকুইড ভেরিয়েবল ব্যবহার করে তৈরি করা আপনার Shopify CSS ছোট করার সবচেয়ে সহজ উপায়

Shopify লিকুইড সিএসএস ফাইলের জন্য ছোট স্ক্রিপ্ট

আমরা একটি নির্মাণ আউট শপাইফ প্লাস একটি ক্লায়েন্টের জন্য সাইট যার প্রকৃত থিম ফাইলে তাদের শৈলীর জন্য অনেকগুলি সেটিংস রয়েছে। যদিও এটি সহজেই শৈলী সামঞ্জস্য করার জন্য সত্যিই সুবিধাজনক, এর মানে হল যে আপনার কাছে স্ট্যাটিক ক্যাসকেডিং স্টাইল শীট নেই (সিএসএস) ফাইল যা আপনি সহজেই করতে পারেন অল্প করা (আকার কমান)। কখনও কখনও এটি CSS হিসাবে উল্লেখ করা হয় সঙ্কোচন এবং সংকুচিতকারী আপনার সিএসএস।

CSS Minification কি?

আপনি যখন একটি স্টাইলশীটে লিখছেন, আপনি একটি নির্দিষ্ট HTML উপাদানের জন্য শৈলীটি একবার সংজ্ঞায়িত করুন এবং তারপরে যেকোন সংখ্যক ওয়েব পৃষ্ঠায় এটি বারবার ব্যবহার করুন৷ উদাহরণস্বরূপ, যদি আমি আমার সাইটে আমার ফন্টগুলি কেমন দেখায় তার জন্য কিছু নির্দিষ্টকরণ সেট আপ করতে চাই, আমি আমার CSS নিম্নরূপ সংগঠিত করতে পারি:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

সেই স্টাইলশীটের মধ্যে, প্রতিটি স্পেস, লাইন রিটার্ন এবং ট্যাব স্থান নেয়। যদি আমি সেগুলিকে সরিয়ে ফেলি, যদি CSS ছোট করা হয় তবে আমি সেই স্টাইলশীটের আকার 40% কম করতে পারি! ফলাফল এই…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

সিএসএস মিনিফিকেশন আপনি যদি আপনার সাইটের গতি বাড়াতে চান এবং অনলাইনে বেশ কিছু টুল রয়েছে যা আপনাকে দক্ষতার সাথে আপনার CSS ফাইল কম্প্রেস করতে সাহায্য করতে পারে। শুধু অনুসন্ধান করুন CSS টুল কম্প্রেস করুন or সিএসএস টুল মিনিফাই করুন অনলাইন।

একটি বড় CSS ফাইল কল্পনা করুন এবং এর CSS ছোট করে কতটা স্থান সংরক্ষণ করা যেতে পারে... এটি সাধারণত ন্যূনতম 20% এবং তাদের বাজেটের 40% এর উপরে হতে পারে। আপনার সাইটে উল্লেখ করা একটি ছোট CSS পৃষ্ঠা থাকা প্রতিটি একক পৃষ্ঠায় লোডের সময় বাঁচাতে পারে, আপনার সাইটের র‌্যাঙ্কিং বাড়াতে পারে, আপনার ব্যস্ততা উন্নত করতে পারে এবং শেষ পর্যন্ত আপনার রূপান্তর মেট্রিক্স উন্নত করতে পারে।

নেতিবাচক দিক, অবশ্যই, একটি সংকুচিত CSS ফাইলে একটি একক লাইন থাকে তাই সেগুলি সমস্যা সমাধান বা আপডেট করা অবিশ্বাস্যভাবে কঠিন।

Shopify CSS লিকুইড

একটি Shopify থিমের মধ্যে, আপনি সেটিংস প্রয়োগ করতে পারেন যা আপনি সহজেই আপডেট করতে পারেন। আমরা সাইটগুলি পরীক্ষা এবং অপ্টিমাইজ করার সময় এটি করতে চাই যাতে আমরা কোডটি খনন করার পরিবর্তে থিমটিকে দৃশ্যমানভাবে কাস্টমাইজ করতে পারি। সুতরাং, আমাদের স্টাইলশীট লিকুইড (শপিফাইয়ের স্ক্রিপ্টিং ভাষা) দিয়ে তৈরি এবং আমরা স্টাইলশীট আপডেট করার জন্য ভেরিয়েবল যোগ করি। এটি এই মত দেখতে হতে পারে:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

যদিও এটি ভাল কাজ করে, আপনি কেবল কোডটি অনুলিপি করতে এবং এটিকে ছোট করতে একটি অনলাইন টুল ব্যবহার করতে পারবেন না কারণ তাদের স্ক্রিপ্ট তরল ট্যাগগুলি বুঝতে পারে না। প্রকৃতপক্ষে, আপনি চেষ্টা করলে আপনার সিএসএস সম্পূর্ণরূপে ধ্বংস হবে! দুর্দান্ত খবর হল যে এটি লিকুইড দিয়ে তৈরি করা হয়েছে... আপনি আসলে আউটপুট ছোট করতে স্ক্রিপ্টিং ব্যবহার করতে পারেন!

Shopify CSS Minification in Liquid

Shopify আপনাকে সহজে স্ক্রিপ্ট ভেরিয়েবল এবং আউটপুট পরিবর্তন করতে সক্ষম করে। এই ক্ষেত্রে, আমরা আসলে আমাদের সিএসএসকে একটি বিষয়বস্তু ভেরিয়েবলে মুড়ে ফেলতে পারি এবং তারপরে সমস্ত ট্যাব, লাইন রিটার্ন এবং স্পেস মুছে ফেলার জন্য এটিকে ম্যানিপুলেট করতে পারি! আমি এই কোড খুঁজে পেয়েছি Shopify সম্প্রদায় থেকে টিম (তারলি) এবং এটি দুর্দান্তভাবে কাজ করেছে!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

সুতরাং, উপরের আমার উদাহরণের জন্য, আমার theme.css.liquid পৃষ্ঠাটি দেখতে এরকম হবে:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

যখন আমি কোড চালাই, তখন আউটপুট সিএসএস নিম্নরূপ, পুরোপুরি ছোট করা হয়:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}