Por que usar addStyleSheet ou JHtml :: stylesheet apenas vinculando um arquivo CSS?

9

De acordo com a página da wiki Adicionando Javascript e CSS à página , você pode adicionar uma folha de estilo addStyleSheetcomo esta:

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

Ou com JHtml::stylesheetassim:

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

Mas a página wiki Criando um modelo básico instrui o aluno a incluir folhas de estilo como esta:

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

Isso ignora addStyleSheete JHtml::stylesheet. isso é uma boa ideia? Quando você usaria o primeiro e quando você usaria o último?

Nota: JHtml::_("script", …) e JHtml::_("stylesheet", …)são quase exatamente iguais a JHtml::scripte JHtml::stylesheet. Consulte O que JHtml::_fazer .

jhtml jfactory Flimm
fonte
Pergunta relacionada ao Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Respostas:

7

JHtmlé normalmente usado em extensões, pois significa que substituições podem ser executadas, o que é um recurso muito bom se você é um desenvolvedor. Também se estende $document->...adicionando algumas funcionalidades adicionais.

Aqui está um exemplo:

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

Ao usar JHtml, a versão reduzida do script será carregada para reduzir o tempo de carregamento da página. Quando você ativa o modo de depuração na Configuração Global, ele carrega a versão não minificada do arquivo para torná-lo legível.

Você não pode substituir um modelo da mesma maneira que para extensões; portanto, muitos modelos usam <link>porque qualquer substituição pode ser feita simplesmente adicionando um custom.cssarquivo e adicionando seu código nele. Assim, o uso das <link>tags nativas é mais rápido do que a API do Joomla para carregar o arquivo CSS

Lodder
fonte
Portanto, a única vantagem de usar JHtmlpara um modelo é obter minificação?
Flimm
@Flimm - Dê uma olhada aqui, onde ele irá explicar um pouco mais em detalhe: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
Esse é o link na minha pergunta :) Eu só queria esclarecimentos, porque parecia estranho que você escrevesse o <link ...>código directyl.
Flimm
11
Em um modelo, é perfeitamente possível fazer isso como você não pode substituir um modelo real da maneira que puder uma extensão, portanto, a importação de um ativo pode ser feito sem a API Joomla;)
Lodder
11
O @Flimm JHtml também funciona com arquivos MD5SUM, $ document-> addStyleSheet não. magazine.joomla.org/issues/issue-nov-2014/item/…
COBIZ webdevelopment
6

Além dos outros, o maior benefício que encontrei é que todos os arquivos CSS / JSS estão na mesma matriz ao mesmo tempo.

Isso pode não parecer um benefício, mas um trecho de outro exemplo 

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

Mais tarde, quando você desejar alterar system.css, você fará alterações e perceberá que os usuários têm o antigo system.cssno cache com seu novo conteúdo, o que significa que você precisará alterar o código para ser um URL ligeiramente diferente (ou reduzir o tempo de cache e faça o usuário baixar com mais frequência)

Quando você usa o método JHTML quando o modelo é gerado, é possível gerar uma "versão" do arquivo CSS / JS (o tempo do arquivo é bom para usar ou o ID de confirmação do git etc.). Assim, alterar o conteúdo instantaneamente fornece o novo css para todas as pessoas para visualizar seu site. Tempos de cache longos + geração instantânea significam menos downloads por página.

Exemplo de código (NÃO TESTADO TRABALHANDO, embora eu use código semelhante)

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

Esse código precisará de ajustes para o seu sistema para garantir que os caminhos sejam encontrados corretamente

exussum
fonte
5

O Joomla fornece sua própria API de sua fábrica, que podemos chamar de JFactory.

Não há mal nenhum em usar:

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

sobre:

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

No entanto, se você estiver incluindo suas folhas de estilo com o método acima, ele será incluído <head>automaticamente na seção do seu modelo <jdoc:include type="head" />. Indo além, se estamos desenvolvendo nossa própria extensão e se você deseja explicitamente ter seu próprio CSS ou Javascript, pode declará-lo com o método acima. Ele será adicionado novamente em sua <head>seção e evitará que você atualize oindex.php

Às vezes, você deseja que seus scripts apareçam no final do seu corpo para carregar todos os elementos DOM. Nessa situação, convém incluir seus scripts no final do seu <body>elemento com o seguinte:

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

Você também terá controle adicional para lidar com CSS e scripts, por exemplo, pode desabilitar scripts e folhas de estilo programaticamente, se não for necessário.

Sahil Purav
fonte
Entendo que JFactorycoloca a folha de estilo <jdoc:include type="head" />, minhas perguntas são por que se preocupar em usá-la em um modelo quando você pode escrever a <link ...>linha sozinho?
Flimm
É perfeitamente bom usar <link...>no modelo. Mas toda estrutura / CMS tem sua própria maneira de implementação. Joomla não é excepção. É uma maneira do Joomla de renderizar scripts e folhas de estilo. Na medida em que não há como substituir o modelo, ainda podemos confiar na <link...>marcação antiga .
Sahil Purav
0

Existem alguns benefícios adicionais ao usar os métodos "addXxxxx" para carregar folhas de estilo e javascripts.

Existem extensões que você pode instalar para juntar esses arquivos e compactá-los em um único arquivo, melhorando a velocidade da página (reduzindo as solicitações de http e o tamanho dos arquivos).

Além disso, você pode usá-los em substituições de modelo e layout para garantir que os arquivos necessários sejam carregados. Por exemplo, se alguns de seus itens de conteúdo exigirem uma biblioteca javascript específica (como uma biblioteca para exibição de fotografias no estilo Masonary), você poderá criar um layout específico para os tipos de artigos que usarão esse mecanismo para carregar a biblioteca js e folhas de estilo específicas para esse tipo de exibição. Isso significa que um peso extra é adicionado apenas às páginas que precisam, mas ainda mantém as informações da versão em um só lugar, para que uma edição altere várias exibições de página, em vez de precisar fazer várias alterações quando as coisas mudarem (e todos sabemos que eles vai mudar).

Pessoalmente, considero essas vantagens, além da capacidade de substituir esses arquivos por cópias diferentes, quando necessário, como suficientes para tornar essa a minha maneira preferida de adicioná-los.

Arlen
fonte
-1

se você usar <link >sua cabeça do joomla, não ficará arrumada porque ela <link >será exibida no bloco javascript, outsite <jdoc:include type="head" />e o joomla retornará à pasta css novamente. Isso afetará o desempenho do joomla. E se você usar <link >, obterá muitos ecos variáveis ​​em index.php simples :(

Eu uso $doc->addStyleSheetporque o .cssserá mostrado no bloco css, por dentro <jdoc:include type="head" />. o mesmo para uso de javascript $doc->addScript. Após o <jdoc:include type="head" />joomla assumirá tudo terminado e fará um trabalho mais importante. :)

Algumas pessoas usam <link >para navegadores não compatíveis como, por exemplo,

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

será exibido na parte inferior de <jdoc:include type="head" />.

Evelyn Raditya
fonte
Na verdade, isso não responde à pergunta que foi feita. Se você acredita que o código fornecido é o melhor método, explique o motivo.
Lodder
Você diz que a <link>tag aparecerá depois <jdoc:include type="head" />, mas isso só acontece se você adicionar o código depois. Se você adicioná-lo antes, ele aparecerá antes. Em relação ao eco de variáveis ​​PHP no index.php, não tenho idéia do que você quer dizer quando diz isso. Usando <link>palavras-chave está HTML básico e não Joomla não mudar a forma como isto funciona
Lodder
e você adicionará antes de <jdoc: include type = "head" />? @Lodder
Evelyn Raditya