Neden sadece bir CSS dosyasını bağlamak için addStyleSheet veya JHtml :: stylesheet kullanıyorsunuz?


9

Sayfaya Javascript ve CSS Ekleme wiki sayfasına göre, aşağıdakine sahip bir stil sayfası ekleyebilirsiniz addStyleSheet:

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

Veya JHtml::stylesheetbunun gibi:

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

Ancak Temel Şablon Oluşturma wiki sayfası , öğrenciye aşağıdaki gibi stil sayfaları eklemesini söyler:

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

Bu baypas eder addStyleSheetve JHtml::stylesheet. Bu iyi bir fikir mi? Birincisini ne zaman ve ikincisini ne zaman kullanırsınız?

Not: JHtml::_("script", …) ve JHtml::_("stylesheet", …)neredeyse tam olarak aynıdır JHtml::scriptve JHtml::stylesheet. Bkz neyi JHtml::_yapmak .


İlgili soru Javascript hakkında soru sorma: joomla.stackexchange.com/q/325/5239
Flimm

Yanıtlar:


7

JHtmlnormalde uzantılarda kullanılır çünkü geçersiz kılmalar gerçekleştirilebilir, bu da bir geliştiriciyseniz gerçekten iyi bir özelliktir. Ayrıca $document->...bazı ek işlevler ekleyerek genişler .

İşte bir örnek:

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

Kullanırken JHtml, sayfa yükleme sürelerini azaltmak için komut dosyasının küçültülmüş sürümü yüklenir. Genel Yapılandırma'da hata ayıklama modunu etkinleştirdiğinizde , dosyanın okunamayan sürümünü yüklenebilir hale getirmek için yüklenir.

Bir şablonu uzantılar için yapabildiğiniz gibi geçersiz kılamazsınız, bu nedenle birçok şablon kullanılır, <link>çünkü herhangi bir geçersiz kılma sadece bir custom.cssdosya ekleyip kodunuzu ekleyerek yapılabilir . Böylece yerel <link>etiketleri kullanmak, CSS dosyasını yüklemek için Joomla API'sini kullanmaktan daha hızlıdır


JHtmlBir şablon için kullanmanın tek avantajı küçültme elde etmektir?
Flimm

@Flimm - Biraz daha ayrıntılı olarak açıklayacağı bir göz atın: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder

Benim sorum bağlantı :) Sadece açıklama istedim çünkü hiç <link ...>directyl kodu yazmak garip görünüyordu çünkü .
Flimm

1
Bir şablonda, bunu gerçek bir şablonu bir uzantıya ekleyebileceğiniz şekilde geçersiz kılamayacağınız için yapmak gayet iyi, bu nedenle bir varlığı içe aktarmak Joomla API'sı olmadan yapılabilir;)
Lodder

1
@Flimm JHtml ayrıca MD5SUM dosyalarıyla çalışır, $ document-> addStyleSheet çalışmaz. magazine.joomla.org/issues/issue-nov-2014/item/…
COBIZ web geliştirme

6

Diğerlerine ek olarak, bulduğum en büyük fayda, tüm CSS / JSS dosyalarının aynı anda 1 seferde olmasıdır.

Bu bir fayda gibi görünmeyebilir, ancak başka bir örnekten gelen bir pasaj

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

Daha sonra değiştirmek istediğinizde, değişiklikler system.cssyapacağınız ve daha sonra kullanıcılarınızın system.cssönbelleğinde yeni içeriğinizle eski olduğunu fark edeceksiniz, yani kodu biraz farklı bir URL olacak şekilde değiştirmeniz (veya önbellek zamanınızı ve kullanıcıyı daha sık indirmesini sağlayın)

Şablon oluşturulurken JHTML yöntemini kullandığınızda, daha sonra CSS / JS dosyasının "sürümünü" oluşturabilirsiniz (filemtime kullanmak için iyi bir yöntemdir veya git command ID vb.) Böylece içeriği değiştirmek yeni css'i anında verir. sitenizi görüntülemek için tüm kullanıcılar. Uzun önbellek süreleri + anında yeniden oluşturma, sayfa başına daha az indirme anlamına gelir.

Kod örneği (ÇALIŞMADI TEST EDİLMEDİ, Benzer kodu kullanmama rağmen)

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

Yolların doğru bir şekilde bulunduğundan emin olmak için bu kodun sisteminizde ayarlanması gerekir


5

Joomla kendi API'sini Fabrikalarından JFactory olarak adlandırabiliriz.

Kullanmanın bir zararı yoktur:

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

bitmiş:

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

