में केवल विशिष्ट (सभी नहीं) सीएसएस फ़ाइलों को पूरी तरह से लोड करने के लिए कैसे करें मैं Meteor.js (एक पृष्ठ वेब ऐप नहीं) के साथ एक सामान्य वेबसाइट विकसित करना चाहता हूं और मैं प्रत्येक पृष्ठ के लिए केवल विशिष्ट सीएसएस फ़ाइलों को लोड करना चाहता हूं । तो सभी पेज एक ही सीएसएस कोड साझा नहीं करते हैं। क्या यह संभव है?Meteor.js
अगर आप उल्का का उपयोग कर रहे हैं तो सबसे पहले आप एक "सामान्य" साइट नहीं बना रहे हैं, तो आप एक बहुत ही शक्तिशाली एसपीए (सिंगल पेज एप्लिकेशन) बना रहे हैं। आप रूटिंग शुरू करने के साथ "सामान्य" वेबसाइट का अनुकरण कर सकते हैं, IronRouter आज़माएं।
अभी सीएसएस के बारे में ठीक है। एक बार जब आप उल्का तैनात कर लेंगे तो आपके सभी सीएसएस और जेएस विलय और minified हैं। इसलिए यदि आप जो भी पूछ रहे हैं उसे हासिल करना चाहते हैं तो आपको इस तरह के पैकेज को जोड़ने की आवश्यकता होगी।
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
फिर एक बार एक खाका बनाया है को गति प्रदान के लिए देते:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
मेरा मानना है कि आप भी उल्का के एसेट एपीआई के माध्यम से उल्का सर्वर से CSS लोड कर सकते हैं। यहां और पढ़ें: https://docs.meteor.com/#/full/assets
उल्का का एक बहुत छोटा और सटीक स्पष्टीकरण वास्तव में है! :) +1 –
लेकिन अगर हम पिछले दृश्य पर वापस जाते हैं तो आपका सीएसएस अभी भी लोड हो गया है। यह सीएसएस हटाया नहीं गया है और इसलिए पिछला दृश्य सीएसएस बदल गया है। – Ankita
चूंकि आपके प्रश्न के अंतिम भाग में कहा गया है, "इसलिए सभी पृष्ठ समान सीएसएस कोड साझा नहीं करते हैं।" आप अपने टेम्पलेट को एक अलग डिवी क्लास में कम और लपेटने पर विचार कर सकते हैं।
उदाहरणHTML फ़ाइल
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
कम फ़ाइल
.page1css {
.content {
font-size: 2em;
}
}
इस तरह से आप सिर्फ अपने पृष्ठों लपेट कर सकते हैं और सही वर्ग के संबंधित सीएसएस के लिए
।
इस तरह से अभी भी पूरे ऐप के लिए सभी सीएसएस लोड हो जाता है इससे कोई फर्क नहीं पड़ता कि कौन सा पृष्ठ देखा गया है। – benstr
हां, यह सच है, लेकिन यह केवल एक बार लोड करता है। फिर यह उसके बाद टेम्पलेट के लिए विशिष्ट सीएसएस का उपयोग करता है। मुझे यकीन नहीं था कि यूजीन पूरी तरह से क्या करने की कोशिश कर रहा था। – JoshJoe
मैं अलग-अलग टेम्पलेट्स के लिए शैलियों के बीच ओवरलैप से बचने के लिए व्यक्तिगत रूप से एक ही अवधारणा का उपयोग करता हूं। हालांकि मैं अलग-अलग करने के लिए आईडी का उपयोग करने की सलाह देता हूं। टेम्पलेट पेज 1 को एक आईडी "व्यू-पेज 1" मिलेगा - मुझे केवल याद रखने की आवश्यकता है कि विवाद से बचने के लिए दृश्य से शुरू होने वाली किसी भी आईडी का उपयोग न करें। इसके अतिरिक्त आपके पास साझा शैलियों के साथ एक सामान्य फ़ाइल है। 'उल्का कम' –
मुझे एक आसान समाधान मिला। आपके उल्का प्रोजेक्ट फ़ोल्डर में "सार्वजनिक" नामक फ़ोल्डर बनाएं (कोई उद्धरण नहीं)। उस फ़ोल्डर में "css" नामक फ़ोल्डर बनाएं (कोई उद्धरण नहीं)। उस फ़ोल्डर में सीएसएस फ़ाइल रखो।
html फ़ाइल जो निम्न कार्य करने के लागू करने के लिए विशिष्ट सीएसएस फ़ाइल चाहते हैं:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
यह अनुशंसित नहीं है - यह अपने अनुप्रयोग धीमी कर देगा। वर्तमान में सबसे अच्छी प्रैक्टिस आपकी सभी वेबसाइट के सीएसएस को एक फ़ाइल में जोड़ना है। – stubailo
यह हर मामले के लिए सच नहीं है, क्योंकि यह किसी वेबसाइट के सीएसएस के आकार पर निर्भर करता है। सीएसएस लोडिंग प्रक्रिया पेज प्रतिपादन ब्लॉक। तो यदि आपके पास कुछ सीएसएस हैं तो इसे पूरी तरह से लोड करना बेहतर होगा या यहां तक कि इनलाइन भी होगा। लेकिन यदि आपके पास बहुत सी सीएसएस है तो पहले सीएसएस को केवल एक पृष्ठ या यहां तक कि केवल उपरोक्त सामग्री को प्रस्तुत करने और शेष शैलियों की लोडिंग को स्थगित करने के लिए आवश्यक है। अधिक जानकारी जो आप यहां पा सकते हैं: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery – Eugene
@ यूजीन मुझे कुछ बिंदुओं के साथ हुक अप करें और कृपया उत्तर दें :) – benstr