Mengapa menggunakan addStyleSheet atau JHtml :: stylesheet hanya dengan menautkan file CSS?

9

Menurut halaman wiki Menambahkan Javascript dan CSS ke Halaman , Anda dapat menambahkan stylesheet dengan addStyleSheetseperti ini:

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

Atau dengan JHtml::stylesheetseperti ini:

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

Tetapi halaman wiki Membuat Template Dasar menginstruksikan pelajar untuk memasukkan stylesheet seperti ini:

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

Ini memotong addStyleSheetdan JHtml::stylesheet. Apakah ini ide yang bagus? Kapan Anda akan menggunakan yang pertama dan kapan Anda akan menggunakan yang kedua?

Catatan: JHtml::_("script", …) dan JHtml::_("stylesheet", …)hampir persis sama dengan JHtml::scriptdan JHtml::stylesheet. Lihat Apa yang JHtml::_dilakukan .

jhtml jfactory Flimm
sumber
Pertanyaan terkait yang menanyakan tentang Javascript: joomla.stackexchange.com/q/325/5239
Flimm

Jawaban:

7

JHtmlbiasanya digunakan dalam ekstensi karena itu berarti penggantian dapat dilakukan yang merupakan fitur yang sangat bagus jika Anda seorang pengembang. Itu juga meluas $document->...dengan menambahkan beberapa fungsionalitas tambahan.

Berikut ini sebuah contoh:

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

Bila menggunakan JHtml, yang minified versi script akan dimuat untuk mengurangi waktu loading halaman. Saat Anda mengaktifkan mode debug di Konfigurasi Global, itu akan memuat versi file yang tidak ditentukan untuk membuatnya dapat dibaca.

Anda tidak dapat mengesampingkan templat dengan cara yang sama Anda bisa untuk ekstensi, jadi banyak templat digunakan <link>karena penggantian apa pun hanya dapat dilakukan dengan menambahkan custom.cssfile, lalu menambahkan kode Anda di dalamnya. Dengan demikian menggunakan <link>tag asli lebih cepat daripada menggunakan API Joomla untuk memuat file CSS

Lodder
sumber
Jadi satu-satunya keuntungan menggunakan JHtmltemplate adalah mendapatkan minifikasi?
Flimm
@Flimm - Lihat di sini, di mana ia akan menjelaskan sedikit lebih detail: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
Itulah tautan dalam pertanyaan saya :) Saya hanya ingin klarifikasi karena sepertinya aneh bahwa Anda akan pernah menulis <link ...>kode directyl.
Flimm
1
Dalam sebuah templat, sangat baik untuk melakukan ini karena Anda tidak dapat menimpa templat yang sebenarnya dengan cara Anda dapat melakukan ekstensi, oleh karena itu mengimpor aset dapat dilakukan tanpa Joomla API;)
Lodder
1
@Flimm JHtml juga berfungsi dengan file MD5SUM, $ document-> addStyleSheet tidak. magazine.joomla.org/issues/issue-nov-2014/item/…
COBIZ webdevelopment
6

Selain yang lain, satu-satunya manfaat terbesar yang saya temukan adalah semua file CSS / JSS berada dalam array yang sama sekaligus.

Ini mungkin kedengarannya bukan manfaat, tetapi cuplikan dari contoh lain 

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

Kemudian ketika Anda ingin mengubah system.css, Anda akan membuat perubahan dan kemudian menyadari bahwa pengguna Anda memiliki yang lama system.cssdalam cache mereka dengan konten baru Anda, yang berarti Anda harus mengubah kode menjadi URL yang sedikit berbeda (atau mengurangi waktu cache Anda dan buat pengguna mengunduh lebih sering)

Ketika Anda menggunakan metode JHTML ketika templat dihasilkan, Anda kemudian dapat menghasilkan "versi" dari file CSS / JS (filemtime adalah yang baik untuk digunakan, atau git commit ID dll) sehingga mengubah konten secara instan memberi css baru ke semua orang melihat situs Anda. Waktu cache yang panjang + pembuatan ulang instan berarti lebih sedikit unduhan per halaman.

Contoh kode (TIDAK DIUJI BEKERJA, Meskipun saya menggunakan kode serupa)

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

Kode ini perlu mengubah sistem Anda untuk memastikan jalurnya ditemukan dengan benar

exussum
sumber
5

Joomla menyediakan API sendiri dari Pabrik mereka, kita dapat menyebutnya sebagai JFactory.

Tidak ada salahnya menggunakan:

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

lebih:

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

