La mejor manera de incluir archivos CSS / JS en mi extensión personalizada

Si necesito incluir archivos CSS o JS en mis extensiones personalizadas, cuál sería la mejor y más segura forma de lograr esto:

1. ¿Debo ponerlos en una carpeta específica en mi archivo zip de extensión?
2. ¿Cómo debo declarar los archivos en mi manifiesto XML?
3. ¿Cómo incluyo los archivos en el encabezado de Joomla (solo cuando es necesario)?

La mejor manera sería usar la carpeta multimedia. Por lo tanto, primero deberá crear una carpeta llamada mediaen la carpeta de su módulo.

Nota: esta carpeta debe crearse antes de la instalación, no después.

El interior de la carpeta multimedia, crea 2 subcarpetas cssy js. Esto no es obligatorio, pero es mejor mantener las cosas separadas.

Luego agregue lo siguiente a su archivo XML:

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

Cambie mod_EXAMPLEa lo que sea su módulo.

Tras la instalación, la carpeta multimedia se moverá automáticamente y terminará con lo siguiente:

JOOMLA_ROOT/media/mod_EXAMPLE/js

y

JOOMLA_ROOT/media/mod_EXAMPLE/css

Sé que hasta ahora me he referido a un módulo, pero lo mismo se aplica a los componentes también.

Para llamar al archivo, puede agregar el siguiente código a su archivo default.php para su extensión:

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

Espero que esto ayude

1. Supongo que su extensión es un componente. La mejor manera es crear un mediadirectorio al lado adminy sitedirectorios. A continuación, poner js, cssy imglos archivos dentro de los directorios separados como esta:

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

   Tenga en cuenta que cualquier carpeta debe tener un index.htmlarchivo vacío .

2. En su manifiesto XML (YOUR_COMPONENT_NAME.xml), puede declarar un mediaarchivo como este:

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

3. Edite la vista predeterminada (default.php) y agregue estas líneas para incluir los archivos en Joomla! cabeza:

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