Perché usare addStyleSheet o JHtml :: stylesheet semplicemente collegando un file CSS?

9

Secondo la pagina wiki Aggiungendo Javascript e CSS alla pagina , puoi aggiungere un foglio di stile con addStyleSheetquesto:

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

O con JHtml::stylesheetquesto:

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

Ma la pagina wiki Creazione di un modello di base indica allo studente di includere fogli di stile come questo:

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

Questo bypassa addStyleSheete JHtml::stylesheet. E 'questa una buona idea? Quando useresti il ​​primo e quando useresti il ​​secondo?

Nota: JHtml::_("script", …) e JHtml::_("stylesheet", …)sono quasi esattamente gli stessi di JHtml::scripte JHtml::stylesheet. Vedere cosa significa JHtml::_fare .

jhtml  jfactory 
— Flimm
fonte
Domanda correlata su Javascript: joomla.stackexchange.com/q/325/5239
— Flimm,

Risposte:

7

JHtmlviene normalmente utilizzato nelle estensioni in quanto significa che è possibile eseguire le sostituzioni, che è davvero una buona funzionalità se sei uno sviluppatore. Si estende anche $document->...aggiungendo alcune funzionalità aggiuntive.

Ecco un esempio:

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

Quando si utilizza JHtml, la minified versione dello script verrà caricato per ridurre i tempi di caricamento della pagina. Quando si attiva la modalità di debug nella configurazione globale, caricherà la unminified versione del file per renderlo leggibile.

Non è possibile sovrascrivere un modello nello stesso modo in cui è possibile utilizzare le estensioni, quindi molti modelli lo utilizzano <link>perché qualsiasi sostituzione può essere eseguita semplicemente aggiungendo un custom.cssfile, quindi aggiungendo il proprio codice. Pertanto, l'utilizzo dei <link>tag nativi è più rapido rispetto all'utilizzo dell'API Joomla per caricare il file CSS

— Lodder
fonte
Quindi l'unico vantaggio dell'utilizzo JHtmldi un modello è ottenere la minificazione?
— Flimm,
@Flimm - Dai un'occhiata qui, dove spiegherà un po 'più in dettaglio: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
— Lodder
Questo è il link nella mia domanda :) Volevo solo un chiarimento perché mi sembrava strano che tu abbia mai scritto il <link ...>codice directyl.
— Flimm,
1
In un modello, è perfettamente corretto farlo poiché non è possibile sovrascrivere un modello reale nel modo in cui è possibile un'estensione, quindi l'importazione di un asset può essere eseguita senza l'API di Joomla;)
— Lodder
1
@Flimm JHtml funziona anche con file MD5SUM, $ document-> addStyleSheet no. magazine.joomla.org/issues/issue-nov-2014/item/…
— COBIZ webdevelopment
6

Oltre agli altri, il più grande vantaggio che ho riscontrato è che tutti i file CSS / JSS sono nello stesso array in una sola volta.

Questo potrebbe non sembrare un vantaggio, ma uno snippet di un altro esempio 

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

