Ole auala pito sili ona faigofie e faʻaititia ai lau Shopify CSS lea e fau ile faʻaogaina ole sua sua

Fa'aitiitiga Fa'amatalaga mo Shopify Liquid CSS Files

Na matou fausia a Faʻatau Plus 'upega tafaʻilagi mo se tagata faʻatau e iai le tele o faʻatulagaga mo latou sitaili i le faila autu moni. E ui o lena mea e matua aoga tele mo le fetuutuunai faigofie o sitaili, o lona uiga e leai sau pepa faʻasolosolo faʻasolosolo (CSS) faila e mafai ona faigofie faʻaitiitia (fa'aitiitia le lapo'a). O nisi taimi e taʻua o le CSS Fa'amalosi ma faʻamalosi lau CSS.

O le a le CSS Minification?

A e tusi i se sitaili, e te fa'amalamalamaina le sitaili mo se elemene HTML fa'apitoa e tasi, ona fa'aaogaina lea i luga o so'o se numera o itulau uepi. Mo se faʻataʻitaʻiga, afai ou te manaʻo e faʻatulaga ni faʻamatalaga patino mo le vaʻaiga o aʻu fonuka i luga o laʻu saite, e mafai ona ou faʻatulagaina laʻu CSS e pei ona taua i lalo:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

I totonu o lena sitaili, o avanoa ta'itasi, laina toe fo'i, ma fa'amaufa'ailoga e fa'aalu avanoa. Afai ou te aveese uma na mea, e mafai ona ou faʻaititia le tele o lena sitaili e sili atu i le 40% pe a faʻaitiitia le CSS! O le taunuuga o le…

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

CSS fa'aitiitia e tatau pe afai e te manaʻo e faʻavave lau 'upega tafaʻilagi ma o loʻo i ai le tele o meafaigaluega i luga ole laiga e mafai ona fesoasoani ia te oe e faʻapipiʻi lelei lau faila CSS. Na'o le su'e mo compress CSS meafaigaluega or minify meafaigaluega CSS luga o le initoneti.

Va'ai faalemafaufau i se faila CSS lapo'a ma pe fia le avanoa e mafai ona fa'asaoina e ala i le fa'aitiitia o lona CSS… e masani lava e la'ititi i le 20% ma e mafai ona sili atu i le 40% o le latou paketi. O le i ai o se itulau CSS laʻititi e faʻasino i lau 'upega tafaʻilagi e mafai ona faʻasaoina taimi o uta i luga o itulau taʻitasi, e mafai ona faʻateleina le faʻavasegaina o lau' upega tafaʻilagi, faʻaleleia lau faʻauiga, ma iu ai ina faʻaleleia au fua faʻaliliuga.

O le itu i lalo, o le mea moni, o loʻo i ai se laina e tasi i totonu o se faila CSS faʻapipiʻi ina ia matua faigata tele ona foia pe faʻafouina.

Shopify CSS Suavai

I totonu ole Shopify autu, e mafai ona e faʻaogaina tulaga e faigofie ona e faʻafouina. Matou te fiafia e fai lenei mea a'o matou su'eina ma fa'amalie nofoaga ina ia mafai ona matou fa'avasegaina le autu i le va'aiga nai lo le eli i totonu o le code. O lea la, o la matou Stylesheet e fausia i le Suavai (Shopify's scripting language) ma matou faʻaopoopoina fesuiaiga e faʻafou ai le Stylesheet. Atonu e pei o lenei:

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

E ui ina lelei lenei mea, e le mafai ona e kopiina le code ma faʻaoga se meafaigaluega i luga ole laiga e faʻaitiitia ai ona e le malamalama a latou tusitusiga i pine vai. O le mea moni, e te matua fa'aumatia lau CSS pe a e taumafai! O le tala sili ona o le fausiaina ma le Suavai ... e mafai ona e faʻaaogaina tusitusiga e faʻaitiitia ai le gaioiga!

Shopify CSS Minification I Suavai

Shopify e mafai ai e oe ona faʻafaigofie ona tusia suiga ma suia le gaioiga. I lenei tulaga, e mafai ona tatou afifiina a tatou CSS i se fesuiaiga o mea e mafai ona faʻaogaina e aveese uma laupepa, laina toe foʻi, ma avanoa! Na ou mauaina lenei code i le Shopify Community mai Tim (tailli) ma sa galue malosi!

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

O lea la, mo laʻu faʻataʻitaʻiga i luga, o laʻu theme.css.liquid itulau o le a pei o lenei:

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

Pe a ou faʻatautaia le code, o le CSS output e faʻapea, faʻaitiitia lelei:

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