सिर्फ CSS फ़ाइल लिंक करने पर addStyleSheet या JHtml :: स्टाइलशीट का उपयोग क्यों करें?

9

विकि पेज को जावास्क्रिप्ट और सीएसएस को पेज में जोड़ने के अनुसार , आप addStyleSheetइस तरह से एक स्टाइलशीट जोड़ सकते हैं :

$document = JFactory::getDocument();
$document->addStyleSheet($url);

या JHtml::stylesheetइस तरह के साथ :

JHtml::stylesheet($url, array(), true);

लेकिन विकी पेज बनाना एक बेसिक टेम्प्लेट शिक्षार्थी को इस तरह से स्टाइलशीट शामिल करने का निर्देश देता है:

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
</head>

यह नजरअंदाज addStyleSheetऔर JHtml::stylesheet। यह एक अच्छा विचार है? आप पूर्व का उपयोग कब करेंगे और आप बाद का उपयोग कब करेंगे?

नोट: JHtml::_("script", …) और JHtml::_("stylesheet", …)लगभग ठीक उसी के रूप में कर रहे हैं JHtml::scriptऔर JHtml::stylesheet। देखें करता क्या JHtml::_करना ।

jhtml jfactory

— Flimm
स्रोत

संबंधित प्रश्न जावास्क्रिप्ट के बारे में पूछें

— फ़्लिम

7

JHtmlसामान्य रूप से एक्सटेंशन में उपयोग किया जाता है क्योंकि इसका मतलब है कि ओवरराइड्स का प्रदर्शन किया जा सकता है जो कि अगर आप डेवलपर हैं तो वास्तव में एक अच्छी सुविधा है। यह $document->...कुछ अतिरिक्त कार्यक्षमता जोड़कर भी फैलता है।

यहाँ एक उदाहरण है:

/js
   /script.js
   /script.min.js

का उपयोग करते समय JHtml, न्यूनतम किया गया स्क्रिप्ट के संस्करण पृष्ठ लोडिंग अवधि कम करने के लिए लोड किया जाएगा। जब आप ग्लोबल कॉन्फ़िगरेशन में डिबग मोड को सक्षम करते हैं, तो यह फ़ाइल को पढ़ने योग्य बनाने के लिए निर्विवाद संस्करण को लोड करेगा ।

आप एक्सटेंशन के लिए उसी तरह से एक टेम्प्लेट को ओवरराइड नहीं कर सकते हैं, इसलिए बहुत सारे टेम्प्लेट उपयोग करते हैं <link>क्योंकि कोई भी ओवरराइड केवल एक custom.cssफ़ाइल जोड़कर किया जा सकता है , फिर उसमें अपना कोड जोड़ सकते हैं। इस प्रकार देशी <link>टैग का उपयोग तेज हो जाता है फिर सीएसएस फ़ाइल को लोड करने के लिए जूमला एपीआई का उपयोग किया जाता है

— Lodder
स्रोत

तो JHtmlएक टेम्पलेट के लिए उपयोग करने का एकमात्र लाभ यह है कि क्या आपको मिनिमाइज़ेशन प्राप्त करना है?

— फ्लि‍म

@ फ़ीलम - यहां एक नज़र डालें, जहां यह थोड़ा और विस्तार से बताएगा

— Lodder

यह मेरे सवाल का लिंक है :) मुझे सिर्फ स्पष्टीकरण चाहिए था क्योंकि यह अजीब लगता था कि आप कभी <link ...>कोड डायरेक्टाइल लिखेंगे।

— फ्लि‍म

1

एक टेम्पलेट में, यह पूरी तरह से ठीक है क्योंकि आप एक वास्तविक टेम्पलेट को उस तरह से ओवरराइड नहीं कर सकते हैं जिस तरह से आप एक एक्सटेंशन कर सकते हैं, इसलिए जूमला एपीआई के बिना एक परिसंपत्ति का आयात किया जा सकता है;)

— लॉडर

1

@ फीलम जेएचटीएमएल एमडी 5 एसयूएम फाइलों के साथ भी काम करता है, $ डॉक्यूमेंट-> ऐडस्लेटशीट नहीं करता है। magazine.joomla.org/issues/issue-nov-2014/item/…

— COBIZ वेबडेवलपमेंट

6

दूसरों के अलावा, मुझे जो सबसे बड़ा लाभ मिला है वह यह है कि सभी CSS / JSS फाइलें 1 बार में एक ही सरणी में होती हैं।

यह एक लाभ की तरह नहीं लग सकता है, लेकिन एक और उदाहरण से एक स्निपेट

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

