Hanya mafi Sauƙi don Rage Shopify CSS ɗinku Wanda Aka Gina Ta Amfani da Matsalolin Liquid

Minify Rubutun don Shopify Liquid CSS Files

Mun gina a Kayan Aiki rukunin yanar gizo don abokin ciniki wanda ke da saitunan da yawa don salon su a cikin ainihin fayil ɗin jigo. Duk da yake hakan yana da fa'ida sosai don daidaita salo cikin sauƙi, yana nufin ba ku da zanen gadon cascading a tsaye (CSS) fayil wanda zaka iya sauƙi mini (rage girman). Wani lokaci ana kiran wannan da CSS matsawa da kuma compressing CSS ku.

Menene CSS Minification?

Lokacin da kake rubutawa zuwa salon rubutu, kuna ayyana salon wani nau'in HTML sau ɗaya, sannan ku yi amfani da shi akai-akai akan kowane adadin shafukan yanar gizo. Misali, idan ina son saita wasu takamaiman takamaiman yadda rubutuna ke kallon rukunin yanar gizona, zan iya tsara CSS dina kamar haka:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

A cikin wannan salon salon, kowane sarari, dawowar layi, da shafin suna ɗaukar sarari. Idan na cire duk waɗannan, Zan iya rage girman wannan salon da sama da 40% idan an rage CSS! Sakamakon haka shine…

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

CSS ragewa dole ne idan kuna son haɓaka rukunin yanar gizon ku kuma akwai kayan aikin da yawa akan layi waɗanda zasu iya taimaka muku damfara fayil ɗin CSS ɗinku yadda yakamata. Kawai bincika damfara CSS kayan aiki or rage kayan aikin CSS online.

Ka yi tunanin babban fayil ɗin CSS da nawa za a adana sarari ta hanyar rage CSS ɗinsa… yawanci mafi ƙarancin 20% ne kuma yana iya haura kashi 40 na kasafin kuɗin su. Samun ƙaramin shafi na CSS da ake magana a kai a ko'ina cikin rukunin yanar gizon ku na iya adana lokutan lodi akan kowane shafi ɗaya, yana iya haɓaka martabar rukunin yanar gizon ku, haɓaka haɗin gwiwar ku, da haɓaka ma'aunin canjin ku.

Ƙarƙashin ƙasa, ba shakka, shine akwai layi ɗaya a cikin fayil ɗin CSS da aka matsa don haka suna da wuyar warwarewa ko sabuntawa.

Shopify CSS Liquid

A cikin jigon Shopify, zaku iya amfani da saitunan da zaku iya ɗaukakawa cikin sauƙi. Muna son yin wannan yayin da muke gwadawa da haɓaka rukunin yanar gizo ta yadda za mu iya keɓance jigon a gani maimakon shiga cikin lambar. Don haka, Stylesheet ɗin mu an gina shi da Liquid (harshen rubutun Shopify) kuma muna ƙara masu canji don sabunta Stylesheet. Yana iya zama kamar haka:

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

Duk da yake wannan yana aiki da kyau, ba za ku iya kwafin lambar kawai ba kuma ku yi amfani da kayan aikin kan layi don rage shi saboda rubutun su bai fahimci alamun ruwa ba. A zahiri, zaku lalata CSS ɗinku gaba ɗaya idan kun gwada! Babban labari shine saboda an gina shi tare da Liquid… kuna iya amfani da rubutun don rage yawan fitarwa!

Shopify CSS Minification A cikin Liquid

Shopify yana ba ku damar rubuta canje-canje a sauƙaƙe da kuma canza abubuwan fitarwa. A wannan yanayin, za mu iya zahiri nannade CSS ɗin mu cikin madaidaicin abun ciki sannan mu sarrafa shi don cire duk shafuka, dawowar layi, da sarari! Na sami wannan lambar a cikin Shopify Community daga Tim (Tairli) kuma ya yi aiki brilliantly!

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

Don haka, ga misalina na sama, shafina na theme.css.liquid zai yi kama da haka:

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

Lokacin da na kunna lambar, fitarwar CSS kamar haka, an rage shi sosai:

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