திரவ மாறிகளைப் பயன்படுத்தி கட்டப்பட்ட உங்கள் Shopify CSS ஐக் குறைக்க எளிதான வழி

Shopify Liquid CSS கோப்புகளுக்கான ஸ்கிரிப்டை மினிஃபை செய்யவும்

நாங்கள் ஒரு கட்டமைத்தோம் Shopify Plus உண்மையான தீம் கோப்பில் அவர்களின் ஸ்டைல்களுக்கான பல அமைப்புகளைக் கொண்ட கிளையண்டிற்கான தளம். ஸ்டைல்களை எளிதில் சரிசெய்வதற்கு இது மிகவும் சாதகமாக இருந்தாலும், நிலையான அடுக்கு நடை தாள்கள் உங்களிடம் இல்லை என்று அர்த்தம் (CSS ஐ) நீங்கள் எளிதாக செய்யக்கூடிய கோப்பு மினி (அளவைக் குறைக்கவும்). சில நேரங்களில் இது CSS என குறிப்பிடப்படுகிறது சுருக்க மற்றும் சுருக்கமாய் உங்கள் CSS.

CSS சிறுமைப்படுத்தல் என்றால் என்ன?

நீங்கள் ஒரு ஸ்டைல்ஷீட்டில் எழுதும் போது, ​​ஒரு குறிப்பிட்ட 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 சிறிய CSS கருவி ஆன்லைன்.

ஒரு பெரிய CSS கோப்பை கற்பனை செய்து பாருங்கள், அதன் CSS ஐ சிறிதாக்குவதன் மூலம் எவ்வளவு இடத்தை சேமிக்க முடியும்... இது பொதுவாக குறைந்தபட்சம் 20% மற்றும் அவர்களின் பட்ஜெட்டில் 40% அதிகமாக இருக்கலாம். உங்கள் தளம் முழுவதும் சிறிய CSS பக்கத்தைக் குறிப்பிடுவது, ஒவ்வொரு பக்கத்திலும் ஏற்ற நேரங்களைச் சேமிக்கலாம், உங்கள் தளத்தின் தரவரிசையை அதிகரிக்கலாம், உங்கள் ஈடுபாட்டை மேம்படுத்தலாம் மற்றும் இறுதியில் உங்கள் மாற்ற அளவீடுகளை மேம்படுத்தலாம்.

குறைபாடு என்னவென்றால், சுருக்கப்பட்ட CSS கோப்பில் ஒற்றை வரி உள்ளது, எனவே அவற்றை சரிசெய்வது அல்லது புதுப்பிப்பது நம்பமுடியாத அளவிற்கு கடினம்.

Shopify CSS திரவம்

Shopify தீமுக்குள், நீங்கள் எளிதாகப் புதுப்பிக்கக்கூடிய அமைப்புகளைப் பயன்படுத்தலாம். நாங்கள் தளங்களைச் சோதித்து மேம்படுத்தும்போது இதைச் செய்ய விரும்புகிறோம், இதன் மூலம் குறியீட்டைத் தோண்டி எடுப்பதற்குப் பதிலாக தீம் பார்வைக்குத் தனிப்பயனாக்கலாம். எனவே, எங்கள் ஸ்டைல்ஷீட் லிக்விட் (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 வெளியீடு பின்வருமாறு, மிகச் சிறியதாக இருக்கும்:

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