ستاسو د Shopify CSS کمولو لپاره ترټولو اسانه لار چې د مایع تغیراتو په کارولو سره رامینځته شوی

د Shopify مایع CSS فایلونو لپاره سکریپټ Minify

موږ یو جوړ کړ پلورنځی د پیرودونکي لپاره سایټ چې د اصلي موضوع فایل کې د دوی سټایلونو لپاره یو شمیر ترتیبات لري. پداسې حال کې چې دا واقعیا د سټایلونو تنظیم کولو لپاره واقعیا ګټور دی ، دا پدې معنی ده چې تاسو د جامد کاسکیډینګ سټایل شیټونه نلرئ (سی ایس ایس) فایل چې تاسو یې په اسانۍ سره کولی شئ مینی (د اندازې کمول). ځینې ​​​​وختونه دا د CSS په توګه راجع کیږي کمپریشن او کمپرسۍ ستاسو سی ایس ایس.

د CSS Minification څه شی دی؟

کله چې تاسو سټایل شیټ ته لیکئ، تاسو یو ځل د ځانګړي HTML عنصر لپاره سټایل تعریف کړئ، او بیا یې په هر شمیر ویب پاڼو کې وکاروئ. د مثال په توګه، که زه غواړم ځینې مشخصات ترتیب کړم چې څنګه زما فونټونه زما په سایټ کې لیدل کیږي، زه ممکن زما CSS په لاندې ډول تنظیم کړم:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

د دې سټایل شیټ دننه ، هر ځای ، لاین بیرته راستنیدنه ، او ټب ځای نیسي. که زه دا ټول لیرې کړم، زه کولی شم د دې سټایل شیټ اندازه له 40٪ څخه کمه کړم که CSS کوچنی وي! پایله دا ده…

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

د CSS minification دا اړینه ده که تاسو غواړئ خپل سایټ ګړندی کړئ او یو شمیر آنلاین وسیلې شتون لري چې کولی شي تاسو سره ستاسو د CSS فایل په مؤثره توګه فشارولو کې مرسته وکړي. یوازې لټون وکړئ د CSS وسیله کمپریس کړئ or د CSS وسیله minify آنلاین.

تصور وکړئ چې د CSS لوی فایل او څومره ځای د هغې د CSS کمولو سره خوندي کیدی شي… دا معمولا لږترلږه 20٪ وي او د دوی د بودیجې 40٪ څخه پورته کیدی شي. ستاسو په سایټ کې راجع شوي کوچني CSS پا pageې درلودل کولی شي په هر پا pageه کې د بار بار وخت خوندي کړي ، کولی شي ستاسو د سایټ درجه بندي لوړه کړي ، ستاسو ښکیلتیا ښه کړي ، او په نهایت کې ستاسو د تبادلې میټریک ښه کړي.

نیمګړتیا، البته، دا ده چې په کمپریس شوي CSS فایل کې یو واحد کرښه شتون لري نو دوی د ستونزو حل یا تازه کول خورا ستونزمن دي.

Shopify CSS مایع

د Shopify موضوع کې، تاسو کولی شئ هغه ترتیبات پلي کړئ چې تاسو یې په اسانۍ سره تازه کولی شئ. موږ دا خوښوو لکه څنګه چې موږ سایټونه ازموینه او اصلاح کوو ترڅو موږ وکولی شو د کوډ کې کیندنې پرځای موضوع په لید سره تنظیم کړو. نو، زموږ سټایل شیټ د مایع (د شاپیف سکریپټینګ ژبه) سره جوړ شوی او موږ د سټایل شیټ تازه کولو لپاره متغیرونه اضافه کوو. دا کیدای شي داسې ښکاري:

{%- 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 ویجاړ کړئ که تاسو هڅه وکړئ! لوی خبر دا دی چې دا د مایع سره جوړ شوی ... تاسو واقعیا کولی شئ د محصول کمولو لپاره سکریپټینګ وکاروئ!

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 minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}