Зачем использовать addStyleSheet или JHtml :: stylesheet вместо простого связывания файла CSS?

9

Согласно вики-странице Добавление Javascript и CSS на страницу , вы можете добавить таблицу стилей addStyleSheetследующим образом:

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

Или JHtml::stylesheetвот так:

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

Но на вики-странице « Создание базового шаблона» учащемуся нужно включить такие таблицы стилей:

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

Это обходит addStyleSheetи JHtml::stylesheet. Это хорошая идея? Когда бы вы использовали первое и когда вы бы использовали второе?

Примечание: JHtml::_("script", …) и JHtml::_("stylesheet", …)почти такие же, как JHtml::scriptи JHtml::stylesheet. См Что JHtml::_делать .

jhtml jfactory

— Флимм
источник

Связанный вопрос, спрашивающий о Javascript: joomla.stackexchange.com/q/325/5239

— Flimm

7

JHtmlобычно используется в расширениях, так как это означает, что можно выполнять переопределения, что является действительно хорошей функцией, если вы разработчик. Это также расширяется $document->..., добавляя некоторые дополнительные функции.

Вот пример:

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

При использовании JHtml, то уменьшенная версия сценария будет загружена , чтобы уменьшить время загрузки страницы. Когда вы включаете режим отладки в глобальной конфигурации, он загружает незавершенную версию файла, чтобы сделать его читаемым.

Вы не можете переопределить шаблон так же, как и для расширений, поэтому многие шаблоны используют, <link>потому что любые переопределения можно просто сделать, добавив custom.cssфайл, а затем добавив в него свой код. Таким образом, использование нативных <link>тегов быстрее, чем использование Joomla API для загрузки файла CSS.

— Лоддер
источник

Таким образом, единственным преимуществом использования JHtmlшаблона является получение минификации?

— Flimm

@Flimm - Посмотрите сюда, где он будет объяснить немного подробнее: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

— Лоддер

Это ссылка в моем вопросе :) Я просто хотел уточнить, потому что казалось странным, что вы когда-нибудь напишете <link ...>код directyl.

— Flimm

1

В шаблоне это прекрасно, так как вы не можете переопределить реальный шаблон, как расширение, поэтому импорт ресурса может быть выполнен без API Joomla;)

— Lodder

1

@Flimm JHtml также работает с файлами MD5SUM, $ document-> addStyleSheet - нет. magazine.joomla.org/issues/issue-nov-2014/item/…

— Веб-разработка COBIZ

6

В дополнение к другим, самое большое преимущество, которое я обнаружил, это то, что все файлы CSS / JSS находятся в одном массиве за один раз.

Это может звучать не как выгода, но фрагмент из другого примера

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

Позже, когда вы захотите измениться system.css, вы внесете изменения, а затем поймете, что у ваших пользователей есть старое system.cssв их кеше с вашим новым контентом, то есть вам придется изменить код, чтобы он стал немного другим URL (или сократить время кеширования и заставить пользователя скачивать чаще)

Когда вы используете метод JHTML при создании шаблона, вы можете сгенерировать «версию» файла CSS / JS (filemtime - хороший вариант для использования, или git commit ID и т. Д.), Поэтому изменение содержимого мгновенно дает новый css для все люди для просмотра вашего сайта. Длительное время кэширования + мгновенное повторное создание означает меньше загрузок на страницу.

Пример кода (НЕ ИСПЫТАНО РАБОТАЕТ, хотя я использую подобный код)

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

Этот код необходимо настроить для вашей системы, чтобы убедиться, что пути найдены правильно

— exussum
источник

5

Joomla предоставляет собственный API от их Фабрики, который мы можем назвать его JFactory.

Нет вреда от использования:

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

над:

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