Più tardi, quando vuoi cambiare system.css, apporterai le modifiche e ti renderai conto che i tuoi utenti hanno il vecchio system.cssnella loro cache con il tuo nuovo contenuto, il che significa che dovrai cambiare il codice in un URL leggermente diverso (o ridurre il tempo della cache e fare in modo che l'utente scarichi più spesso)

Quando si utilizza il metodo JHTML quando viene generato il modello, è quindi possibile generare una "versione" del file CSS / JS (filemtime è buono da usare o git commit ID ecc.), Quindi la modifica del contenuto dà immediatamente il nuovo css a tutte le persone per visualizzare il tuo sito. Tempi di cache lunghi + rigenerazione istantanea significano meno download per pagina.

Esempio di codice (NON TESTATO FUNZIONANTE, sebbene io utilizzi un codice simile)

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

Questo codice dovrà essere ottimizzato affinché il tuo sistema sia trovato correttamente

— exussum
fonte
5

Joomla fornisce la propria API dalla loro Factory che possiamo chiamare come JFactory.

Non vi è alcun danno nell'utilizzo di:

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

al di sopra di:

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

Tuttavia, se stai includendo i tuoi fogli di stile con il metodo sopra, verranno automaticamente inclusi nella <head>sezione del tuo modello <jdoc:include type="head" />. Andando oltre, se stiamo sviluppando la nostra estensione e se desideri esplicitamente avere il tuo CSS o Javascript, puoi dichiararlo con il metodo sopra. Lo aggiungerà di nuovo nella <head>sezione e ti eviterà di aggiornare il tuo modelloindex.php

A volte vuoi che i tuoi script vengano visualizzati alla fine del tuo corpo per caricare tutti gli elementi DOM. In questa situazione potresti voler includere i tuoi script alla fine del tuo <body>elemento con quanto segue:

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

Otterrai anche un controllo aggiuntivo per la gestione di CSS e script, ad esempio puoi annullare l'impostazione di script e fogli di stile a livello di codice se non necessario.

— Sahil Purav
fonte
Capisco che JFactoryinserisca il foglio di stile <jdoc:include type="head" />, le mie domande sono: perché preoccuparsi di usarlo in un modello quando puoi semplicemente scrivere la <link ...>linea da solo?
— Flimm,
Va benissimo da usare <link...>nel modello. Ma ogni framework / CMS ha il suo modo di implementazione. Joomla non fa eccezione. È un modo Joomla per il rendering di script e fogli di stile. Per quanto non ci sia modo di sovrascrivere il modello, possiamo ancora fare affidamento sul vecchio <link...>markup.
— Sahil Purav,
0

Ci sono un paio di vantaggi aggiuntivi nell'uso dei metodi "addXxxxx" per il caricamento di fogli di stile e javascript.

Ci sono estensioni che puoi installare che uniranno quei file e li comprimeranno in un singolo file, migliorando così la velocità della pagina (riducendo le richieste http e le dimensioni dei file).

Inoltre, è possibile utilizzarli nelle sostituzioni di modelli e layout per garantire il caricamento dei file richiesti. Ad esempio, se alcuni dei tuoi elementi di contenuto richiedono una specifica libreria javascript (come una libreria per fare dispalys di fotografie in stile masonario) puoi creare un layout specifico per quei tipi di articoli che useranno quel meccanismo per caricare la libreria js e fogli di stile specifici per questi tipi di display. Ciò significa che il peso aggiuntivo viene aggiunto solo alle pagine che ne hanno bisogno, ma mantiene comunque le informazioni sulla versione in un posto, quindi una modifica cambierà la visualizzazione di più pagine, anziché dover apportare più modifiche quando le cose cambiano (e sappiamo tutti che si cambia).

Personalmente, considero tali vantaggi, oltre alla possibilità di sovrascrivere quei file con copie diverse quando necessario, per essere il mio modo preferito di aggiungerli.

— Arlen
fonte
-1

se usi la <link >tua testa di joomla non sarà ordinata perché <link >verrà mostrata sotto il blocco javascript, outsite <jdoc:include type="head" />e joomla torneranno di nuovo alla cartella css. Ciò influirà sulle prestazioni di Joomla. E se usi <link >otterrai molti echi variabili in plain index.php :(

Uso $doc->addStyleSheetperché .cssverrà mostrato sul blocco CSS, all'interno <jdoc:include type="head" />. lo stesso per l'uso di JavaScript $doc->addScript. Dopo <jdoc:include type="head" />Joomla assumerà tutto finito e farà un lavoro più importante. :)

Alcune persone usano <link >per browser non supportati come ad es

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

sarà mostrato in fondo a <jdoc:include type="head" />.

— Evelyn Raditya
fonte
Questo in realtà non risponde alla domanda che è stata posta. Se ritieni che il codice che hai fornito sia il metodo migliore, spiega perché.
— Lodder,
Dici che il <link>tag apparirà dopo <jdoc:include type="head" />, ma questo succede solo se aggiungi il codice dopo di esso. Se lo aggiungi prima, verrà visualizzato prima. Per quanto riguarda l'eco delle variabili PHP in index.php, non ho idea di cosa intendi quando dici questo. L'uso dei <link>tag è HTML di base e Joomla non cambia il modo in cui funziona
— Lodder
e aggiungerai prima di <jdoc: include type = "head" />? @Lodder
— Evelyn Raditya,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.