An dòigh as fhasa air do CSS Shopify a lughdachadh a tha air a thogail a’ cleachdadh caochlaidhean leaghan

Sgriobt minify airson faidhlichean CSS Shopify Liquid

Thog sinn a-mach a ShopifyPlus làrach airson neach-dèiligidh aig a bheil grunn shuidheachaidhean airson na stoidhlichean aca anns an fhìor fhaidhle cuspair. Ged a tha sin gu math buannachdail airson stoidhlichean atharrachadh gu furasta, tha e a’ ciallachadh nach eil siotaichean stoidhle cascading statach agad (CSS) faidhle as urrainn dhut gu furasta minify (lùghdachadh ann am meud). Uaireannan canar CSS ris an seo Compression agus a ’coireachadh do CSS.

Dè a th’ ann am Mion-sgrùdadh CSS?

Nuair a bhios tu a’ sgrìobhadh gu duilleag stoidhle, bidh thu a’ mìneachadh an stoidhle airson eileamaid HTML sònraichte aon turas, agus an uairsin ga chleachdadh a-rithist is a-rithist air àireamh sam bith de dhuilleagan lìn. Mar eisimpleir, nam biodh mi airson mion-fhiosrachadh sònraichte a chuir air dòigh airson mar a bha na clòthan agam a’ coimhead air an làrach agam, is dòcha gun cuir mi mo CSS air dòigh mar a leanas:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Taobh a-staigh na duilleig stoidhle sin, bidh gach àite, tilleadh loidhne, agus taba a’ gabhail àite. Ma bheir mi air falbh iad sin uile, is urrainn dhomh meud an duilleag stoidhle sin a lughdachadh còrr air 40% ma thèid an CSS a lughdachadh! Is e an toradh seo…

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

Mion-sgrùdadh CSS riatanach ma tha thu airson do làrach a luathachadh agus tha grunn innealan air-loidhne ann a chuidicheas tu gus am faidhle CSS agad a dhlùthadh gu h-èifeachdach. Dìreach lorg teannachadh inneal CSS or inneal CSS minify air-loidhne.

Smaoinich air faidhle CSS mòr agus na tha de rùm air a shàbhaladh le bhith a’ lughdachadh an CSS aige… mar as trice tha e co-dhiù 20% agus faodaidh e a bhith suas ri 40% den bhuidseit aca. Le bhith a’ faighinn duilleag CSS nas lugha air a chuir air feadh na làraich agad, faodaidh tu amannan luchdaidh a shàbhaladh air gach duilleag, faodaidh e rangachadh na làraich agad àrdachadh, do chom-pàirteachadh adhartachadh, agus mu dheireadh leasaich na meatrach tionndaidh agad.

Is e an ìsleachadh, gu dearbh, gu bheil aon loidhne ann am faidhle CSS teann agus mar sin tha e uamhasach duilich duilgheadasan fhuasgladh no ùrachadh.

Shopify CSS Liquid

Taobh a-staigh cuspair Shopify, faodaidh tu roghainnean a chuir an sàs as urrainn dhut ùrachadh gu furasta. Is toil leinn seo a dhèanamh fhad ‘s a bhios sinn a’ dèanamh deuchainn agus a ’dèanamh an fheum as fheàrr de làraich gus an urrainn dhuinn dìreach an cuspair a ghnàthachadh gu fradharcach seach a bhith a’ cladhach a-steach don chòd. Mar sin, tha ar Stylesheet air a thogail le Liquid (cànan sgrìobhaidh Shopify) agus cuiridh sinn caochladairean ris gus an Stylesheet ùrachadh. Faodaidh e coimhead mar seo:

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

Ged a tha seo ag obair gu math, chan urrainn dhut dìreach an còd a chopaigeadh agus inneal air-loidhne a chleachdadh gus a lughdachadh leis nach eil an sgriobt aca a’ tuigsinn nan tagaichean leaghaidh. Gu dearbh, sgriosaidh tu do CSS gu tur ma dh'fheuchas tu! Is e an deagh naidheachd, leis gu bheil e air a thogail le Liquid… faodaidh tu gu dearbh CLEACHDADH sgriobtaichean gus an toradh a lughdachadh!

Mion-sgrùdadh CSS Shopify ann an Liquid

Leigidh Shopify leat caochladairean a sgrìobhadh gu furasta agus an toradh atharrachadh. Anns a ’chùis seo, is urrainn dhuinn ar CSS a phasgadh a-steach do chaochladair susbaint agus an uairsin a làimhseachadh gus a h-uile taba, tilleadh loidhne agus àite a thoirt air falbh! Lorg mi an còd seo anns an Coimhearsnachd Shopify bho Tim (tairli) agus dh’obraich e sgoinneil!

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

Mar sin, mar eisimpleir gu h-àrd, bhiodh an duilleag theme.css.liquid agam a’ coimhead mar seo:

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

Nuair a ruitheas mi an còd, tha an toradh CSS mar a leanas, air a lughdachadh gu foirfe:

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