Ang Labing Sayon nga Paagi Aron Maminusan ang Imong Shopify CSS Nga Gitukod Gamit ang Liquid Variables

Minify Script para sa Shopify Liquid CSS Files

Nagtukod kami usa ka Shopify Plus site alang sa usa ka kliyente nga adunay daghang mga setting alang sa ilang mga istilo sa aktuwal nga file sa tema. Bisan kung kana labi ka mapuslanon alang sa dali nga pag-adjust sa mga istilo, kini nagpasabut nga wala ka usa ka static nga cascading style sheets (CSS) file nga dali ra nimo mini (pagkunhod sa gidak-on). Usahay kini gitawag nga CSS Kompresiyon ug kompresiyon imong CSS.

Unsa ang CSS Minification?

Kung nagsulat ka sa usa ka stylesheet, imong gihubit ang istilo alang sa usa ka partikular nga elemento sa HTML kausa, ug dayon gamiton kini nga balik-balik sa bisan unsang gidaghanon sa mga panid sa web. Pananglitan, kung gusto nako nga magbutang og pipila ka mga detalye kung giunsa ang hitsura sa akong mga font sa akong site, mahimo nakong organisahon ang akong CSS ingon sa mosunod:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Sulod niana nga stylesheet, ang matag luna, pagbalik sa linya, ug tab mokuha ug luna. Kung akong tangtangon ang tanan niini, mahimo nakong pakunhuran ang gidak-on sa stylesheet nga sobra sa 40% kung ang CSS gamay ra! Ang resulta mao kini…

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

CSS minification usa ka kinahanglan kung gusto nimo nga mapadali ang imong site ug adunay daghang mga himan online nga makatabang kanimo sa pag-compress sa imong CSS file nga epektibo. Pangitaa lang compress CSS tool or gamay nga CSS tool online.

Hunahunaa ang usa ka dako nga CSS file ug unsa ka dako nga espasyo ang madaginot pinaagi sa pagminus sa CSS niini… kini kasagaran sa minimum nga 20% ug mahimong pataas sa 40% sa ilang budget. Ang pagbaton ug mas gamay nga panid sa CSS nga gihisgotan sa tibuok nimong site makadaginot sa mga oras sa pagkarga sa matag panid, makapataas sa ranggo sa imong site, makapauswag sa imong pakiglambigit, ug sa kataposan makapauswag sa imong sukdanan sa pagkakabig.

Ang downside, siyempre, mao nga adunay usa ka linya sa usa ka compressed CSS file mao nga sila hilabihan ka lisud sa pag-troubleshoot o pag-update.

Shopify CSS Liquid

Sulod sa usa ka tema sa Shopify, mahimo nimong i-apply ang mga setting nga dali nimo ma-update. Gusto namon nga buhaton kini samtang among gisulayan ug gi-optimize ang mga site aron mahimo ra namon nga ipasadya ang tema sa biswal imbes nga magkalot sa code. Mao nga, ang among Stylesheet gitukod gamit ang Liquid (Shopify's scripting language) ug kami nagdugang ug mga variable aron ma-update ang Stylesheet. Mahimo kini tan-awon sama niini:

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

Samtang kini maayo, dili nimo mahimo nga kopyahon ang code ug mogamit usa ka online nga himan aron maminusan kini tungod kay ang ilang script wala makasabut sa mga tag nga likido. Sa tinuud, hingpit nimong gub-on ang imong CSS kung sulayan nimo! Ang maayong balita mao nga tungod kay kini gitukod gamit ang Liquid… mahimo nimo nga magamit ang scripting aron maminusan ang output!

Shopify CSS Minification Sa Liquid

Gitugotan ka sa Shopify nga dali nga mag-script sa mga variable ug usbon ang output. Sa kini nga kaso, mahimo gyud namon nga ibalot ang among CSS sa usa ka variable sa sulud ug dayon i-manipulate kini aron makuha ang tanan nga mga tab, pagbalik sa linya, ug mga espasyo! Akong nakit-an kini nga code sa Komunidad sa Shopify gikan sa Tim (Tayli) ug kini nagtrabaho nga maayo!

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

Busa, alang sa akong pananglitan sa ibabaw, ang akong theme.css.liquid nga panid mahimong sama niini:

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

Kung gipadagan nako ang code, ang output CSS mao ang mga musunud, hingpit nga giminusan:

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