Однако, если вы включаете ваши таблицы стилей с помощью вышеуказанного метода, он будет автоматически включен в <head>раздел вашего шаблона <jdoc:include type="head" />. Далее, если мы разрабатываем наше собственное расширение и если вы явно хотите иметь свой собственный CSS или Javascript, вы можете объявить его с помощью вышеуказанного метода. Он снова добавит его в ваш <head>раздел и позволит вам не обновлять шаблонindex.php

Иногда вы хотите, чтобы ваши скрипты появлялись в конце вашего тела, чтобы загрузить все элементы DOM. В этой ситуации вы можете включить свои скрипты в конец вашего <body>элемента следующим образом:

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

Вы также получите дополнительный контроль для обработки CSS и сценариев, например, если вы можете программно удалить сценарии и таблицы стилей, если они не нужны.

— Сахил Пурав
источник

Я понимаю, что JFactoryвставляет таблицу стилей <jdoc:include type="head" />, мои вопросы: зачем использовать ее в шаблоне, когда вы можете просто написать <link ...>строку самостоятельно?

— Flimm

Это прекрасно для использования <link...>в шаблоне. Но каждая инфраструктура / CMS имеет свой собственный способ реализации. Joomla не является исключением. Это способ Joomla для рендеринга скриптов и таблиц стилей. Поскольку нет способа переопределить шаблон, мы все еще можем полагаться на старую <link...>разметку.

— Сахил Пурав

0

Есть несколько дополнительных преимуществ использования методов "addXxxxx" для загрузки таблиц стилей и JavaScript.

Существуют расширения, которые вы можете установить, которые будут объединять эти файлы и объединять их в один файл, тем самым повышая скорость страницы (за счет уменьшения запросов http и размеров файлов).

Кроме того, вы можете использовать их в переопределениях шаблонов и макетов, чтобы обеспечить загрузку необходимых файлов. Например, если для некоторых ваших элементов содержимого требуется определенная библиотека javascript (например, библиотека для отображения фотографий в масонском стиле), вы можете создать специальный макет для тех типов статей, которые будут использовать этот механизм для загрузки библиотеки js. и таблицы стилей, специфичные для этих видов дисплеев. Это означает, что дополнительный вес добавляется только к нужным страницам, но по-прежнему хранит информацию о версии в одном месте, поэтому одно редактирование изменит несколько отображений страниц, вместо того, чтобы вносить несколько изменений, когда все меняется (и мы все знаем, что они будет меняться).

Лично я считаю, что этих преимуществ, а также возможности переопределять эти файлы разными копиями, когда это необходимо, будет достаточно, чтобы сделать их предпочтительным способом их добавления.

— Арлен
источник

-1

Если вы используете <link >вашу голову Joomla, она не будет аккуратной, потому что она <link >будет отображаться под блоком javascript, outsite <jdoc:include type="head" />и joomla снова вернутся в папку css. Это повлияет на производительность Joomla. И если вы используете, <link >вы получите много переменных эхо в обычном index.php :(

Я использую, $doc->addStyleSheetпотому что .cssбудет показано на блоке CSS, внутри <jdoc:include type="head" />. то же самое для использования JavaScript $doc->addScript. После того, как <jdoc:include type="head" />Joomla примет все законченное и сделает более важную работу. :)

Некоторые люди используют <link >для поддержки браузера, как, например,

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

это будет шоу в нижней части <jdoc:include type="head" />.

— Эвелин Радитя
источник

Это на самом деле не отвечает на вопрос, который был задан. Если вы считаете, что предоставленный вами код является лучшим методом, объясните почему.

— Lodder

Вы говорите, что <link>тег появится после <jdoc:include type="head" />, но это произойдет, только если вы добавите код после него. Если вы добавите его раньше, он появится раньше. Что касается вывода переменных PHP в index.php, я понятия не имею, что вы имеете в виду, когда говорите это. Использование <link>тегов является основным HTML, и Joomla не меняет способ, которым это работает

— Lodder

а вы добавите перед <jdoc: include type = "head" />? @Lodder

— Эвелин Радитья