web-dev-qa-db-fra.com

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, quel serait le moyen le plus sûr et le plus sûr d'y parvenir:

  1. Devrais-je les mettre dans un dossier spécifique dans mon fichier d'extension Zip?
  2. Comment dois-je déclarer les fichiers dans mon manifeste XML?
  3. Comment inclure les fichiers dans l'en-tête Joomla (uniquement si nécessaire)?
developmentextensionsxml
8
Bogowoe

Le meilleur moyen serait d'utiliser le dossier multimédia. Donc, vous devrez d’abord créer un dossier appelé media dans votre dossier de 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, css et js. Ce n'est pas obligatoire, mais il est simplement préférable de garder les choses séparées.

Ajoutez ensuite les éléments suivants à votre fichier XML:

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

Changement mod_EXAMPLE quel que soit votre module.

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

JOOMLA_ROOT/media/mod_EXAMPLE/js

et

JOOMLA_ROOT/media/mod_EXAMPLE/css

Je sais que je me suis toujours référé à 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

7
Lodder

  1. Je suppose que votre extension est un composant. La meilleure solution consiste à créer un répertoire media à côté des répertoires admin et site. Ensuite, mettez les fichiers js, css et img dans des répertoires distincts, comme ceci:

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

    Notez que tout dossier doit avoir un fichier vide index.html.

  2. Dans votre manifeste XML (YOUR_COMPONENT_NAME.xml), vous pouvez déclarer le fichier media 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. Éditez la vue par défaut (default.php) et ajoutez ces lignes pour inclure les fichiers dans le fichier 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';
2
Farahmand