Maye Dəyişənlərdən istifadə edərək qurulan Shopify CSS-ni azaltmağın ən asan yolu

Shopify Liquid CSS Faylları üçün Skripti kiçildir

Biz qurduq ShopifyPlus faktiki mövzu faylında üslubları üçün bir sıra parametrləri olan müştəri üçün sayt. Bu üslubları asanlıqla tənzimləmək üçün həqiqətən faydalı olsa da, bu o deməkdir ki, sizdə statik kaskad üslub vərəqləri yoxdur (CSS) asanlıqla edə biləcəyiniz fayl minify (ölçüsü azaltmaq). Bəzən buna CSS deyilir sıxılmasıxışdırır sizin CSS.

CSS Minifikasiyası nədir?

Stil cədvəlinə yazarkən, müəyyən HTML elementi üçün üslubu bir dəfə müəyyənləşdirirsiniz və sonra onu istənilən sayda veb-səhifələrdə təkrar-təkrar istifadə edirsiniz. Məsələn, şriftlərimin saytımda necə göründüyünə dair bəzi xüsusiyyətlər qurmaq istəsəm, CSS-i aşağıdakı kimi təşkil edə bilərəm:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Həmin üslub cədvəlində hər bir boşluq, sətir qayıtması və nişan yer tutur. Əgər bunların hamısını silsəm, CSS kiçildilirsə, həmin üslub cədvəlinin ölçüsünü 40%-dən çox azalda bilərəm! Nəticə belədir…

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

CSS-nin kiçildilməsi saytınızı sürətləndirmək istəyirsinizsə və CSS faylınızı səmərəli şəkildə sıxmağa kömək edə biləcək bir sıra onlayn alətlər varsa, bu mütləqdir. Sadəcə axtarın CSS alətini sıxın or CSS alətini kiçildir online.

Təsəvvür edin ki, böyük bir CSS faylı və onun CSS-ni minimuma endirməklə nə qədər yerə qənaət edilə bilər... bu, adətən minimum 20% təşkil edir və onların büdcəsinin 40%-dən çoxunu təşkil edə bilər. Saytınızda istinad edilən daha kiçik bir CSS səhifəsinə sahib olmaq hər bir səhifənin yüklənmə müddətinə qənaət edə, saytınızın reytinqini artıra, əlaqənizi yaxşılaşdıra və nəticədə dönüşüm göstəricilərinizi təkmilləşdirə bilər.

İşin mənfi tərəfi, əlbəttə ki, sıxılmış CSS faylında tək bir sətir olmasıdır, ona görə də onları aradan qaldırmaq və ya yeniləmək olduqca çətindir.

Shopify CSS Mayesi

Shopify mövzusunda siz asanlıqla yeniləyə biləcəyiniz parametrləri tətbiq edə bilərsiniz. Biz saytları sınaqdan keçirərkən və optimallaşdırarkən bunu etməyi xoşlayırıq ki, koda daxil olmaqdansa, mövzunu vizual olaraq fərdiləşdirə bilək. Beləliklə, Stil Cədvəlimiz Liquid (Shopify-ın skript dili) ilə qurulub və biz Üslub Cədvəlini yeniləmək üçün dəyişənlər əlavə edirik. Bu belə görünə bilər:

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

Bu yaxşı işləsə də, sadəcə kodu kopyalaya və onu kiçildirmək üçün onlayn alətdən istifadə edə bilməzsiniz, çünki onların skripti maye etiketləri başa düşmür. Əslində, cəhd etsəniz, CSS-nizi tamamilə məhv edəcəksiniz! Əla xəbər budur ki, o, Liquid ilə qurulduğuna görə… siz faktiki olaraq çıxışı minimuma endirmək üçün skriptdən istifadə edə bilərsiniz!

Mayedə Shopify CSS Minifikasiyası

Shopify sizə dəyişənləri asanlıqla skript etmək və çıxışı dəyişdirmək imkanı verir. Bu halda, biz əslində CSS-imizi məzmun dəyişəninə yığa və sonra bütün nişanları, sətir qaytarmalarını və boşluqları silmək üçün manipulyasiya edə bilərik! Bu kodu tapdım Shopify İcması etibarən Tim (tairli) və mükəmməl işlədi!

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

Beləliklə, yuxarıdakı nümunəm üçün theme.css.liquid səhifəm belə görünəcək:

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

Kodu işlətdiyim zaman CSS çıxışı aşağıdakı kimidir, mükəmməl şəkildə kiçildilir:

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