Ko te huarahi ngawari ki te whakaiti i to Shopify CSS i hangaia ma te whakamahi i nga taurangi wai

Whakaitihia te Hōtuhi mo Shopify Liquid CSS Kōnae

I hangaia e matou he Hokona Plus pae mo te kiritaki he maha nga tautuhinga mo o raatau momo i roto i te konae kaupapa. Ahakoa he mea tino pai tena mo te whakarereke ngawari i nga momo, ko te tikanga kaore koe i te ahua o nga momo pepa whakaheke (CSS) konae ka taea e koe te ngawari paku (whakaitihia te rahi). I etahi wa ka kiia tenei ko CSS Toha a toha to CSS.

He aha te CSS Minification?

I a koe e tuhi ana ki te pepa ahua, ka tautuhia e koe te ahua mo tetahi huānga HTML kotahi, katahi ka whakamahia tonutia ki runga i nga maha o nga wharangi tukutuku. Hei tauira, ki te hiahia au ki te whakarite i etahi korero mo te ahua o aku momotuhi ki taku pae, ka taea e au te whakarite i taku CSS penei:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

I roto i taua pepa ahua, ka tango mokowā ia mokowā, hokinga raina, me te ripa. Mena ka tangohia e au enei mea katoa, ka taea e au te whakaiti i te rahi o taua pepa ahua ma te neke atu i te 40% mena ka whakaitihia te CSS! Ko te hua ko tenei…

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

CSS whakaiti he mea tika ki te hiahia koe ki te tere ake i to pae me te maha o nga taputapu ipurangi hei awhina i a koe ki te kopiri tika i to konae CSS. Rapua noa taputapu CSS kōpeke or iti taputapu CSS online.

Whakaarohia he kōnae CSS nui me te nui o te waahi ka taea te penapena ma te whakaiti i tana CSS… ko te tikanga he iti rawa te 20% ka eke ki runga ake i te 40% o ta raatau tahua. Ma te iti ake o te wharangi CSS e tukuna ana puta noa i to papaanga ka taea te penapena i nga waa uta ki ia wharangi kotahi, ka piki ake te tuunga o to papaanga, te whakapai ake i to whakaurunga, ka mutu te whakapai ake i o inenga whakawhiti.

Ko te kino, ko te mea he raina kotahi kei roto i te konae CSS kua whakakopekehia na he tino uaua ki te rapu raru, ki te whakahou ranei.

Shopify CSS Wai

I roto i te kaupapa Shopify, ka taea e koe te tono tautuhinga ka taea e koe te whakahou ngawari. E pai ana matou ki te mahi i tenei i a matou e whakamatautau ana me te arotau i nga waahi kia taea ai e matou te whakarite noa i te kaupapa ma te titiro atu kaua ki te keri ki roto i te waehere. Na, ka hangaia to tatou Pepa Ahua ki te Liquid (te reo tuhi a Shopify) ka taapirihia e matou nga taurangi hei whakahou i te Pepa Ahua. He penei pea te ahua:

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

Ahakoa e pai ana tenei, kare e taea e koe te kape noa i te waehere me te whakamahi i tetahi taputapu ipurangi hei whakaiti i te mea na te mea kaore o raatau tuhinga e mohio ki nga tohu wai. Inaa, ka tino whakangaro koe i to CSS mena ka ngana koe! Ko te rongo nui na te mea he mea hanga ki te Liquid… ka taea e koe te WHAKAMAHI i te tuhinga tuhi hei whakaiti i te putanga!

Shopify CSS Minification In Liquid

Ma te Shopify ka taea e koe te tuhi i nga taurangi me te whakarereke i te putanga. I tenei keehi, ka taea e tatou te takai i a tatou CSS ki roto i te taurangi ihirangi katahi ka raweke ki te tango i nga ripa katoa, nga hokinga raina, me nga waahi! I kitea e ahau tenei waehere i roto i te Hapori Shopify i Tim (tairi) me te mahi pai!

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

Na, mo taku tauira i runga ake nei, ka penei taku wharangi kaupapa.css.liquid:

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

Ka whakahaerehia e ahau te waehere, ko te putanga CSS e whai ake nei, kua tino whakaitihia:

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