Ụzọ kachasị mfe iji wedata Shopify CSS gị nke a na-eji mgbanwe Liquid

Minify Script maka Shopify Liquid CSS faịlụ

Anyị wuru si a Zụọ ahịa Gụnyere saịtị maka onye ahịa nwere ọtụtụ ntọala maka ụdị ha na faịlụ isiokwu n'ezie. Ọ bụ ezie na nke ahụ bara uru n'ezie maka ịhazigharị ụdị dị mfe, ọ pụtara na ị nweghị mpempe akwụkwọ ụdị cascading static.CSS) faịlụ nke ị nwere ike mfe mini (belata nha). Mgbe ụfọdụ, a na-akpọ nke a CSS mkpakọ na mpikota onu CSS gị.

Kedu ihe bụ CSS Minification?

Mgbe ị na-ede na mpempe akwụkwọ, ị na-akọwapụta ụdị maka otu HTML otu ugboro, wee jiri ya ugboro ugboro na ọnụ ọgụgụ ibe weebụ ọ bụla. Dịka ọmụmaatụ, ọ bụrụ na achọrọ m ịtọpụta nkọwapụta maka otu mkpụrụedemede m si ele na saịtị m, enwere m ike ịhazi CSS m dịka ndị a:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

N'ime ụdị ụdị ahụ, oghere ọ bụla, nloghachi ahịrị na taabụ na-eweghara ohere. Ọ bụrụ na m wepụ ihe ndị ahụ niile, enwere m ike ibelata nha nke ụdị akwụkwọ ahụ karịa 40% ma ọ bụrụ na ebelata CSS! Nsonaazụ bụ nke a…

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

CSS mbelata bụ ihe dị mkpa ma ọ bụrụ na ịchọrọ ịgbatị saịtị gị ngwa ngwa ma enwere ọtụtụ ngwaọrụ n'ịntanetị nwere ike inyere gị aka ịpịkọta faịlụ CSS gị nke ọma. Naanị chọọ mpikota onu CSS ngwá ọrụ or wedata ngwa CSS online.

Cheedị echiche nnukwu faịlụ CSS yana ole ohere enwere ike ịchekwa site na ibelata CSS ya… ọ na-abụkarị opekempe nke 20% ma nwee ike karịa 40% nke mmefu ego ha. Inwe obere ibe CSS a na-ezo aka na saịtị gị niile nwere ike ịchekwa oge ibu n'otu ibe ọ bụla, nwere ike ịbawanye ogo saịtị gị, melite njikọ aka gị, wee melite metrik ngbanwe gị.

Ihe dị ala, n'ezie, bụ na e nwere otu ahịrị na faịlụ CSS abịakọrọ nke mere na ọ na-esiri ha ike ịmepụta nsogbu ma ọ bụ melite.

Shopify CSS Liquid

N'ime isiokwu Shopify, ị nwere ike itinye ntọala ị nwere ike imelite ngwa ngwa. Ọ masịrị anyị ime nke a ka anyị na-anwale ma na-ebuli saịtị ka anyị nwee ike hazie isiokwu ahụ n'anya kama igwu ala n'ime koodu ahụ. Yabụ, ejiri Liquid rụọ akwụkwọ Style anyị (asụsụ scripting Shopify) anyị na-agbakwunye mgbanwe iji melite Stylesheet. Ọ nwere ike ịdị ka nke a:

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

Ọ bụ ezie na nke a na-arụ ọrụ nke ọma, ị nweghị ike iṅomi koodu ahụ ma jiri ngwá ọrụ dị n'ịntanetị belata ya n'ihi na edemede ha aghọtaghị mkpado mmiri mmiri. N'ezie, ị ga-emebi CSS gị kpamkpam ma ị nwaa! Ozi ọma ahụ bụ na n'ihi na ejiri Liquid rụọ ya… ị nwere ike iji edemede wedata nsonaazụ ahụ!

Shopify CSS Minification na Liquid

Shopify na-enyere gị aka ịde mgbanwe dị mfe ma gbanwee mmepụta. N'okwu a, anyị nwere ike kechie CSS anyị n'ime mgbanwe ọdịnaya wee jiri ya wepụ taabụ niile, nloghachi ahịrị na oghere niile! Achọtara m koodu a na Obodo Shopify si Tim (ọgbụgbọ) ma ọ rụrụ ọrụ nke ọma!

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

Yabụ, maka ọmụmaatụ m n'elu, ibe m theme.css.liquid ga-adị ka nke a:

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

Mgbe m na-agba koodu ahụ, mmepụta CSS bụ nke a, ebelata nke ọma:

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