Namun, jika Anda menyertakan stylesheet Anda dengan metode di atas, maka itu akan dimasukkan di <head>bagian template Anda secara otomatis <jdoc:include type="head" />. Lebih jauh, jika kami mengembangkan ekstensi kami sendiri dan jika Anda secara eksplisit ingin memiliki CSS atau Javascript sendiri, Anda dapat mendeklarasikannya dengan metode di atas. Itu lagi akan menambahkannya di <head>bagian Anda dan menghindari Anda untuk memperbarui template Andaindex.php

Terkadang Anda ingin skrip Anda muncul di akhir tubuh Anda untuk mendapatkan semua elemen DOM dimuat. Pada situasi ini, Anda mungkin ingin memasukkan skrip Anda di akhir <body>elemen Anda dengan mengikuti:

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

Anda juga akan mendapatkan kontrol tambahan untuk menangani CSS dan skrip misalnya Anda dapat menghapus skrip dan stylesheet secara terprogram jika tidak diperlukan.

Sahil Purav
sumber
Saya mengerti bahwa JFactorymenempatkan stylesheet <jdoc:include type="head" />, pertanyaan saya adalah mengapa repot-repot menggunakannya dalam template ketika Anda hanya bisa menulis <link ...>sendiri?
Flimm
Sangat baik untuk digunakan <link...>dalam template. Tetapi setiap kerangka / CMS memiliki cara implementasinya sendiri. Tidak terkecuali Joomla. Ini adalah cara Joomla untuk membuat skrip dan stylesheet. Sejauh tidak ada cara untuk mengganti template, kita masih bisa mengandalkan <link...>markup lama .
Sahil Purav
0

Ada beberapa manfaat tambahan untuk menggunakan metode "addXxxxx" untuk memuat stylesheet dan javascripts.

Ada ekstensi yang dapat Anda instal yang akan menyatukan file-file itu dan gzip menjadi satu file, sehingga meningkatkan kecepatan halaman (dengan mengurangi permintaan http dan ukuran file).

Selain itu, Anda dapat menggunakannya dalam template dan layout override untuk memastikan file yang diperlukan dimuat. Misalnya, jika beberapa item konten Anda memerlukan perpustakaan javascript tertentu (seperti perpustakaan untuk melakukan dispaly foto gaya Masonary), Anda dapat membuat tata letak spesifik untuk jenis artikel yang akan menggunakan mekanisme itu untuk memuat perpustakaan js dan style sheet khusus untuk jenis pajangan tersebut. Ini berarti bahwa bobot tambahan hanya akan ditambahkan ke halaman yang membutuhkannya, tetapi masih menyimpan informasi versi di satu tempat, jadi satu pengeditan akan mengubah banyak tampilan halaman, daripada harus membuat banyak perubahan saat terjadi perubahan (dan kita semua tahu mereka akan berubah).

Secara pribadi, saya menganggap kelebihan-kelebihan itu, ditambah kemampuan untuk menimpa file-file itu dengan salinan yang berbeda bila diperlukan, cukup untuk menjadikannya cara yang saya sukai untuk menambahkannya.

Arlen
sumber
-1

jika Anda menggunakan <link >joomla head Anda tidak akan rapi karena <link >akan tampil di bawah blok javascript, outsite <jdoc:include type="head" />dan joomla akan kembali ke folder css lagi. Ini akan mempengaruhi kinerja joomla yang seharusnya. Dan jika Anda menggunakan, <link >Anda akan mendapatkan banyak gema variabel di plain index.php :(

Saya menggunakan $doc->addStyleSheetkarena .cssakan ditampilkan di blok css, di dalam <jdoc:include type="head" />. itu sama untuk penggunaan javascript $doc->addScript. Setelah <jdoc:include type="head" />joomla akan menganggap semua selesai dan akan melakukan pekerjaan yang lebih penting. :)

Beberapa orang menggunakan <link >untuk browser yang tidak didukung seperti mis

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

itu akan ditampilkan di bagian bawah <jdoc:include type="head" />.

Evelyn Raditya
sumber
Ini sebenarnya tidak menjawab pertanyaan yang telah diajukan. Jika Anda yakin kode yang Anda berikan adalah metode terbaik, jelaskan alasannya.
Lodder
Anda mengatakan bahwa <link>tag akan muncul setelahnya <jdoc:include type="head" />, tetapi ini hanya terjadi jika Anda menambahkan kode setelahnya. Jika Anda menambahkannya sebelumnya, itu akan muncul sebelumnya. Berkenaan dengan echoing variabel PHP di index.php, saya tidak tahu apa yang Anda maksud ketika Anda mengatakan ini. Menggunakan <link>tag adalah HTML dasar dan Joomla tidak mengubah cara kerjanya
Lodder
dan Anda akan menambahkan sebelum <jdoc: include type = "head" />? @Lodder
Evelyn Raditya