Pourquoi utiliser addStyleSheet ou JHtml :: stylesheet plutôt que de simplement lier un fichier CSS?

9

Selon la page wiki Ajout de Javascript et CSS à la page , vous pouvez ajouter une feuille de style avec addStyleSheetceci:

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

Ou avec JHtml::stylesheetcomme ça:

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

Mais la page wiki Création d'un modèle de base demande à l'apprenant d'inclure des feuilles de style comme ceci:

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

Cela contourne addStyleSheetet JHtml::stylesheet. Est-ce une bonne idée? Quand utiliseriez-vous le premier et quand utiliseriez-vous le second?

Remarque: JHtml::_("script", …) et JHtml::_("stylesheet", …)sont presque exactement les mêmes que JHtml::scriptet JHtml::stylesheet. Voir ce qui JHtml::_fait .

jhtml jfactory Flimm
la source
Question connexe concernant Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Réponses:

7

JHtmlest normalement utilisé dans les extensions car cela signifie que des remplacements peuvent être effectués, ce qui est une très bonne fonctionnalité si vous êtes développeur. Il s'étend également $document->...en ajoutant des fonctionnalités supplémentaires.

Voici un exemple:

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

Lors de l' utilisation JHtml, la minified version du script sera chargé de réduire les temps de chargement page. Lorsque vous activez le mode débogage dans la configuration globale, il charge la version non réduite du fichier pour la rendre lisible.

Vous ne pouvez pas remplacer un modèle de la même manière que pour les extensions, donc beaucoup de modèles utilisent <link>car tout remplacement peut simplement être effectué en ajoutant un custom.cssfichier, puis en y ajoutant votre code. Ainsi, l'utilisation des <link>balises natives est plus rapide que l'utilisation de l'API Joomla pour charger le fichier CSS

Lodder
la source
Le seul avantage d'utiliser JHtmlun modèle est donc d'obtenir une minification?
Flimm
@Flimm - Jetez un œil ici, où il vous expliquera un peu plus en détail: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
C'est le lien dans ma question :) Je voulais juste des éclaircissements car il semblait étrange que vous <link ...>écriviez jamais le code directement.
Flimm
1
Dans un modèle, c'est très bien de le faire car vous ne pouvez pas remplacer un modèle réel de la même manière qu'une extension, donc l'importation d'un actif peut se faire sans l'API Joomla;)
Lodder
1
@Flimm JHtml fonctionne également avec les fichiers MD5SUM, pas $ document-> addStyleSheet. magazine.joomla.org/issues/issue-nov-2014/item/…
Développement web COBIZ
6

En plus des autres, le plus gros avantage que j'ai trouvé est que tous les fichiers CSS / JSS sont dans le même tableau en une seule fois.

Cela peut ne pas ressembler à un avantage, mais à un extrait d'un autre exemple 

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

