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

8

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)?
Bogowoe
la source

Réponses:

7

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

Lodder
la source
2
Vous pouvez également faire JHtml::stylesheet("mod_EXAMPLE/style.css", array(), true)pour charger media/mod_EXAMPLE/css/style.css(notez la css/partie supplémentaire ), et JHtml::script("mod_EXAMPLE/script.js", false, true)pour charger media/mod_EXAMPLE/js/script.js(notez la js/partie supplémentaire ).
Flimm
2
  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';
    
Farahmand
la source
JHtmldevrait être utilisé pour importer des fichiers CSS et JS plutôt que addStyleSheetet addScript: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
@Lodder Non, ça ne devrait pas. Le fait est que les paramètres de JHtml::script()et JHtml::stylesheet()sont modifiés: docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2
Farahmand
@Lodder Concernant votre référence :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
1
@Fari Les paramètres n'ont changé que de 2,5 pour supprimer la prise en charge de la façon de faire les choses 1.5. Si vous utilisez les paramètres 3.x, ils fonctionneront correctement en 2.5. Après avoir également écrit la page Joomla Docs que vous avez référencée, je vous conseillerais fortement d'utiliser JHtml si vous placez des éléments dans le dossier multimédia afin que les gens puissent remplacer vos scripts plus facilement (ce qui n'est pas possible avec JDocument). Bien que comme vous le dites, ce n'est pas obligatoire.
George Wilson
1
@GeorgeWilson Comme mentionné dans le lien référencé ci-dessus: 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.Alors J! les développeurs de sites utilisent JDocument et les développeurs d'extensions publiques tierces peuvent utiliser JHtml.
Farahmand