Liquid Variables များကို အသုံးပြု၍ တည်ဆောက်ထားသည့် သင်၏ Shopify CSS ကို အလွယ်ဆုံးနည်း

Shopify Liquid CSS ဖိုင်များအတွက် Script ကို Miniify လုပ်ပါ။

ကျွန်တော်တို့က ဆောက်တယ်။ Shopify Plus အား တကယ့်အပြင်အဆင်ဖိုင်ရှိ ၎င်းတို့၏စတိုင်များအတွက် ဆက်တင်များစွာရှိသည့် ကလိုင်းယင့်အတွက်ဆိုက်။ စတိုင်များကို အလွယ်တကူ ချိန်ညှိရန်အတွက် အမှန်တကယ် အကျိုးရှိသော်လည်း၊ ဆိုလိုသည်မှာ သင့်တွင် static cascading စတိုင်စာရွက်များ မရှိခြင်း (CSS ကို) လွယ်ကူစွာပြုလုပ်နိုင်သောဖိုင် မီနီ (အရွယ်အစားကို လျှော့ချပါ။) တစ်ခါတစ်ရံ ဒါကို CSS လို့ ခေါ်တယ်။ ချုံ့ နှင့် ချုံ့ မင်းရဲ့ 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 ဖိုင်ကို ထိထိရောက်ရောက် ချုံ့နိုင်စေရန် ကူညီပေးနိုင်သည့် အွန်လိုင်းကိရိယာများစွာရှိသည်။ ရှာဖွေရုံပါပဲ။ CSS tool ကိုချုံ့ပါ။ or CSS tool ကို minify အွန်လိုင်း။

CSS ဖိုင်ကြီးတစ်ခုနှင့် ၎င်း၏ CSS ကို လျှော့ချခြင်းဖြင့် နေရာမည်မျှ သိမ်းဆည်းနိုင်မည်ကို မြင်ယောင်ကြည့်ပါ... ၎င်းသည် ယေဘုယျအားဖြင့် အနည်းဆုံး 20% ရှိပြီး ၎င်းတို့၏ ဘတ်ဂျက်၏ 40% အထက်ရှိနိုင်ပါသည်။ သင့်ဆိုက်တစ်လျှောက် ရည်ညွှန်းထားသော CSS စာမျက်နှာငယ်တစ်ခုရှိခြင်းသည် စာမျက်နှာတိုင်းတွင် ဝန်ထုပ်ဝန်ပိုးဖြစ်စေသည့်အချိန်များကို သက်သာစေနိုင်ပြီး၊ သင့်ဆိုက်၏အဆင့်သတ်မှတ်ချက်ကို တိုးမြင့်လာစေကာ၊ သင်၏ထိတွေ့ဆက်ဆံမှုကို တိုးတက်စေကာ နောက်ဆုံးတွင် သင်၏ပြောင်းလဲခြင်းမက်ထရစ်များကို မြှင့်တင်ပေးနိုင်ပါသည်။

အားနည်းချက်မှာ၊ ချုံ့ထားသော CSS ဖိုင်တွင် စာကြောင်းတစ်ကြောင်းပါသောကြောင့် ၎င်းတို့ကို ဖြေရှင်းရန် သို့မဟုတ် အပ်ဒိတ်လုပ်ရန် အလွန်ခက်ခဲပါသည်။

Shopify CSS အရည်

Shopify အပြင်အဆင်အတွင်း၊ သင်သည် အလွယ်တကူ အပ်ဒိတ်လုပ်နိုင်သော ဆက်တင်များကို သင်အသုံးပြုနိုင်ပါသည်။ ကျွန်ုပ်တို့သည် ကုဒ်ထဲသို့ တူးခြင်းထက် အပြင်အဆင်ကို အမြင်အာရုံဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်စေရန် ဆိုက်များကို စမ်းသပ်ပြီး အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ရခြင်းကို ကျွန်ုပ်တို့ နှစ်သက်ပါသည်။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့၏ Stylesheet ကို Liquid (Shopify ၏ scripting language) ဖြင့် တည်ဆောက်ထားပြီး Stylesheet ကို မွမ်းမံရန်အတွက် variable များကို ပေါင်းထည့်ပါသည်။ ဤကဲ့သို့ပုံပေါ်နိုင်သည်-

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

၎င်းသည် ကောင်းမွန်စွာအလုပ်လုပ်သော်လည်း၊ သင်သည် ကုဒ်ကို ကော်ပီကူးပြီး ၎င်းတို့၏ script အရည် tags များကို နားမလည်သောကြောင့် ၎င်းကို minify လုပ်ရန်အတွက် အွန်လိုင်းတူးလ်ကို အသုံးပြု၍ မရပါ။ တကယ်တော့၊ မင်းကြိုးစားရင် မင်းရဲ့ CSS ကို လုံးလုံးလျားလျား ဖျက်ဆီးလိမ့်မယ်။ သတင်းကောင်းတစ်ခုကတော့ Liquid နဲ့ တည်ဆောက်ထားတာကြောင့် ထွက်လာတဲ့ပမာဏကို လျှော့ချဖို့အတွက် scripting ကို သင်အမှန်တကယ် အသုံးပြုနိုင်ပါတယ်။

Liquid တွင် Shopify CSS Miniification

Shopify သည် သင့်အား လွယ်ကူစွာ script variable များနှင့် output ကို ပြင်ဆင်နိုင်စေပါသည်။ ဤကိစ္စတွင်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ CSS ကို အကြောင်းအရာပြောင်းနိုင်သောပုံစံအဖြစ် ခြုံငုံပြီး တဘ်များ၊ လိုင်းပြန်ပေးမှုများနှင့် နေရာလွတ်များအားလုံးကို ဖယ်ရှားရန် ၎င်းကို စီမံခန့်ခွဲနိုင်သည်။ ဒီကုဒ်ကို ကျနော်တွေ့တယ်။ Shopify အသိုင်းအဝိုင်း မှ တင်မ် (Tairli) ပြီးတော့ ပြောင်မြောက်စွာ အလုပ်လုပ်တယ်။

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

ကုဒ်ကို run သောအခါ၊ output CSS သည် အောက်ပါအတိုင်းဖြစ်ပြီး ပြီးပြည့်စုံစွာ သေးငယ်သွားသည်-

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