Plus tard, lorsque vous souhaitez modifier system.css, vous apporterez des modifications, puis vous réaliserez que vos utilisateurs ont l'ancien system.cssdans leur cache avec votre nouveau contenu, ce qui signifie que vous devrez changer le code pour qu'il soit une URL légèrement différente (ou réduire le temps de cache et faire en sorte que l'utilisateur télécharge plus souvent)

Lorsque vous utilisez la méthode JHTML lors de la génération du modèle, vous pouvez ensuite générer une "version" du fichier CSS / JS (filemtime est une bonne option à utiliser, ou git commit ID, etc.), donc changer le contenu donne instantanément le nouveau css à toutes les personnes pour voir votre site. Temps de cache longs + régénération instantanée signifie moins de téléchargements par page.

Exemple de code (PAS TESTÉ DE TRAVAIL, bien que j'utilise un code similaire)

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

Ce code devra être modifié pour que votre système s'assure que les chemins sont trouvés correctement

exussum
la source
5

Joomla fournit sa propre API à partir de leur usine, nous pouvons l'appeler JFactory.

Il n'y a aucun mal à utiliser:

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

plus de:

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

Cependant, si vous incluez vos feuilles de style avec la méthode ci-dessus, elles seront <head>automatiquement incluses dans la section de votre modèle avec <jdoc:include type="head" />. Pour aller plus loin, si nous développons notre propre extension et si vous souhaitez explicitement avoir votre propre CSS ou Javascript, vous pouvez le déclarer avec la méthode ci-dessus. Il l'ajoutera à nouveau dans votre <head>section et vous évitera de mettre à jour votre modèleindex.php

Parfois, vous voulez que vos scripts apparaissent à la fin de votre corps pour charger tous les éléments DOM. Dans cette situation, vous souhaiterez peut-être inclure vos scripts à la fin de votre <body>élément avec les éléments suivants:

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

Vous obtiendrez également un contrôle supplémentaire pour la gestion des CSS et des scripts, par exemple, vous pouvez désactiver les scripts et les feuilles de style par programme si vous n'en avez pas besoin.

Sahil Purav
la source
Je comprends que cela JFactoryplace la feuille de style <jdoc:include type="head" />, mes questions sont pourquoi se soucier de l'utiliser dans un modèle lorsque vous pouvez simplement écrire la <link ...>ligne vous-même?
Flimm
Il est parfaitement bien d'utiliser <link...>dans le modèle. Mais chaque framework / CMS a sa propre manière d'implémentation. Joomla ne fait pas exception. C'est une façon Joomla de rendre les scripts et les feuilles de style. Dans la mesure où il n'existe aucun moyen de remplacer le modèle, nous pouvons toujours compter sur l'ancien <link...>balisage.
Sahil Purav
0

Il y a quelques avantages supplémentaires à utiliser les méthodes "addXxxxx" pour charger des feuilles de style et des javascripts.

Il existe des extensions que vous pouvez installer qui rassembleront ces fichiers et les compresseront en un seul fichier, améliorant ainsi la vitesse de la page (en réduisant les requêtes http et la taille des fichiers).

En outre, vous pouvez les utiliser dans les remplacements de modèle et de mise en page pour garantir le chargement des fichiers requis. Par exemple, si quelques-uns de vos éléments de contenu nécessitent une bibliothèque javascript spécifique (comme une bibliothèque pour faire une analyse de photos de style maçonnique), vous pouvez créer une mise en page spécifique pour les types d'articles qui utiliseront ce mécanisme pour charger la bibliothèque js et des feuilles de style spécifiques à ces types d'affichages. Cela signifie qu'un poids supplémentaire n'est ajouté qu'aux pages qui en ont besoin, mais conserve toujours les informations de version en un seul endroit, donc une modification modifiera plusieurs affichages de page, plutôt que d'avoir à apporter plusieurs modifications lorsque les choses changent (et nous savons tous qu'elles va changer).

Personnellement, je considère que ces avantages, ainsi que la possibilité de remplacer ces fichiers avec des copies différentes lorsque cela est nécessaire, sont suffisants pour en faire ma façon préférée de les ajouter.

Arlen
la source
-1

si vous utilisez <link >votre tête joomla ne sera pas bien rangé car le <link >sera affiché sous le bloc javascript, outsite <jdoc:include type="head" />et joomla reviendront à nouveau dans le dossier css. Cela affectera les performances de joomla. Et si vous utilisez, <link >vous obtiendrez de nombreux échos variables dans plain index.php :(

J'utilise $doc->addStyleSheetparce que le .csssera affiché sur le bloc css, à l'intérieur <jdoc:include type="head" />. de même pour une utilisation javascript $doc->addScript. Après <jdoc:include type="head" />joomla assumera tout fini et fera un travail plus important. :)

Certaines personnes utilisent <link >un navigateur non compatible comme par exemple

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

il sera affiché en bas de <jdoc:include type="head" />.

Evelyn Raditya
la source
Cela ne répond pas réellement à la question qui a été posée. Si vous pensez que le code que vous avez fourni est la meilleure méthode, expliquez pourquoi.
Lodder
Vous dites que la <link>balise apparaîtra après <jdoc:include type="head" />, mais cela ne se produit que si vous ajoutez le code après. Si vous l'ajoutez avant, il apparaîtra avant. En ce qui concerne l'écho des variables PHP dans l'index.php, je n'ai aucune idée de ce que vous voulez dire lorsque vous dites cela. L'utilisation de <link>balises est du HTML de base et Joomla ne change pas la façon dont cela fonctionne
Lodder
et vous ajouterez avant <jdoc: include type = "head" />? @Lodder
Evelyn Raditya