Dlaczego warto korzystać z addStyleSheet lub JHtml :: stylesheet po prostu łącząc plik CSS?

9

Zgodnie ze stroną wiki Dodawanie Javascript i CSS do strony , możesz dodać arkusz stylów w addStyleSheetnastępujący sposób:

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

Lub w JHtml::stylesheetten sposób:

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

Ale strona wiki Tworzenie szablonu podstawowego instruuje ucznia, aby zawierał takie arkusze stylów:

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

To omija addStyleSheeti JHtml::stylesheet. Czy to dobry pomysł? Kiedy użyjesz pierwszego, a kiedy drugiego?

Uwaga: JHtml::_("script", …) i JHtml::_("stylesheet", …)są prawie dokładnie takie same jak JHtml::scripti JHtml::stylesheet. Zobacz Co JHtml::_zrobić .

jhtml jfactory Flimm
źródło
Podobne pytanie dotyczące Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Odpowiedzi:

7

JHtmljest zwykle używany w rozszerzeniach, ponieważ oznacza to, że można wykonać przesłonięcia, co jest naprawdę dobrą funkcją, jeśli jesteś programistą. Rozciąga się również $document->...poprzez dodanie dodatkowej funkcjonalności.

Oto przykład:

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

Podczas korzystania JHtml, zminimalizowana wersja skryptu zostanie załadowana, aby skrócić czas ładowania strony. Po włączeniu trybu debugowania w konfiguracji globalnej załaduje on nieuprawnioną wersję pliku, aby był czytelny.

Nie można zastąpić szablonu w taki sam sposób, jak w przypadku rozszerzeń, dlatego używa się wielu szablonów, <link>ponieważ wszelkie zastąpienia można po prostu zrobić, dodając custom.cssplik, a następnie dodając do niego kod. W ten sposób użycie <link>tagów rodzimych jest szybsze niż użycie API Joomla do załadowania pliku CSS

Lodder
źródło
Więc jedyną zaletą korzystania JHtmlz szablonu jest uzyskanie minimalizacji?
Flimm
@Flimm - zajrzyj tutaj, gdzie wyjaśni to trochę bardziej szczegółowo: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
To jest link w moim pytaniu :) Chciałem tylko wyjaśnienia, ponieważ wydawało się dziwne, że kiedykolwiek napiszesz <link ...>kod bezpośredni.
Flimm
1
W szablonie jest to całkowicie w porządku, ponieważ nie można zastąpić rzeczywistego szablonu w sposób, w jaki można go rozszerzyć, dlatego importowanie zasobu można wykonać bez Joomla API;)
Lodder
1
@Flimm JHtml działa również z plikami MD5SUM, $ document-> addStyleSheet nie. magazine.joomla.org/issues/issue-nov-2014/item/…
COBIZ webdevelopment
6

Oprócz innych, największą zaletą, jaką znalazłem, jest to, że wszystkie pliki CSS / JSS są jednocześnie w tej samej tablicy.

Może to nie brzmieć jak korzyść, ale fragment z innego przykładu 

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

Później, gdy chcesz zmienić system.css, dokonasz zmian, a następnie uświadomisz sobie, że Twoi użytkownicy mają starą system.csspamięć podręczną z nową treścią, co oznacza, że ​​będziesz musiał zmienić kod, aby był nieco innym adresem URL (lub skrócić czas buforowania i spraw, aby użytkownik pobierał częściej)

Kiedy używasz metody JHTML podczas generowania szablonu, możesz następnie wygenerować „wersję” pliku CSS / JS (dobry czas na plik lub użyć identyfikatora git commit itp.), Więc zmiana zawartości natychmiast daje nowy css do wszyscy ludzie, aby zobaczyć twoją stronę. Długi czas buforowania + natychmiastowe ponowne generowanie oznacza mniej pobrań na stronę.

Przykładowy kod (NIE TESTOWANE DZIAŁANIE, chociaż używam podobnego kodu)

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

Ten kod będzie wymagał ulepszenia w systemie, aby upewnić się, że ścieżki zostały poprawnie znalezione

exussum
źródło
5

Joomla zapewnia własne API z fabryki, którą możemy nazwać JFactory.

Korzystanie z:

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

nad:

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

