Cara terbaik untuk memasukkan file CSS / JS dalam ekstensi kustom saya

Jika saya perlu menyertakan file CSS atau JS dalam ekstensi kustom saya, apa yang akan menjadi cara terbaik dan teraman untuk mencapai ini:

Haruskah saya menempatkan mereka folder khusus di file zip ekstensi saya?
Bagaimana saya harus mendeklarasikan file dalam manifes XML saya?
Bagaimana cara saya memasukkan file dalam header Joomla (hanya bila diperlukan)?

development extensions xml

— Bogowoe
sumber

Jawaban:

Cara terbaik adalah menggunakan folder media. Jadi, pertama-tama Anda perlu membuat folder yang disebut mediadi folder modul Anda.

Catatan: Folder ini harus dibuat sebelum menginstal, bukan setelah.

Bagian dalam folder media, buat 2 sub folder, cssdan js. Ini tidak diperlukan tetapi itu hanya lebih baik untuk memisahkan hal-hal.

Kemudian tambahkan berikut ini ke file XML Anda:

<media folder="media" destination="mod_EXAMPLE">
    <folder>css</folder>
    <folder>js</folder>
</media>

Ubah mod_EXAMPLEapa pun modul Anda.

Setelah instalasi, folder media akan secara otomatis dipindahkan dan Anda akan berakhir dengan yang berikut:

JOOMLA_ROOT/media/mod_EXAMPLE/js

dan

JOOMLA_ROOT/media/mod_EXAMPLE/css

Saya tahu sejauh ini saya telah merujuk ke sebuah modul tetapi hal yang sama berlaku untuk komponen juga.

Untuk memanggil file, Anda dapat menambahkan kode berikut ke file default.php Anda untuk ekstensi Anda:

JHtml::_('stylesheet', JUri::root() . 'media/mod_EXAMPLE/css/style.css');  // For CSS files
JHtml::_('script', JUri::root() . 'media/mod_EXAMPLE/js/script.js');       // For JS files

Semoga ini membantu

— Lodder
sumber

Anda juga dapat melakukannya JHtml::stylesheet("mod_EXAMPLE/style.css", array(), true)untuk memuat media/mod_EXAMPLE/css/style.css(perhatikan bagian tambahan css/), dan JHtml::script("mod_EXAMPLE/script.js", false, true)memuat media/mod_EXAMPLE/js/script.js(perhatikan bagian tambahan js/).

— Flimm

Saya berasumsi bahwa ekstensi Anda adalah komponen. Cara terbaik adalah membuat mediadirektori di samping admindan sitedirektori. Kemudian masukkan js, cssdan imgfile di dalam direktori terpisah seperti ini:
```
index.html
YOUR_COMPONENT_NAME.xml
[+] admin
[+] site
[-] media
   [-] js
      main.js
      index.html
   [+] css
   [+] img
```
Perhatikan bahwa folder apa pun harus memiliki index.htmlfile kosong .

Di manifes XML Anda (YOUR_COMPONENT_NAME.xml), Anda dapat mendeklarasikan mediafile seperti ini:

<media destination="com_YOUR_COMPONENT_NAME" folder="media">
    <filename>index.html</filename>
    <folder>css</folder>
    <folder>js</folder>
    <folder>img</folder>
</media>

Edit tampilan default (default.php) dan tambahkan baris ini untuk memasukkan file dalam Joomla! kepala:

$document = JFactory::getDocument();
$document->addStyleSheet(JUri::base() . 'media/com_YOUR_COMPONENT_NAME/css/main.css');
$document->addScript(JUri::base() . 'media/com_YOUR_COMPONENT_NAME/js/main.js');
$test_image_url = JUri::base() . 'media/com_YOUR_COMPONENT_NAME/img/test.jpg';

— Farahmand
sumber

JHtmlharus digunakan untuk mengimpor file CSS dan JS daripada addStyleSheetdan addScript: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

— Lodder

@Lodder Tidak, seharusnya tidak. Intinya adalah bahwa parameter JHtml::script()dan JHtml::stylesheet()diubah: docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2

— Farahmand

@Lodder Mengenai referensi Anda :

JHtml offers much more flexibility than JDocument, whilst using the same base functionality - indeed at the end of the day JHtml will call JFactory::getDocument()->addStyleSheet() or JFactory::getDocument()->addScript().

— Farahmand

@Fari Parameter hanya berubah dari 2,5 untuk menghapus dukungan untuk cara melakukan 1,5 hal. Jika Anda menggunakan parameter 3.x mereka akan berfungsi dengan baik di 2.5. Juga telah menulis halaman Joomla Docs yang Anda referensikan. Saya sangat menyarankan agar Anda menggunakan JHtml jika Anda meletakkan barang-barang di folder media sehingga orang dapat menimpa skrip Anda lebih mudah (sesuatu yang tidak mungkin dengan JDocument). Meskipun seperti yang Anda katakan itu tidak wajib.

— George Wilson

@ GeorgeWilson Seperti disebutkan dalam tautan yang dirujuk di atas:

If you wish to just include a straight file path, in a template for example, then you are better using JDocument. However if you wish to take into account whether debug is enabled to include a compressed script or take advantage of template overridable scripts and stylesheets then using JHtml is generally better. It is recommended all 3rd Party Developers use JHtml to allow template overrides of their CSS and javascript for template designers.

So J! pengembang situs menggunakan JDocument dan pengembang ekstensi publik pihak ketiga dapat menggunakan JHtml.

— Farahmand