Mokhoa o Bonolo ka ho Fetisisa oa ho fokotsa Shopify CSS ea hau e hahiloeng ka ho sebelisa mefuta ea Liquid.

Minify Script bakeng sa Lifaele tsa Shopify Liquid CSS

Re hahile a Shopify Hape sebaka sa moreki se nang le litlhophiso tse 'maloa bakeng sa litaele tsa bona faeleng ea theme ea nnete. Le ha hoo ho le molemo haholo bakeng sa ho fetola setaele habonolo, ho bolela hore ha u na lishiti tsa setaele sa static cascading (CSS) faele eo u ka e khonang habonolo mini (fokotsa ka boholo). Ka linako tse ling sena se bitsoa CSS Khatello ea maikutlo 'me hatella CSS ea hau.

CSS Minification ke eng?

Ha u ngolla letlapa la litaele, u hlalosa setaele sa elemente e itseng ea HTML hang, ebe u e sebelisa khafetsa ho palo efe kapa efe ea maqephe a tepo. Mohlala, haeba ke ne ke batla ho theha lintlha tse itseng tsa hore na lifonte tsa ka li shebahala joang sebakeng sa ka sa marang-rang, nka hlophisa CSS ea ka ka tsela e latelang:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ka har'a leqephe leo la mokhoa, sebaka se seng le se seng, ho khutla ha mola, le tab li nka sebaka. Haeba ke tlosa tseo kaofela, nka fokotsa boholo ba letlapa leo ka ho feta 40% haeba CSS e fokotsoa! Sephetho ke sena…

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

Ntlafatso ea CSS ke ntho ea bohlokoa haeba u batla ho potlakisa sebaka sa hau sa marang-rang mme ho na le lisebelisoa tse ngata inthaneteng tse ka u thusang ho hatella faele ea hau ea CSS hantle. Batla feela compress CSS sesebelisoa or minify CSS sesebelisoa Inthaneteng.

Nahana ka faele e kholo ea CSS le hore na sebaka se ka bolokeha ka ho fokotsa CSS ea eona… Ho ba le leqephe le lenyane la CSS le boletsoeng sebakeng sa hau sa marang-rang ho ka boloka linako tsa mojaro leqepheng le leng le le leng, ho ka eketsa boemo ba sebaka sa hau sa marang-rang, ho ntlafatsa boitlamo ba hau, 'me qetellong ho ntlafatsa metrics ea hau ea ho fetolela.

Taba e nyahamisang, ehlile, ke hore ho na le mohala o le mong faeleng ea CSS e hatelletsoeng kahoo ho thata haholo ho e rarolla kapa ho e ntlafatsa.

Shopify CSS Liquid

Ka har'a tema ea Shopify, u ka sebelisa litlhophiso tseo u ka li ntlafatsang habonolo. Re rata ho etsa sena ha re ntse re leka le ho ntlafatsa libaka tsa marang-rang e le hore re ka iketsetsa sehlooho ka pono ho fapana le ho cheka khoutu. Kahoo, Leqephe la Setaele la rona le hahiloe ka Liquid (puo ea ho ngola ea Shopify) 'me re eketsa mefuta e fapaneng ho nchafatsa Leqephe la Setaele. E ka shebahala tjena:

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

Leha sena se sebetsa hantle, o ke ke oa kopitsa khoutu feela ebe o sebelisa sesebelisoa sa inthaneteng ho e fokotsa hobane mongolo oa bona ha o utloisise li-tag tsa metsi. Ha e le hantle, u tla senya CSS ea hau ka ho feletseng haeba u leka! Litaba tse monate ke hore hobane e hahiloe ka Liquid… u ka SEBELISA mongolo ho fokotsa tlhahiso!

Shopify CSS Minification In Liquid

Shopify e u thusa ho ngola mefuta e fapaneng habonolo le ho fetola tlhahiso. Tabeng ena, re ka phuthela CSS ea rona ka har'a mefuta e fapaneng ea litaba ebe re e sebelisa ho tlosa li-tab tsohle, li-line returns le libaka! Ke fumane khoutu ena ho Shopify Sechaba ho tloha Tim (tairli) mme e sebeditse ka bokgabane!

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

Kahoo, bakeng sa mohlala oa ka o ka holimo, leqephe la ka la theme.css.liquid le ka shebahala tjena:

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

Ha ke tsamaisa khoutu, tlhahiso ea CSS e tjena, e hlakisitsoe hantle:

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