Ancak, stil sayfalarınızı yukarıdaki yöntemle ekliyorsanız <head>, şablonunuzun bölümüne otomatik olarak eklenecektir <jdoc:include type="head" />. Daha da ileri giderek, kendi uzantımızı geliştiriyorsak ve açıkça kendi CSS veya Javascript'inize sahip olmak istiyorsanız, yukarıdaki yöntemle beyan edebilirsiniz. Tekrar <head>bölümünüze ekleyecek ve şablonunuzu güncellemekten kaçınacaktır.index.php

Bazen tüm DOM öğelerini yüklemek için komut dosyalarınızın vücudunuzun sonunda görünmesini istersiniz. Bu durumda, komut dosyalarınızı öğenizin sonuna <body>aşağıdakileri eklemek isteyebilirsiniz :

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

Ayrıca CSS ve komut dosyalarını işlemek için ek kontrol elde edersiniz, örneğin, komut dosyalarının ve stil sayfalarının gerekmedikçe programlı olarak ayarlanmasını kaldırabilirsiniz.


JFactoryStil sayfasını yerleştirdiğini anlıyorum, <jdoc:include type="head" />sorularım neden <link ...>satırı kendiniz yazabildiğinizde bir şablonda kullanmaktan rahatsız oluyorsunuz ?
Flimm

<link...>Şablonda kullanmak gayet iyi . Ancak her çerçevenin / CMS'nin kendi uygulama şekli vardır. Joomla bir istisna değildir. Komut dosyalarını ve stil sayfalarını oluşturmanın bir Joomla yoludur. Şablonu geçersiz kılmanın bir yolu olmadığında, hala eski <link...>biçimlendirmeye güvenebiliriz .
Sahil Purav

0

Stil sayfalarını ve javascripts yüklemek için "addXxxxx" yöntemlerini kullanmanın birkaç ek avantajı vardır.

Bu dosyaları bir araya getirip tek bir dosyaya sıkıştırmak ve böylece sayfa hızını artırmak (http isteklerini ve dosya boyutlarını azaltarak) yükleyebileceğiniz uzantılar vardır.

Ayrıca, gerekli dosyaların yüklenmesini sağlamak için bunları şablon ve düzen geçersiz kılmalarında kullanabilirsiniz. Örneğin, içerik öğelerinizden birkaçı belirli bir javascript kütüphanesi gerektiriyorsa (örneğin, Mason tarzı fotoğraf dağıtımı yapmak için bir kütüphane gibi), js kütüphanesini yüklemek için bu mekanizmayı kullanacak olan bu tür makaleler için belirli bir düzen oluşturabilirsiniz. ve bu tür ekranlara özgü stil sayfaları. Bu, yalnızca ihtiyaç duyulan sayfalara fazladan ağırlık eklendiği, ancak sürüm bilgisini tek bir yerde tuttuğu anlamına gelir, bu nedenle bir düzenleme, işler değiştiğinde birden fazla değişiklik yapmak yerine birden fazla sayfa görüntüsünü değiştirir (ve hepimiz biliyoruz olacaktır ) değiştirin.

Şahsen, bu avantajları ve gerektiğinde farklı kopyalara sahip dosyaları geçersiz kılma yeteneğini, bunları eklemeyi tercih ettiğim şekilde yapmak için yeterli olacak şekilde düşünüyorum.


-1

Eğer jomascript bloğunun altında gösterilecek çünkü <link >joomla başınızı derli toplu<link > olmayacak, outsite <jdoc:include type="head" />ve joomla tekrar css klasörüne geri dönecektir. Bu, joomla'nın performansını etkileyecektir. Ve kullanırsanız <link >düz index.php :(

Kullandığım $doc->addStyleSheetçünkü .cssiçeride, css blokta göstermek olacaktır <jdoc:include type="head" />. aynı javascript kullanımı için $doc->addScript. <jdoc:include type="head" />Joomla bittikten sonra her şeyi bitirecek ve daha önemli işler yapacak. :)

Bazı insanlar destek <link >tarayıcısı gibi

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

altında gösterilecek <jdoc:include type="head" />.


Bu aslında sorulan soruya cevap vermiyor. Girdiğiniz kodun en iyi yöntem olduğunu düşünüyorsanız nedenini açıklayın.
Lodder

<link>Etiketin sonra görüneceğini söylüyorsunuz <jdoc:include type="head" />, ancak bu yalnızca kodu arkasına eklerseniz gerçekleşir. Daha önce eklerseniz, daha önce görünecektir. İndex.php PHP değişkenleri yankılanmasına gelince, bunu söylediğinde ne demek istediğiniz hakkında hiçbir fikrim yok. <link>Etiketleri kullanmak temel HTML'dir ve Joomla bunun çalışma şeklini değiştirmez
Lodder

ve <jdoc: include type = "head" />? @Lodder
Evelyn Raditya
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.