Jeśli jednak dołączasz swoje arkusze stylów do powyższej metody, zostanie to automatycznie włączone do <head>sekcji szablonu <jdoc:include type="head" />. Idąc dalej, jeśli tworzymy własne rozszerzenie i jeśli wyraźnie chcesz mieć własny CSS lub JavaScript, możesz to zadeklarować powyższą metodą. Ponownie doda go do twojej <head>sekcji i pozwoli ci uniknąć aktualizacji szablonuindex.php

Czasami chcesz, aby skrypty pojawiały się na końcu twojego ciała, aby załadować wszystkie elementy DOM. W tej sytuacji możesz dołączyć swoje skrypty na końcu <body>elementu z następującymi elementami:

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

Otrzymasz również dodatkową kontrolę nad obsługą CSS i skryptów, np. Możesz programowo usuwać skrypty i arkusze stylów, jeśli nie są potrzebne.

Sahil Purav
źródło
Rozumiem, że zawiera JFactoryarkusz stylów <jdoc:include type="head" />, moje pytania brzmią: po co męczyć się z użyciem go w szablonie, skoro możesz po prostu napisać <link ...>wiersz?
Flimm
Idealnie nadaje się do użycia <link...>w szablonie. Ale każdy framework / CMS ma swój własny sposób implementacji. Joomla nie jest wyjątkiem. Jest to sposób Joomla do renderowania skryptów i arkuszy stylów. O ile nie ma sposobu na zastąpienie szablonu, nadal możemy polegać na starych <link...>znacznikach.
Sahil Purav
0

Istnieje kilka dodatkowych korzyści z używania metod „addXxxxx” do ładowania arkuszy stylów i skryptów javascript.

Istnieją rozszerzenia, które można zainstalować, które poskładają te pliki razem i rozpakują je do jednego pliku, co poprawi szybkość strony (zmniejszając żądania HTTP i rozmiary plików).

Można ich również użyć w nadpisaniach szablonów i układów, aby zapewnić załadowanie wymaganych plików. Na przykład, jeśli kilka elementów treści wymaga określonej biblioteki javascript (takiej jak biblioteka do wykonywania masowych zdjęć), możesz utworzyć specjalny układ dla tych typów artykułów, które będą używać tego mechanizmu do ładowania biblioteki js i arkusze stylów specyficzne dla tego rodzaju wyświetlaczy. Oznacza to, że dodatkowy ciężar jest dodawany tylko do stron, które go potrzebują, ale nadal utrzymuje informacje o wersji w jednym miejscu, więc jedna edycja zmieni wiele wyświetlanych stron, zamiast konieczności wprowadzania wielu zmian, gdy rzeczy się zmieniają (i wszyscy wiemy, że oni będzie zmienić).

Osobiście uważam te zalety, a także możliwość zastąpienia tych plików różnymi kopiami, gdy jest to wymagane, aby było to moim ulubionym sposobem ich dodawania.

Arlen
źródło
-1

jeśli użyjesz <link >swojej głowy joomla, nie będzie ona uporządkowana, ponieważ <link >będzie wyświetlana pod blokiem javascript, outsite <jdoc:include type="head" />i joomla ponownie wrócą do folderu css. Wpłynie to na wydajność joomla. A jeśli użyjesz <link >, otrzymasz wiele echa zmiennej w zwykłym indeksie. Php :(

Używam, $doc->addStyleSheetponieważ .cssbędą wyświetlane w bloku css, wewnątrz <jdoc:include type="head" />. to samo dotyczy użycia javascript $doc->addScript. Po<jdoc:include type="head" /> joomla przyjmie wszystko skończone i wykona ważniejszą pracę. :)

Niektóre osoby używają <link >do nieobsługiwanej przeglądarki, np

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

pokaże się na dole <jdoc:include type="head" />.

Evelyn Raditya
źródło
To tak naprawdę nie odpowiada na zadane pytanie. Jeśli uważasz, że podany kod jest najlepszą metodą, wyjaśnij dlaczego.
Lodder
Mówisz, że <link>tag pojawi się po <jdoc:include type="head" />, ale dzieje się tak tylko wtedy, gdy dodasz kod po nim. Jeśli dodasz go wcześniej, pojawi się on wcześniej. Co do echa zmiennych PHP w pliku index.php, nie mam pojęcia, co masz na myśli mówiąc to. Używanie <link>tagów to podstawowy HTML, a Joomla nie zmienia sposobu, w jaki to działa
Lodder
i dodasz przed <jdoc: include type = "head" />? @Lodder
Evelyn Raditya