اپنے Shopify CSS کو کم کرنے کا آسان ترین طریقہ جو مائع متغیرات کا استعمال کرتے ہوئے بنایا گیا ہے۔

Shopify Liquid CSS فائلوں کے لیے Minify Script

ہم نے تعمیر کیا a شاپائف پلس ایک کلائنٹ کے لیے سائٹ جس کی اصل تھیم فائل میں ان کے اسٹائل کے لیے متعدد سیٹنگز ہیں۔ اگرچہ یہ سٹائل کو آسانی سے ایڈجسٹ کرنے کے لیے واقعی فائدہ مند ہے، اس کا مطلب ہے کہ آپ کے پاس جامد جھرنوں والی سٹائل شیٹس نہیں ہیں (CSS) فائل جو آپ آسانی سے کرسکتے ہیں۔ منی (سائز میں کمی) کبھی کبھی اسے CSS کہا جاتا ہے۔ سمپیڑن اور کمپریسنگ آپ کا سی ایس ایس۔

CSS Minification کیا ہے؟

جب آپ اسٹائل شیٹ پر لکھ رہے ہوتے ہیں، تو آپ ایک بار کسی خاص HTML عنصر کے لیے اسٹائل کی وضاحت کرتے ہیں، اور پھر اسے کسی بھی ویب صفحات پر بار بار استعمال کرتے ہیں۔ مثال کے طور پر، اگر میں کچھ تفصیلات ترتیب دینا چاہتا ہوں کہ میرے فونٹس میری سائٹ پر کیسے نظر آتے ہیں، تو میں اپنے CSS کو حسب ذیل ترتیب دے سکتا ہوں:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

اس اسٹائل شیٹ کے اندر، ہر اسپیس، لائن ریٹرن، اور ٹیب جگہ لیتے ہیں۔ اگر میں ان سب کو ہٹا دوں، تو میں اس اسٹائل شیٹ کے سائز کو 40% سے زیادہ کم کر سکتا ہوں اگر CSS کو چھوٹا کر دیا جائے! نتیجہ یہ ہے…

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

سی ایس ایس منیفیکیشن اگر آپ اپنی سائٹ کو تیز کرنا چاہتے ہیں تو یہ ضروری ہے اور آن لائن بہت سے ٹولز موجود ہیں جو آپ کی CSS فائل کو مؤثر طریقے سے کمپریس کرنے میں مدد کر سکتے ہیں۔ بس تلاش کریں۔ سی ایس ایس ٹول کو کمپریس کریں۔ or سی ایس ایس ٹول کو کم کریں۔ آن لائن.

ایک بڑی سی ایس ایس فائل کا تصور کریں اور اس کے سی ایس ایس کو کم کرکے کتنی جگہ بچائی جا سکتی ہے… یہ عام طور پر کم از کم 20% ہے اور ان کے بجٹ کے 40% سے زیادہ ہو سکتی ہے۔ آپ کی پوری سائٹ پر ایک چھوٹا CSS صفحہ کا حوالہ دینے سے ہر ایک صفحے پر لوڈ ٹائم بچایا جا سکتا ہے، آپ کی سائٹ کی درجہ بندی میں اضافہ ہو سکتا ہے، آپ کی مصروفیت بہتر ہو سکتی ہے، اور بالآخر آپ کے تبادلوں کے میٹرکس کو بہتر بنایا جا سکتا ہے۔

منفی پہلو، یقیناً، یہ ہے کہ کمپریسڈ سی ایس ایس فائل میں ایک ہی لائن ہے اس لیے ان کا ازالہ کرنا یا اپ ڈیٹ کرنا ناقابل یقین حد تک مشکل ہے۔

Shopify CSS مائع

Shopify تھیم کے اندر، آپ ان ترتیبات کو لاگو کر سکتے ہیں جنہیں آپ آسانی سے اپ ڈیٹ کر سکتے ہیں۔ ہم ایسا کرنا چاہتے ہیں جب ہم سائٹس کی جانچ اور اصلاح کرتے ہیں تاکہ ہم کوڈ میں کھودنے کے بجائے صرف تھیم کو بصری طور پر اپنی مرضی کے مطابق بنا سکیں۔ لہذا، ہماری اسٹائل شیٹ مائع (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 }}
}

اگرچہ یہ اچھی طرح سے کام کرتا ہے، آپ کوڈ کو آسانی سے کاپی نہیں کر سکتے اور اسے کم کرنے کے لیے ایک آن لائن ٹول استعمال نہیں کر سکتے کیونکہ ان کا اسکرپٹ مائع ٹیگز کو نہیں سمجھتا ہے۔ درحقیقت، اگر آپ کوشش کریں گے تو آپ اپنے CSS کو مکمل طور پر تباہ کر دیں گے! بڑی خبر یہ ہے کہ چونکہ یہ مائع کے ساتھ بنایا گیا ہے… آپ اصل میں آؤٹ پٹ کو کم کرنے کے لیے اسکرپٹنگ کا استعمال کر سکتے ہیں!

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  }}

جب میں کوڈ چلاتا ہوں تو آؤٹ پٹ سی ایس ایس مندرجہ ذیل ہے، بالکل minified:

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