Txoj hauv kev yooj yim tshaj kom txo koj cov Shopify CSS uas yog tsim los siv cov kua dej sib txawv

Minify Script rau Shopify Liquid CSS Cov Ntaub Ntawv

Peb tsim tawm ib Kav Khw Ntxiv Ntxiv site rau tus neeg siv khoom uas muaj ntau qhov chaw rau lawv cov qauv hauv cov ntsiab lus tiag tiag. Thaum qhov ntawd yog qhov txiaj ntsig zoo rau kev kho cov qauv yooj yim, nws txhais tau tias koj tsis muaj cov nplooj ntawv zoo li cascading style (CSS) cov ntaub ntawv uas koj tuaj yeem yooj yim me me (txo qhov loj). Qee zaum qhov no yog hu ua CSS compression thiab compressing koj CSS.

CSS Minification yog dab tsi?

Thaum koj sau ntawv rau ib daim ntawv teev npe, koj txhais cov style rau ib qho HTML ib zaug, thiab tom qab ntawd siv nws ntau dhau ntawm cov nplooj ntawv web. Piv txwv li, yog tias kuv xav teeb tsa qee qhov tshwj xeeb rau yuav ua li cas kuv cov fonts saib ntawm kuv qhov chaw, kuv tuaj yeem npaj kuv CSS raws li hauv qab no:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Hauv daim ntawv style, txhua qhov chaw, kab rov qab, thiab tab siv qhov chaw. Yog tias kuv tshem tawm tag nrho cov no, kuv tuaj yeem txo qhov loj ntawm daim ntawv style no ntau dua 40% yog tias CSS raug txo qis! Qhov tshwm sim yog qhov no…

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

CSS miniification Nws yog ib qho tseem ceeb yog tias koj xav kom ceev koj qhov chaw thiab muaj ntau cov cuab yeej hauv online uas tuaj yeem pab koj nthuav koj cov ntaub ntawv CSS zoo. Tsuas yog nrhiav compress CSS tool or minify CSS tool online.

Xav txog cov ntaub ntawv CSS loj thiab ntau npaum li cas tuaj yeem txuag tau los ntawm kev txo nws cov CSS ... nws feem ntau yog tsawg kawg yog 20% ​​thiab tuaj yeem nce mus txog 40% ntawm lawv cov peev nyiaj. Muaj nplooj ntawv CSS me me xa mus thoob plaws koj lub xaib tuaj yeem txuag lub sijhawm thauj khoom ntawm txhua nplooj ntawv, tuaj yeem nce koj qhov chaw qeb duas, txhim kho koj txoj kev koom tes, thiab thaum kawg txhim kho koj cov kev ntsuas kev hloov pauv.

Qhov tsis zoo, tau kawg, yog tias muaj ib kab hauv cov ntaub ntawv CSS compressed yog li lawv nyuaj heev los daws teeb meem lossis hloov kho.

Shopify CSS Liquid

Hauv Shopify lub ntsiab lus, koj tuaj yeem siv cov chaw uas koj tuaj yeem hloov kho tau yooj yim. Peb nyiam ua qhov no thaum peb sim thiab ua kom zoo dua qhov chaw kom peb tuaj yeem hloov kho lub ntsiab lus pom tsis yog khawb rau hauv cov cai. Yog li, peb Stylesheet tau tsim nrog kua (Shopify's scripting language) thiab peb ntxiv qhov sib txawv los hloov kho Stylesheet. Nws yuav zoo li no:

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

Thaum qhov no ua haujlwm zoo, koj tsis tuaj yeem luam cov lej thiab siv cov cuab yeej online los txo qis vim tias lawv cov ntawv tsis nkag siab cov cim npe ua kua. Qhov tseeb, koj yuav rhuav tshem koj li CSS yog tias koj sim! Cov xov xwm zoo yog vim tias nws tau tsim nrog kua...

Shopify CSS Minification Hauv Kua

Shopify ua rau koj yooj yim sau cov ntawv hloov pauv thiab hloov kho cov zis. Hauv qhov no, peb tuaj yeem qhwv peb CSS rau hauv cov ntsiab lus sib txawv thiab tom qab ntawd muab nws tshem tawm tag nrho cov tabs, kab rov qab, thiab qhov chaw! Kuv pom tus lej no hauv lub Shopify Community los ntawm Tim (zeeg) thiab nws ua haujlwm ci ntsa iab!

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

Yog li, rau kuv qhov piv txwv saum toj no, kuv nplooj ntawv theme.css.liquid yuav zoo li no:

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

Thaum kuv khiav cov cai, cov zis CSS yog raws li nram no, zoo kawg nkaus minified:

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