Warum sollten Sie addStyleSheet oder JHtml :: stylesheet verwenden, um nur eine CSS-Datei zu verknüpfen?

9

Entsprechend der Wiki-Seite Hinzufügen von Javascript und CSS zur Seite können Sie ein Stylesheet addStyleSheetwie folgt hinzufügen :

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

Oder mit JHtml::stylesheetso:

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

Auf der Wiki-Seite Erstellen einer Basisvorlage wird der Lernende jedoch angewiesen, Stylesheets wie folgt einzuschließen:

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

Dies umgeht addStyleSheetund JHtml::stylesheet. Ist das eine gute Idee? Wann würden Sie das erstere verwenden und wann würden Sie das letztere verwenden?

Hinweis: JHtml::_("script", …) und JHtml::_("stylesheet", …)sind fast genau das gleiche wie JHtml::scriptund JHtml::stylesheet. Siehe Was ist zu JHtml::_tun .

jhtml jfactory Flimm
quelle
Verwandte Fragen zu Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Antworten:

7

JHtmlwird normalerweise in Erweiterungen verwendet, da dadurch Überschreibungen durchgeführt werden können. Dies ist eine wirklich gute Funktion, wenn Sie Entwickler sind. Es wird auch $document->...um einige zusätzliche Funktionen erweitert.

Hier ist ein Beispiel:

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

Bei Verwendung JHtmlwird die minimierte Version des Skripts geladen, um die Ladezeiten der Seiten zu verkürzen. Wenn Sie den Debug-Modus in der globalen Konfiguration aktivieren, wird die nicht minimierte Version der Datei geladen , um sie lesbar zu machen.

Sie können eine Vorlage nicht auf die gleiche Weise überschreiben wie für Erweiterungen. Daher werden viele Vorlagen verwendet, <link>da alle Überschreibungen einfach durch Hinzufügen einer custom.cssDatei und anschließendes Hinzufügen Ihres Codes erfolgen können. Die Verwendung der nativen <link>Tags ist daher schneller als die Verwendung der Joomla-API zum Laden der CSS-Datei

Lodder
quelle
Der einzige Vorteil der Verwendung JHtmlfür eine Vorlage besteht darin, eine Minimierung zu erhalten.
Flimm
@Flimm - Schauen Sie hier, wo es etwas ausführlicher erklärt: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
Das ist der Link in meiner Frage :) Ich wollte nur eine Klarstellung, weil es seltsam schien, dass Sie jemals den <link ...>Code directyl schreiben würden.
Flimm
1
In einer Vorlage ist dies vollkommen in Ordnung, da Sie eine tatsächliche Vorlage nicht wie eine Erweiterung überschreiben können. Daher kann der Import eines Assets ohne die Joomla-API erfolgen;)
Lodder
1
@Flimm JHtml funktioniert auch mit MD5SUM-Dateien, $ document-> addStyleSheet nicht. magazine.joomla.org/issues/issue-nov-2014/item/…
COBIZ Webentwicklung
6

Neben den anderen ist der größte Vorteil, den ich gefunden habe, dass sich alle CSS / JSS-Dateien gleichzeitig im selben Array befinden.

Dies klingt möglicherweise nicht nach einem Vorteil, sondern nach einem Ausschnitt aus einem anderen Beispiel 

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

Wenn Sie später Änderungen system.cssvornehmen möchten , nehmen Sie Änderungen vor und stellen dann fest, dass Ihre Benutzer den alten system.cssmit Ihrem neuen Inhalt im Cache haben. Dies bedeutet, dass Sie den Code ändern müssen, um eine etwas andere URL zu erhalten (oder Ihre Cache-Zeit und zu reduzieren den Benutzer öfter herunterladen lassen)

Wenn Sie die JHTML-Methode verwenden, wenn die Vorlage generiert wird, können Sie eine "Version" der CSS / JS-Datei generieren (Dateizeit ist gut zu verwenden oder Git-Commit-ID usw.), sodass das Ändern des Inhalts sofort das neue CSS ergibt Alle Personen, die Ihre Website anzeigen möchten. Lange Cache-Zeiten + sofortige Neuerstellung bedeuten weniger Downloads pro Seite.

Codebeispiel (NICHT TESTED WORKING, obwohl ich ähnlichen Code verwende)

$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());
    }
  }
}

Dieser Code muss für Ihr System angepasst werden, um sicherzustellen, dass die Pfade korrekt gefunden werden

Exussum
quelle
5

Joomla stellt eine eigene API aus der Factory zur Verfügung, die wir als JFactory bezeichnen können.

Es schadet nicht, Folgendes zu verwenden:

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

Über:

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

Wenn Sie jedoch Ihre Stylesheets mit der obigen Methode einschließen, wird sie <head>automatisch mit in den Abschnitt Ihrer Vorlage aufgenommen <jdoc:include type="head" />. Wenn wir eine eigene Erweiterung entwickeln und Sie ausdrücklich Ihr eigenes CSS oder Javascript haben möchten, können Sie dies mit der oben beschriebenen Methode deklarieren. Es wird erneut in Ihren <head>Abschnitt eingefügt, sodass Sie die Vorlagen nicht aktualisieren müssenindex.php

