it-swarm-es.tech

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)?
8
Bogowoe

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

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

Dentro de la carpeta de medios, cree 2 subcarpetas, css y 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>

Cambio mod_EXAMPLE a cualquiera 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

7
Lodder
  1. Supongo que su extensión es un componente. La mejor manera es crear un directorio media junto a los directorios admin y site. Luego coloque los archivos js, css y img dentro de directorios separados como este:

    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.html archivo.

  2. En su manifiesto XML (YOUR_COMPONENT_NAME.xml), puede declarar media archivo de esta manera:

    <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';
    
2
Farahmand