¿Por qué usar addStyleSheet o JHtml :: stylesheet sobre solo vincular un archivo CSS?

9

De acuerdo con la página wiki que agrega Javascript y CSS a la página , puede agregar una hoja de estilo addStyleSheetcomo esta:

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

O con JHtml::stylesheetesto:

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

Pero la página wiki Creación de una plantilla básica le indica al alumno que incluya hojas de estilo como esta:

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

Esto pasa por alto addStyleSheety JHtml::stylesheet. ¿Es esta una buena idea? ¿Cuándo usarías lo primero y cuándo usarías lo último?

Nota: JHtml::_("script", …) y JHtml::_("stylesheet", …)son casi exactamente lo mismo que JHtml::scripty JHtml::stylesheet. Vea lo que JHtml::_hace .

jhtml jfactory Flimm
fuente
Pregunta relacionada sobre Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Respuestas:

7

JHtmlnormalmente se usa en extensiones, ya que significa que se pueden realizar anulaciones, que es una característica realmente buena si eres un desarrollador. También se extiende $document->...agregando algunas funcionalidades adicionales.

Aquí hay un ejemplo:

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

Cuando se usa JHtml, la versión reducida del script se cargará para reducir los tiempos de carga de la página. Cuando habilita el modo de depuración en la Configuración global, cargará la versión no minificada del archivo para que sea legible.

No puede anular una plantilla de la misma manera que para las extensiones, por lo que muchas plantillas se usan <link>porque cualquier anulación se puede hacer simplemente agregando un custom.cssarchivo y luego agregando su código. Por lo tanto, usar las <link>etiquetas nativas es más rápido que usar la API de Joomla para cargar el archivo CSS

Lodder
fuente
Entonces, ¿la única ventaja de usar JHtmluna plantilla es obtener minificación?
Flimm
@Flimm - Echa un vistazo aquí, donde explicará un poco más en detalle: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
Ese es el enlace en mi pregunta :) Solo quería una aclaración porque parecía extraño que alguna vez escribieras el <link ...>código directyl.
Flimm
1
En una plantilla, está perfectamente bien hacer esto, ya que no puede anular una plantilla real de la misma manera que una extensión, por lo tanto, la importación de un activo se puede hacer sin la API de Joomla;)
Lodder
1
@Flimm JHtml también funciona con archivos MD5SUM, $ document-> addStyleSheet no. magazine.joomla.org/issues/issue-nov-2014/item/…
desarrollo web de COBIZ
6

Además de los demás, el mayor beneficio que he encontrado es que todos los archivos CSS / JSS están en la misma matriz a la vez.

Esto puede no parecer un beneficio, sino un fragmento de otro ejemplo 

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

Más adelante, cuando desee cambiar system.css, hará cambios y luego se dará cuenta de que sus usuarios tienen lo antiguo system.cssen su caché con su nuevo contenido, lo que significa que tendrá que cambiar el código para que sea una URL ligeramente diferente (o reducir el tiempo de caché y hacer que el usuario descargue más a menudo)

Cuando utiliza el método JHTML cuando se genera la plantilla, puede generar una "versión" del archivo CSS / JS (filemtime es bueno para usar, o git commit ID, etc.), por lo que cambiar el contenido al instante le da al nuevo CSS Todas las personas para ver su sitio. Largos tiempos de caché + regeneración instantánea significa menos descargas por página.

Ejemplo de código (NO FUNCIONA PROBADO, aunque uso un código similar)

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

Este código necesitará ajustes para su sistema para asegurarse de que las rutas se encuentren correctamente

exussum
fuente
5

Joomla proporciona su propia API desde su Fábrica que podemos llamarlo como JFactory.

No hay daño de usar:

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

terminado:

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