बाद में जब आप बदलना चाहते हैं system.css, तो आप परिवर्तन करेंगे और फिर महसूस करेंगे कि आपके उपयोगकर्ताओं के पास system.cssआपकी नई सामग्री के साथ कैश में पुराना है, जिसका अर्थ है कि आपको कोड को थोड़ा अलग URL बनाने के लिए बदलना होगा (या अपना कैश समय कम करना होगा और उपयोगकर्ता को अधिक बार डाउनलोड करें)

जब आप JHTML विधि का उपयोग करते हैं जब टेम्पलेट उत्पन्न होता है तो आप CSS / JS फ़ाइल का "संस्करण" उत्पन्न कर सकते हैं (फिल्म का उपयोग करने के लिए एक अच्छा है, या कमिट आईडी आदि) तो सामग्री को तुरंत बदलने से नया css मिलता है। आपकी साइट देखने के लिए सभी लोग। लंबे कैश समय + तत्काल री जेनरेशन का अर्थ है प्रति पृष्ठ कम डाउनलोड।

कोड नमूना (काम नहीं किया गया, हालांकि मैं समान कोड का उपयोग करता हूं)

$styles  = $this['asset']->get('css');
if ($styles) {
  foreach ($styles as $style) {
    if ($url = $style->getUrl()) {
      if ($url[0] == "/") {
      //its local, find it and add the mtime
        if (file_exists(getcwd() . $url)) {
          $url .= "?" .filemtime(getcwd() . $url);
        }
      }
      printf("<link rel=\"stylesheet\" href=\"%s\" type=\"text/css\" />\n", $url);
    } else {
      printf("<style>%s</style>\n", $style->getContent());
    }
  }
}

यह सुनिश्चित करने के लिए कि आपके सिस्टम सही तरीके से पाए गए हैं, इस कोड को आपके सिस्टम के लिए ट्विकिंग की आवश्यकता होगी

— exussum
स्रोत

5

जूमला अपने कारखाने से अपना एपीआई प्रदान करता है जिसे हम JFactory कह सकते हैं।

उपयोग करने का कोई नुकसान नहीं है:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

ऊपर:

$document = JFactory::getDocument();
$document->addStyleSheet($url);

हालाँकि, यदि आप अपनी स्टाइलशीट्स को उपरोक्त विधि से शामिल कर रहे हैं, तो यह <head>आपके टेम्पलेट के सेक्शन में अपने आप शामिल हो जाएगा <jdoc:include type="head" />। आगे बढ़ते हुए, यदि हम अपना स्वयं का एक्सटेंशन विकसित कर रहे हैं और यदि आप स्पष्ट रूप से अपना खुद का CSS या जावास्क्रिप्ट चाहते हैं तो आप इसे उपरोक्त विधि से घोषित कर सकते हैं। यह फिर से आपके <head>सेक्शन में जुड़ जाएगा और आपके टेम्प्लेट को अपडेट करने से परहेज करेगाindex.php

कभी-कभी आप चाहते हैं कि आपकी स्क्रिप्ट आपके शरीर के अंत में दिखाई दे ताकि सभी डोम तत्व लोड हो सकें। इस स्थिति में आप <body>निम्नलिखित के साथ अपने स्क्रिप्ट को अपने तत्व के अंत में शामिल करना चाह सकते हैं :

<script type="text/javascript" src="myScript.js"></script>

आप सीएसएस और लिपियों को संभालने के लिए अतिरिक्त नियंत्रण भी प्राप्त कर सकते हैं जैसे कि आप स्क्रिप्ट और स्टाइलशीट को प्रोग्रामेटिक रूप से अनसेट कर सकते हैं यदि जरूरत नहीं है।

— साहिल पुरव
स्रोत

मैं समझता हूं कि JFactoryस्टाइलशीट को अंदर रखा गया है <jdoc:include type="head" />, मेरे सवाल यह है कि एक टेम्पलेट में इसका उपयोग करके परेशान क्यों करें जब आप सिर्फ <link ...>खुद लाइन लिख सकते हैं ?

— फ्लि‍म

<link...>टेम्पलेट में उपयोग करना पूरी तरह से ठीक है । लेकिन हर ढांचे / सीएमएस का अपना कार्यान्वयन तरीका है। जुमला कोई अपवाद नहीं है। यह स्क्रिप्ट और स्टाइलशीट को प्रस्तुत करने का एक जूमला तरीका है। जहाँ तक टेम्पलेट को ओवरराइड करने का कोई तरीका नहीं है, हम अभी भी पुराने <link...>मार्कअप पर भरोसा कर सकते हैं ।

