तरल चरहरू प्रयोग गरेर निर्मित तपाईंको Shopify CSS कम गर्ने सबैभन्दा सजिलो तरिका

Shopify Liquid CSS फाइलहरूको लागि Minify Script

हामीले एक निर्माण गर्यौं शॉपिफाई प्लस वास्तविक विषयवस्तु फाइलमा उनीहरूको शैलीहरूको लागि सेटिङहरूको संख्या भएको ग्राहकको लागि साइट। यद्यपि यो सजिलैसँग शैलीहरू समायोजन गर्नको लागि साँच्चै फाइदाजनक छ, यसको मतलब तपाईंसँग स्थिर क्यास्केडिङ शैली पानाहरू छैनन् (CSS) फाइल जुन तपाईं सजिलैसँग गर्न सक्नुहुन्छ सानो बनाउनुहोस् (आकार घटाउनुहोस्)। कहिलेकाहीँ यसलाई CSS भनिन्छ सङ्कुचनकम्प्रेस गर्दै तपाईंको CSS।

CSS Minification भनेको के हो?

जब तपाइँ स्टाइलसिटमा लेख्दै हुनुहुन्छ, तपाइँ एक पटक विशेष HTML तत्वको लागि शैली परिभाषित गर्नुहुन्छ, र त्यसपछि यसलाई वेब पृष्ठहरूको कुनै पनि संख्यामा प्रयोग गर्नुहोस्। उदाहरणका लागि, यदि म मेरो साइटमा मेरा फन्टहरू कसरी देखिन्छन् भनेर केही विशिष्टहरू सेटअप गर्न चाहन्छु भने, म मेरो CSS निम्नानुसार व्यवस्थित गर्न सक्छु:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

त्यो स्टाइलसिट भित्र, प्रत्येक स्पेस, लाइन रिटर्न, र ट्याबले ठाउँ लिन्छ। यदि मैले ती सबै हटाएँ भने, यदि CSS minified छ भने, म त्यो स्टाइलसिटको साइज 40% भन्दा बढी घटाउन सक्छु! परिणाम यस्तो छ…

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

CSS मानिकरण यदि तपाइँ तपाइँको साइट को गति बढाउन चाहानुहुन्छ र तपाइँको CSS फाइल कुशलतापूर्वक कम्प्रेस गर्न मद्दत गर्न सक्ने अनलाईन उपकरणहरू छन् भने यो आवश्यक छ। मात्र खोज्नुहोस् CSS उपकरण कम्प्रेस गर्नुहोस् or CSS उपकरण minify अनलाइन।

एउटा ठूलो CSS फाइलको कल्पना गर्नुहोस् र यसको CSS मानिफाइ गरेर कति ठाउँ बचत गर्न सकिन्छ... यो सामान्यतया न्यूनतम २०% हुन्छ र तिनीहरूको बजेटको ४०% माथि हुन सक्छ। तपाईंको साइटभरि सन्दर्भ गरिएको सानो CSS पृष्ठले प्रत्येक पृष्ठमा लोड समय बचत गर्न सक्छ, तपाईंको साइटको श्रेणीकरण बढाउन सक्छ, तपाईंको संलग्नता सुधार गर्न सक्छ, र अन्ततः तपाईंको रूपान्तरण मेट्रिक्स सुधार गर्न सक्छ।

नकारात्मक पक्ष, पक्कै पनि, कम्प्रेस गरिएको CSS फाइलमा एकल रेखा छ त्यसैले तिनीहरू समस्या निवारण वा अद्यावधिक गर्न अविश्वसनीय रूपमा गाह्रो छन्।

Shopify CSS Liquid

एक 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}