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

8

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

Respuestas:

7

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

Lodder
fuente
2
También puede hacerlo JHtml::stylesheet("mod_EXAMPLE/style.css", array(), true)para cargar media/mod_EXAMPLE/css/style.css(observe la css/parte adicional ) y JHtml::script("mod_EXAMPLE/script.js", false, true)cargar media/mod_EXAMPLE/js/script.js(observe la js/parte adicional ).
Flimm
2
  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';
    
Farahmand
fuente
JHtmldebe usarse para importar archivos CSS y JS en lugar de addStyleSheety addScript: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder
@Lodder No, no debería. El punto es que los parámetros JHtml::script()y JHtml::stylesheet()se cambian: docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2
Farahmand
@Lodder Con respecto a su referencia :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 Los parámetros solo cambiaron de 2.5 para eliminar la compatibilidad con la forma 1.5 de hacer las cosas. Si usa los parámetros 3.x, funcionarán bien en 2.5. Además de haber escrito la página de Joomla Docs a la que hizo referencia, le recomendaría encarecidamente que use JHtml si coloca cosas en la carpeta de medios para que las personas puedan anular sus scripts más fácilmente (algo que no es posible con JDocument). Aunque como dices no es obligatorio.
George Wilson el
1
@GeorgeWilson Como se menciona en el enlace de referencia anterior: ¡ 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.Entonces J! los desarrolladores del sitio usan JDocument y los desarrolladores de extensiones públicas de terceros pueden usar JHtml.
Farahmand