توهان جي Shopify CSS کي گھٽائڻ جو آسان طريقو جيڪو مائع متغير استعمال ڪندي ٺهيل آهي

Shopify Liquid CSS فائلن لاءِ اسڪرپٽ کي گھٽ ڪريو

اسان هڪ ٺاهيو Shopify پلس سائيٽ هڪ ڪلائنٽ لاءِ جنهن ۾ حقيقي موضوع واري فائل ۾ انهن جي اندازن لاءِ ڪيتريون ئي سيٽنگون آهن. جڏهن ته اهو آساني سان ترتيب ڏيڻ واري انداز لاءِ فائديمند آهي، ان جو مطلب اهو آهي ته توهان وٽ جامد ڪاسڪيڊنگ اسٽائل شيٽ نه آهي (ايس ايم ايس) فائل جيڪا توهان آساني سان ڪري سگهو ٿا گھٽ ڪريو (سائيز ۾ گهٽتائي). ڪڏهن ڪڏهن اهو حوالو ڏنو ويندو آهي CSS سمجهه ۽ ٺاهڻ توهان جي CSS.

CSS Minification ڇا آهي؟

جڏهن توهان هڪ اسٽائل شيٽ تي لکي رهيا آهيو، توهان هڪ ڀيرو هڪ خاص HTML عنصر لاءِ انداز بيان ڪيو، ۽ پوءِ ان کي ڪنهن به ويب صفحن تي بار بار استعمال ڪريو. مثال طور، جيڪڏهن مان ڪجهه وضاحت ڪرڻ چاهيان ٿو ته ڪيئن منهنجا فونٽس منهنجي سائيٽ تي نظر اچن ٿا، مان پنهنجي CSS کي هن ريت منظم ڪري سگهان ٿو:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

انهي اسٽائل شيٽ جي اندر، هر جڳهه، لائين واپسي، ۽ ٽيب جاء وٺي ٿو. جيڪڏهن آئون انهن سڀني کي هٽائي ڇڏيان، آئون ان اسٽائل شيٽ جي سائيز کي 40 سيڪڙو کان وڌيڪ گھٽائي سگهان ٿو جيڪڏهن سي ايس ايس کي گهٽايو وڃي! نتيجو هي آهي…

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

سي ايس ايس جي گھٽتائي هڪ ضروري آهي جيڪڏهن توهان پنهنجي سائيٽ کي تيز ڪرڻ چاهيو ٿا ۽ اهڙا ڪيترائي اوزار آن لائن آهن جيڪي توهان جي مدد ڪري سگهن ٿيون توهان جي CSS فائل کي موثر طريقي سان ڪمپريس. بس ڳولا ڪريو compress CSS اوزار or CSS ٽول کي گھٽ ڪريو آن لائن.

تصور ڪريو ھڪڙي وڏي CSS فائل ۽ ان جي CSS کي گھٽائڻ سان ڪيتري جاءِ بچائي سگھجي ٿي... اھو عام طور تي گھٽ ۾ گھٽ 20٪ آھي ۽ انھن جي بجيٽ جي 40٪ کان مٿي ٿي سگھي ٿو. توهان جي سڄي سائيٽ ۾ حوالو ڪيل هڪ ننڍڙو CSS صفحو هجڻ سان هر هڪ صفحي تي لوڊ وقت بچائي سگهي ٿو، توهان جي سائيٽ جي درجه بندي کي وڌائي، توهان جي مصروفيت کي بهتر بڻائي، ۽ آخرڪار توهان جي تبادلي جي ميٽرڪس کي بهتر بڻائي.

نقصان، يقينا، اهو آهي ته اتي هڪ لڪير آهي هڪ ڪمپريس ٿيل CSS فائل ۾ ان ڪري اهي ناقابل اعتبار حد تائين مشڪل آهن حل ڪرڻ يا تازه ڪاري ڪرڻ.

Shopify CSS Liquid

اندر اندر هڪ 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 }}
}

جڏهن ته اهو سٺو ڪم ڪري ٿو، توهان صرف ڪوڊ ڪاپي نٿا ڪري سگهو ۽ ان کي گھٽائڻ لاءِ هڪ آن لائن اوزار استعمال ڪري سگهو ٿا ڇاڪاڻ ته انهن جو اسڪرپٽ مائع ٽيگ کي نٿو سمجهي. حقيقت ۾، توهان مڪمل طور تي توهان جي سي ايس ايس کي تباهه ڪنداسين جيڪڏهن توهان ڪوشش ڪريو! وڏي خبر اها آهي ته ڇاڪاڻ ته اهو مائع سان ٺهيل آهي… توهان اصل ۾ استعمال ڪري سگهو ٿا اسڪرپٽنگ کي گهٽ ڪرڻ لاءِ آئوٽ پٽ!

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 ھيٺ ڏنل آھي، مڪمل طور تي گھٽ ڪئي وئي آھي:

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