ساده ترین راه برای کوچک کردن Shopify CSS شما که با استفاده از متغیرهای مایع ساخته شده است

Minify Script برای Shopify Liquid CSS Files

ما ساختیم یک Shopify Plus سایت برای مشتری که تعدادی تنظیمات برای استایل های خود در فایل تم واقعی دارد. در حالی که این واقعاً برای تنظیم آسان سبک ها مفید است، به این معنی است که شما یک برگه سبک آبشاری ایستا ندارید (CSS) فایلی که به راحتی می توانید کوچک کردن (کاهش سایز). گاهی اوقات به آن CSS می گویند فشرده سازی و فشرده سازی CSS شما

CSS Minification چیست؟

هنگامی که در یک شیوه نامه می نویسید، یک بار سبک را برای یک عنصر HTML خاص تعریف می کنید و سپس بارها و بارها از آن در هر تعداد صفحه وب استفاده می کنید. به عنوان مثال، اگر بخواهم برخی از ویژگی های ظاهری فونت های خود را در سایت خود تنظیم کنم، ممکن است CSS خود را به صورت زیر سازماندهی کنم:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

در آن شیوه نامه، هر فاصله، بازگشت خط و برگه فضا اشغال می کند. اگر همه آنها را حذف کنم، اگر CSS کوچک شود، می توانم اندازه آن شیوه نامه را بیش از 40٪ کاهش دهم! نتیجه این…

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

کوچک سازی CSS اگر می خواهید سرعت سایت خود را افزایش دهید و تعدادی ابزار آنلاین وجود دارد که می تواند به شما کمک کند فایل CSS خود را به طور موثر فشرده کنید، ضروری است. فقط جستجو کنید فشرده سازی ابزار CSS or Minify ابزار CSS آنلاین.

یک فایل CSS بزرگ را تصور کنید و چقدر فضا را می توان با کوچک کردن CSS آن ذخیره کرد... معمولاً حداقل 20٪ است و می تواند بیش از 40٪ از بودجه آنها باشد. داشتن یک صفحه کوچکتر CSS که در سرتاسر سایت شما ارجاع داده می شود می تواند در زمان بارگذاری هر صفحه صرفه جویی کند، می تواند رتبه سایت شما را افزایش دهد، تعامل شما را بهبود بخشد و در نهایت معیارهای تبدیل شما را بهبود بخشد.

البته نکته منفی این است که یک خط در یک فایل CSS فشرده وجود دارد، بنابراین عیب یابی یا به روز رسانی آن ها فوق العاده دشوار است.

Shopify CSS Liquid

در قالب Shopify، می توانید تنظیماتی را اعمال کنید که می توانید به راحتی آن ها را به روز کنید. ما دوست داریم این کار را در حین آزمایش و بهینه سازی سایت ها انجام دهیم تا بتوانیم به جای جستجو در کد، موضوع را به صورت بصری سفارشی کنیم. بنابراین، Stylesheet ما با Liquid (زبان برنامه نویسی Shopify) ساخته شده است و ما متغیرهایی را برای به روز رسانی Stylesheet اضافه می کنیم. ممکن است به این شکل باشد:

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

در حالی که این به خوبی کار می کند، شما نمی توانید به سادگی کد را کپی کنید و از یک ابزار آنلاین برای کوچک کردن آن استفاده کنید زیرا اسکریپت آنها برچسب های مایع را درک نمی کند. در واقع، اگر تلاش کنید، CSS خود را کاملاً از بین خواهید برد! خبر خوب این است که چون با Liquid ساخته شده است، می توانید از اسکریپت برای به حداقل رساندن خروجی استفاده کنید!

Shopify CSS Minification In Liquid

Shopify شما را قادر می سازد تا به راحتی متغیرها را اسکریپت کنید و خروجی را تغییر دهید. در این حالت، ما در واقع می‌توانیم CSS خود را در یک متغیر محتوا بپیچانیم و سپس آن را دستکاری کنیم تا همه برگه‌ها، بازگشت‌های خطوط و فاصله‌ها حذف شوند! من این کد را در انجمن Shopify از جانب تیم (تیرلی) و عالی کار کرد!

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

بنابراین، برای مثال من در بالا، صفحه theme.css.liquid من به این شکل خواهد بود:

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

وقتی کد را اجرا می کنم، CSS خروجی به صورت زیر است، کاملا کوچک شده است:

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