— साहिल पुरव

0

स्टाइलशीट और javascripts लोड करने के लिए "addXxxxx" विधियों का उपयोग करने के लिए कुछ अतिरिक्त लाभ हैं।

ऐसे एक्सटेंशन हैं जिन्हें आप इंस्टॉल कर सकते हैं जो उन फाइलों को एक साथ रख देंगे और उन्हें एक सिंगल फाइल में बदल देंगे, इस प्रकार पेज स्पीड (http रिक्वेस्ट और फाइल साइज को कम करके) में सुधार होगा।

साथ ही, आप आवश्यक फ़ाइलों को लोड करने के लिए टेम्पलेट और लेआउट ओवरराइड में उनका उपयोग कर सकते हैं। उदाहरण के लिए, यदि आपके कुछ कंटेंट आइटम्स के लिए एक विशिष्ट जावास्क्रिप्ट लाइब्रेरी (जैसे तस्वीरों की मेसनरी-स्टाइल डिस्पैल्स करने के लिए एक लाइब्रेरी) की आवश्यकता होती है, तो आप उन प्रकार के लेखों के लिए एक विशिष्ट लेआउट बना सकते हैं जो उस लाइब्रेरी को लोड करने के लिए उस तंत्र का उपयोग करेंगे। और उन प्रकार के डिस्प्ले के लिए विशिष्ट स्टाइल शीट। इसका मतलब यह है कि अतिरिक्त वजन केवल उन पृष्ठों में जुड़ जाता है जिन्हें इसकी आवश्यकता होती है, लेकिन फिर भी संस्करण की जानकारी एक ही स्थान पर रहती है, इसलिए एक संपादन कई पृष्ठों को बदल देगा, बजाय कई परिवर्तन करने के जब चीजें बदल जाती हैं (और हम सभी जानते हैं कि वे बदल जाएगा )।

व्यक्तिगत रूप से, मैं उन लाभों पर विचार करता हूं, साथ ही आवश्यकता होने पर उन फ़ाइलों को अलग-अलग प्रतियों के साथ ओवरराइड करने की क्षमता, यह सुनिश्चित करने के लिए पर्याप्त होगा कि उन्हें जोड़ने का मेरा पसंदीदा तरीका है।

— Arlen
स्रोत

-1

यदि आप <link >अपने जूमला का उपयोग करते हैं, तो यह सुव्यवस्थित नहीं होगा क्योंकि <link >जावास्क्रिप्ट ब्लॉक के तहत दिखाएगा, बाहर <jdoc:include type="head" />और जूमला फिर से फ़ोल्डर सीएसएस में वापस आ जाएगा। यह प्रभावित करेगा जूमला के प्रदर्शन को माना जाता है। और यदि आप उपयोग करते <link >हैं, तो आपको सादा सूचकांक में कई चर प्रतिध्वनि मिलेंगी।

मैं उपयोग करता हूं $doc->addStyleSheetक्योंकि .cssसीएसएस ब्लॉक पर, अंदर दिखाया जाएगा <jdoc:include type="head" />। जावास्क्रिप्ट उपयोग के लिए भी यही है $doc->addScript। <jdoc:include type="head" />जूमला के बाद सभी समाप्त हो जाएगा और अधिक महत्वपूर्ण काम करेंगे। :)

कुछ लोग <link >जैसे कि असमर्थित ब्राउज़र का उपयोग करते हैं

<!--[if IE 8]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie8only.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 9]>
    <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->

यह नीचे की तरफ दिखाया जाएगा <jdoc:include type="head" />।

— एवलिन रैडिटा
स्रोत

यह वास्तव में उस प्रश्न का उत्तर नहीं देता है जो पूछा गया है। यदि आपको लगता है कि आपके द्वारा प्रदान किया गया कोड सबसे अच्छा तरीका है, तो क्यों समझाएं।

— लोडर

आप कहते हैं कि <link>टैग के बाद दिखाई देगा <jdoc:include type="head" />, लेकिन यह केवल तभी होता है जब आप इसके बाद कोड जोड़ते हैं। यदि आप इसे पहले जोड़ते हैं, तो यह पहले दिखाई देगा। Index.php में PHP वेरिएबल की गूंज के संबंध में, मुझे नहीं पता कि आपके कहने का क्या मतलब है। <link>टैग का उपयोग करना मूल HTML है और जूमला इस काम के तरीके को नहीं बदलता है

— लॉडर

और आप इससे पहले जोड़ देंगे <jdoc: type = "head" /> शामिल हैं? @ लॉडर

— एवलिन