Le meilleur moyen d'inclure des fichiers CSS / JS dans mon extension personnalisée

Si j'ai besoin d'inclure des fichiers CSS ou JS dans mes extensions personnalisées, quelle serait la meilleure façon et la plus sûre d'y parvenir:

1. Dois-je les placer dans un dossier spécifique dans mon fichier zip d'extension?
2. Comment dois-je déclarer les fichiers dans mon manifeste XML?
3. Comment inclure les fichiers dans l'en-tête Joomla (uniquement en cas de besoin)?

La meilleure façon serait d'utiliser le dossier multimédia. Ainsi, vous devrez d'abord créer un dossier appelé mediadans le dossier de votre module.

Remarque: ce dossier doit être créé avant l'installation, pas après.

À l'intérieur du dossier multimédia, créez 2 sous-dossiers csset js. Ce n'est pas obligatoire mais c'est plus agréable de garder les choses séparées.

Ajoutez ensuite ce qui suit à votre fichier XML:

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

Changez mod_EXAMPLEpour quel que soit votre module.

Lors de l'installation, le dossier multimédia sera automatiquement déplacé et vous vous retrouverez avec ce qui suit:

JOOMLA_ROOT/media/mod_EXAMPLE/js

et

JOOMLA_ROOT/media/mod_EXAMPLE/css

Je sais que je me réfère jusqu'à présent à un module, mais il en va de même pour les composants.

Pour appeler le fichier, vous pouvez ajouter le code suivant à votre fichier default.php pour votre extension:

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

J'espère que cela t'aides

1. Je suppose que votre extension est un composant. La meilleure façon est de créer un mediarépertoire à côté de adminet des siterépertoires. Ensuite , mettre js, csset les imgfichiers dans des répertoires distincts comme celui - ci:

   index.html
   YOUR_COMPONENT_NAME.xml
   [+] admin
   [+] site
   [-] media
      [-] js
         main.js
         index.html
      [+] css
      [+] img
   

   Notez que tout dossier doit avoir un index.htmlfichier vide .

2. Dans votre manifeste XML (YOUR_COMPONENT_NAME.xml), vous pouvez déclarer un mediafichier comme ceci:

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

3. Modifiez la vue par défaut (default.php) et ajoutez ces lignes pour inclure les fichiers dans Joomla! tête:

   $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';