Sıvı Değişkenler Kullanılarak Oluşturulan Shopify CSS'nizi Küçültmenin En Kolay Yolu

Shopify Liquid CSS Dosyaları için Komut Dosyasını Küçült

Biz inşa ettik ShopifyPlus gerçek tema dosyasında stilleri için bir dizi ayarı olan bir istemci için site. Bu, stilleri kolayca ayarlamak için gerçekten avantajlı olsa da, statik basamaklı stil sayfalarınız olmadığı anlamına gelir (CSS) kolayca yapabileceğiniz dosya küçültmek (boyutunu küçültün). Bazen buna CSS denir sıkıştırma ve sıkıştırmak senin CSS'in.

CSS Minifikasyonu nedir?

Bir stil sayfasına yazarken, belirli bir HTML öğesinin stilini bir kez tanımlar ve ardından istediğiniz sayıda web sayfasında tekrar tekrar kullanırsınız. Örneğin, yazı tiplerinin sitemde nasıl göründüğüne dair bazı ayrıntılar ayarlamak istersem, CSS'mi şu şekilde düzenleyebilirim:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Bu stil sayfasında her boşluk, satır dönüşü ve sekme yer kaplar. Bunların hepsini kaldırırsam, CSS küçültülürse o stil sayfasının boyutunu %40'ın üzerinde azaltabilirim! Sonuç bu…

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

CSS küçültme sitenizi hızlandırmak istiyorsanız bir zorunluluktur ve CSS dosyanızı verimli bir şekilde sıkıştırmanıza yardımcı olabilecek bir dizi çevrimiçi araç vardır. sadece ara CSS aracını sıkıştır or CSS aracını küçült internet üzerinden.

Büyük bir CSS dosyası ve CSS'sini küçülterek ne kadar alandan tasarruf edilebileceğini hayal edin… bu genellikle minimum %20'dir ve bütçelerinin %40'ından fazla olabilir. Sitenizde daha küçük bir CSS sayfasına sahip olmak, her sayfada yükleme sürelerini kısaltabilir, sitenizin sıralamasını yükseltebilir, etkileşiminizi iyileştirebilir ve sonuçta dönüşüm metriklerinizi iyileştirebilir.

Dezavantajı, elbette, sıkıştırılmış bir CSS dosyasında tek bir satır bulunmasıdır, bu nedenle sorun gidermeleri veya güncellemeleri inanılmaz derecede zordur.

Shopify CSS Sıvısı

Shopify teması içinde kolayca güncelleyebileceğiniz ayarları uygulayabilirsiniz. Bunu siteleri test ederken ve optimize ederken yapmayı seviyoruz, böylece koda girmek yerine temayı görsel olarak özelleştirebiliriz. Bu nedenle, Stil Sayfamız Liquid (Shopify'ın komut dosyası dili) ile oluşturulmuştur ve Stil Sayfasını güncellemek için değişkenler ekleriz. Şöyle görünebilir:

{%- 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 iyi çalışıyor olsa da, komut dosyaları sıvı etiketleri anlamadığı için kodu kopyalayıp küçültmek için çevrimiçi bir araç kullanamazsınız. Aslında, denerseniz CSS'nizi tamamen yok edeceksiniz! Harika haber şu ki, Liquid ile oluşturulduğu için… çıktıyı küçültmek için komut dizisini gerçekten KULLANABİLİRSİNİZ!

Shopify CSS Minification In Liquid

Shopify, değişkenleri kolayca komut dosyası haline getirmenize ve çıktıyı değiştirmenize olanak tanır. Bu durumda, CSS'imizi bir içerik değişkenine sarabilir ve ardından tüm sekmeleri, satır dönüşlerini ve boşlukları kaldırmak için onu değiştirebiliriz! içinde bu kodu buldum Shopify Topluluğu itibaren Tim (tairli) ve harika çalıştı!

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

Dolayısıyla, yukarıdaki örneğim için theme.css.liquid sayfam şöyle görünür:

{%- 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 çalıştırdığımda, CSS çıktısı mükemmel şekilde küçültülmüş olarak aşağıdaki gibidir:

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