Sida ugu Fudud ee Looga Yareeyo Shopify kaaga CSS ee Lagu Dhisay Isticmaalka Kala-duwanaanshaha dareeraha ah

Miniify Script ee Shopify Liquid CSS Files

Waxaan dhisnay a Ka adeegso dukaameeyaha goobta macmiilka oo leh dhowr habayn oo qaabkooda ku jira faylka mawduuca dhabta ah. Iyadoo ay taasi runtii faa'iido u leedahay in si fudud loo habeeyo qaababka, waxay la macno tahay inaadan haysan go'yaal qaab cascading ah oo taagan (CSS) fayl aad si fudud u samayn karto mini (dhimista cabbirka). Mararka qaarkood tan waxaa loo yaqaan CSS riixo iyo cadaadin CSS kaaga.

Waa maxay CSS Minification?

Markaad wax ku qorayso xaashida qaab-dhismeedka, waxaad qeexdaa qaabka shay gaar ah oo HTML ah hal mar, ka dibna marar badan u isticmaal tiro kasta oo bogag shabakad ah. Tusaale ahaan, haddii aan rabo inaan u dejiyo qaar gaar ah oo ku saabsan sida xarfahayga u eegaan boggayga, waxaan u habayn karaa CSS-kayga sida soo socota:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Xaashiyaha qaab-dhismeedkaas dhexdiisa, meel kasta, soo celinta laynka, iyo tab kasta waxay qaadanayaan meel bannaan. Haddii aan ka saaro kuwaas oo dhan, waxaan hoos u dhigi karaa cabbirka qaabka xaashidaas in ka badan 40% haddii CSS la dhimo! Natiijadu waa tan…

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

CSS yaraynta Waa qasab haddii aad rabto inaad dardar geliso goobtaada oo ay jiraan tiro qalab oo online ah oo kaa caawin kara inaad si hufan u cadaadiyo faylkaaga CSS. Kaliya raadi cadaadi qalabka CSS or yaraynta qalabka CSS online.

Bal qiyaas fayl weyn oo CSS ah iyo inta boos ee lagu badbaadin karo iyadoo la yareynayo CSS-kiisa… caadi ahaan waa ugu yaraan 20% waxayna kor u dhaafi kartaa 40% miisaaniyadooda. Haysashada bog yar oo CSS ah oo lagu soo gudbiyo dhammaan goobtaada waxay badbaadin kartaa waqtiyada culeyska bog kasta, waxay kordhin kartaa darajada boggaaga, wanaajin kartaa ka-qaybgalkaaga, oo ugu dambeyntii hagaajin kartaa cabbirrada beddelkaada.

Dhanka hoose, dabcan, waa in uu jiro hal xariiq oo ku jira faylka CSS ee la isku riixay si ay aad ugu adagtahay in la ciladeeyo ama la cusbooneysiiyo.

Dukaan CSS dareere ah

Gudaha Shopify theme, waxaad codsan kartaa dejin aad si fudud u cusbooneysiin karto. Waxaan jecelnahay inaan tan sameyno markaan tijaabineyno oo aan hagaajineyno boggaga si aan u habayn karno mawduuca muuqaal ahaan halkii aan ka gelin lahayn koodka. Markaa, warqadayaga Style-ka waxa lagu dhisay Liquid (Luqadda qoraalka Shopify) waxaanan ku darnaa doorsoomayaal si aan u cusboonaysiino Stylesheet-ka. Waxay u ekaan kartaa sidan:

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

Iyadoo ay tani si fiican u shaqeyso, si fudud uma nuqulan kartid koodka oo aad isticmaali kartaa qalab online ah si aad u yareyso sababtoo ah qoraalkoodu ma fahmo calaamadaha dareeraha ah. Dhab ahaantii, gabi ahaanba waxaad baabi'in doontaa CSS-gaaga haddii aad isku daydo! Akhbaarta ugu weyn ayaa ah in sababtoo ah waxaa lagu dhisay Liquid… waxaad dhab ahaantii isticmaali kartaa qoraalka si aad u yareyso wax soo saarka!

Shopify CSS Minification In Dareere

Shopify wuxuu awood kuu siinayaa inaad si fudud u qorto doorsoomayaasha qoraalka oo aad wax ka beddesho wax soo saarka. Xaaladdan oo kale, waxaan si dhab ah ugu duubi karnaa CSS-kayaga doorsoome nuxur ka dibna aan ku maamulno si aan meesha uga saarno dhammaan tabsyada, soo celinta khadka, iyo meelaha bannaan! Waxaan ka helay koodkan gudaha Shopify Community ka Tim (tairli) oo waxay u shaqeysay si cajiib ah!

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

Marka, tusaalahayga sare, theme.css.liquid boggaygu wuxuu u ekaan lahaa sidan:

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

Marka aan socodsiiyo koodka, wax-soo-saarka CSS waa sida soo socota, oo si fiican loo dhimay:

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