Manchmal möchten Sie, dass Ihre Skripte am Ende Ihres Körpers angezeigt werden, damit alle DOM-Elemente geladen werden. In dieser Situation möchten Sie möglicherweise Ihre Skripte am Ende Ihres <body>Elements wie folgt einfügen:

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

Sie erhalten außerdem zusätzliche Kontrolle über den Umgang mit CSS und Skripten, z. B. können Sie Skripte und Stylesheets programmgesteuert deaktivieren, wenn sie nicht benötigt werden.

Sahil Purav
quelle
Ich verstehe, dass JFactorydas Stylesheet eingefügt <jdoc:include type="head" />wird. Meine Fragen sind, warum Sie es in einer Vorlage verwenden sollten, wenn Sie die <link ...>Zeile einfach selbst schreiben können.
Flimm
Es ist vollkommen in Ordnung, <link...>in Vorlage zu verwenden. Aber jedes Framework / CMS hat seine eigene Implementierungsmethode. Joomla ist keine Ausnahme. Es ist eine Joomla-Methode zum Rendern von Skripten und Stylesheets. Soweit es keine Möglichkeit gibt, Vorlagen zu überschreiben, können wir uns immer noch auf alte <link...>Markups verlassen.
Sahil Purav
0

Die Verwendung der "addXxxxx" -Methoden zum Laden von Stylesheets und Javascripts bietet einige zusätzliche Vorteile.

Sie können Erweiterungen installieren, mit denen diese Dateien zusammengefügt und zu einer einzigen Datei zusammengefasst werden, wodurch die Seitengeschwindigkeit verbessert wird (indem HTTP-Anforderungen und Dateigrößen reduziert werden).

Sie können sie auch in Vorlagen- und Layoutüberschreibungen verwenden, um sicherzustellen, dass die erforderlichen Dateien geladen werden. Wenn für einige Ihrer Inhaltselemente beispielsweise eine bestimmte Javascript-Bibliothek erforderlich ist (z. B. eine Bibliothek zum Ausführen von Fotos im Masonary-Stil), können Sie ein bestimmtes Layout für die Artikeltypen erstellen, die diesen Mechanismus zum Laden der js-Bibliothek verwenden und Stylesheets, die für diese Art von Displays spezifisch sind. Dies bedeutet, dass nur den Seiten, die es benötigen, zusätzliches Gewicht hinzugefügt wird, die Versionsinformationen jedoch an einem Ort bleiben, sodass durch eine Bearbeitung mehrere Seitenanzeigen geändert werden, anstatt mehrere Änderungen vornehmen zu müssen, wenn sich die Dinge ändern (und wir alle wissen, dass sie sich ändern) wird sich ändern).

Persönlich halte ich diese Vorteile sowie die Möglichkeit, diese Dateien bei Bedarf mit unterschiedlichen Kopien zu überschreiben, für ausreichend, um sie zu meiner bevorzugten Art des Hinzufügens zu machen.

Arlen
quelle
-1

Wenn Sie <link >Ihren Joomla-Kopf verwenden, ist er nicht aufgeräumt, da er <link >unter dem Javascript-Block <jdoc:include type="head" />angezeigt wird. Outsite und Joomla kehren wieder zum Ordner CSS zurück. Dies wirkt sich auf die Leistung von Joomla aus. Und wenn Sie verwenden, erhalten <link >Sie viele variable Echo in plain index.php :(

Ich benutze, $doc->addStyleSheetweil das .cssauf CSS-Block im Inneren angezeigt wird <jdoc:include type="head" />. das gleiche für die Verwendung von Javascript $doc->addScript. Nach <jdoc:include type="head" />Joomla wird alles fertig sein und wichtigere Arbeiten erledigen. :) :)

Einige Leute verwenden <link >für nicht unterstützte Browser wie z

<!--[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]-->

es wird am unteren Rand von angezeigt <jdoc:include type="head" />.

Evelyn Raditya
quelle
Dies beantwortet die gestellte Frage nicht wirklich. Wenn Sie der Meinung sind, dass der von Ihnen bereitgestellte Code die beste Methode ist, erklären Sie, warum.
Lodder
Sie sagen, dass das <link>Tag danach angezeigt wird <jdoc:include type="head" />, dies geschieht jedoch nur, wenn Sie den Code danach hinzufügen. Wenn Sie es vorher hinzufügen, wird es vorher angezeigt. In Bezug auf das Echo von PHP-Variablen in der index.php habe ich keine Ahnung, was Sie meinen, wenn Sie dies sagen. Die Verwendung von <link>Tags ist grundlegendes HTML und Joomla ändert nichts an der Funktionsweise
Lodder
und Sie werden vor <jdoc: include type = "head" /> hinzufügen? @ Lodge
Evelyn Raditya