Sin embargo, si incluye sus hojas de estilo con el método anterior, se incluirá <head>automáticamente en la sección de su plantilla <jdoc:include type="head" />. Yendo más allá, si estamos desarrollando nuestra propia extensión y si desea explícitamente tener su propio CSS o Javascript, puede declararlo con el método anterior. Lo agregará nuevamente en su <head>sección y evitará que actualice la plantilla deindex.php

A veces desea que sus scripts aparezcan al final de su cuerpo para cargar todos los elementos DOM. En esta situación, es posible que desee incluir sus scripts al final de su <body>elemento con lo siguiente:

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

También obtendrá un control adicional para manejar CSS y scripts, por ejemplo, puede desarmar scripts y hojas de estilo mediante programación si no es necesario.

Sahil Purav
fuente
Entiendo que JFactorypone la hoja de estilo <jdoc:include type="head" />, mis preguntas son ¿por qué molestarse en usarla en una plantilla cuando puede escribir la <link ...>línea usted mismo?
Flimm
Está perfectamente bien para usar <link...>en la plantilla. Pero cada framework / CMS tiene su propia forma de implementación. Joomla no es una excepción. Es una forma de Joomla de representar scripts y hojas de estilo. Siempre que no haya forma de anular la plantilla, aún podemos confiar en el <link...>marcado anterior.
Sahil Purav
0

Hay un par de beneficios adicionales para usar los métodos "addXxxxx" para cargar hojas de estilo y javascripts.

Hay extensiones que puede instalar que juntarán esos archivos y los comprimirán en un solo archivo, mejorando así la velocidad de la página (al reducir las solicitudes http y los tamaños de los archivos).

Además, puede usarlos en anulaciones de plantilla y diseño para garantizar que se carguen los archivos necesarios. Por ejemplo, si algunos de sus elementos de contenido requieren una biblioteca de JavaScript específica (como una biblioteca para hacer muestras de fotografías al estilo Masonary), puede crear un diseño específico para ese tipo de artículos que utilizarán ese mecanismo para cargar la biblioteca js y hojas de estilo específicas para ese tipo de pantallas. Esto significa que solo se agrega peso adicional a las páginas que lo necesitan, pero aún mantiene la información de la versión en un solo lugar, por lo que una edición cambiará la visualización de varias páginas, en lugar de tener que hacer múltiples cambios cuando las cosas cambian (y todos sabemos que va a cambiar)

Personalmente, considero que esas ventajas, además de la capacidad de anular esos archivos con diferentes copias cuando sea necesario, son suficientes para que esa sea mi forma preferida de agregarlos.

Arlen
fuente
-1

si usa <link >su cabeza de joomla no estará ordenada porque <link >se mostrará debajo del bloque javascript, outsite <jdoc:include type="head" />y joomla volverá a la carpeta css nuevamente. Esto afectará el rendimiento de Joomla. Y si lo usa <link >, obtendrá muchas variables de eco en index.php simple :(

Lo uso $doc->addStyleSheetporque .cssse mostrará en el bloque css, dentro <jdoc:include type="head" />. eso mismo para el uso de javascript $doc->addScript. Después de que <jdoc:include type="head" />Joomla asumirá todo terminado y hará un trabajo más importante. :)

Algunas personas usan <link >navegadores no compatibles como, por ejemplo,

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

se mostrará en la parte inferior de <jdoc:include type="head" />.

Evelyn Raditya
fuente
Esto en realidad no responde la pregunta que se ha hecho. Si cree que el código que ha proporcionado es el mejor método, explique por qué.
Lodder
Dice que la <link>etiqueta aparecerá después <jdoc:include type="head" />, pero esto solo sucede si agrega el código después. Si lo agrega antes, aparecerá antes. En lo que respecta a hacer eco de las variables PHP en el index.php, no tengo idea de lo que quieres decir cuando dices esto. El uso de <link>etiquetas es HTML básico y Joomla no cambia la forma en que esto funciona
Lodder
y agregará antes de <jdoc: include type = "head" />? @Lodder
Evelyn Raditya