Навіщо використовувати AddStyleSheet або JHtml :: таблицю стилів для просто посилання 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

— Flimm
джерело

Питання, пов'язані з питанням Javascript: joomla.stackexchange.com/q/325/5239

— Flimm

7

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

Ось приклад:

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

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

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

— Лоудер
джерело

Тож єдина перевага використання JHtmlшаблону - це мінімізація?

— Флейм

@Flimm - Подивіться сюди, де він буде пояснити трохи докладніше: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

— Лоддер

Це посилання в моєму запитанні :) Я просто хотів роз'яснення, тому що здавалося дивним, що ви коли-небудь <link ...>напишете код directyl.

— Flimm

1

У шаблоні це чудово робити, оскільки ви не можете переокремити фактичний шаблон так, як ви можете розширення, тому імпорт активу можна зробити без API Joomla;)

— Лодер

1

@Flimm JHtml також працює з файлами MD5SUM, $ document-> addStyleSheet не робить. magazine.joomla.org/isissue/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 (файловий час, який можна використовувати, або git виконувати ідентифікатор тощо), тож зміна вмісту негайно дає новий 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());
    }
  }
}

Цей код потребує налаштування для вашої системи, щоб переконатися, що шляхи знайдені правильно

— ексус
джерело

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" для завантаження таблиць стилів та javascripts.

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

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

Особисто я вважаю ці переваги, а також можливість переоформлення цих файлів з різними копіями, коли це потрібно, для того, щоб зробити цей мій кращим способом їх додавання.

— Арлен
джерело

-1

якщо ви користуєтесь <link >головою Joomla, не буде охайно, тому що <link >вона відображатиметься під блоком javascript, аутсайт <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" />Джомла візьме на себе все готове і зробить важливішу роботу. :)

Деякі люди використовують <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" />.

— Евелін Радітя
джерело

Це насправді не відповідає на поставлене питання. Якщо ви вважаєте, що наданий вами код є найкращим методом, поясніть чому.

— Лодер

Ви кажете, що <link>тег з’явиться після <jdoc:include type="head" />, але це станеться лише якщо ви додасте код після нього. Якщо додати його раніше, він з’явиться раніше. Що стосується повторення змінних PHP в index.php, я не маю поняття, що ви маєте на увазі, коли ви говорите це. Використання <link>тегів - це основний HTML, і Joomla не змінює спосіб роботи

— Lodder

і ви додасте до <jdoc: include type = "head" />? @Lodder

— Evelyn Raditya