Melhor maneira de incluir arquivos CSS / JS na minha extensão personalizada

Se eu precisar incluir arquivos CSS ou JS em minhas extensões personalizadas, qual seria a melhor e mais segura maneira de conseguir isso:

1. Devo colocá-los em uma pasta específica no meu arquivo zip de extensão?
2. Como devo declarar os arquivos no meu manifesto XML?
3. Como incluo os arquivos no cabeçalho do Joomla (somente quando necessário)?

A melhor maneira seria usar a pasta de mídia. Portanto, primeiro você precisará criar uma pasta chamada mediana pasta do módulo.

Nota: Esta pasta deve ser criada antes da instalação, não depois.

Dentro da pasta de mídia, crie 2 subpastas csse js. Isso não é necessário, mas é melhor manter as coisas separadas.

Em seguida, adicione o seguinte ao seu arquivo XML:

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

Mude mod_EXAMPLEpara qualquer que seja o seu módulo.

Após a instalação, a pasta de mídia será movida automaticamente e você terminará com o seguinte:

JOOMLA_ROOT/media/mod_EXAMPLE/js

e

JOOMLA_ROOT/media/mod_EXAMPLE/css

Sei até agora que me refiro a um módulo, mas o mesmo se aplica a componentes também.

Para chamar o arquivo, você pode adicionar o seguinte código ao arquivo default.php da sua extensão:

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 isto ajude

1. Presumo que sua extensão seja um componente. A melhor maneira é criar um mediadiretório ao lado de admine sitediretórios. Em seguida js, coloque csse imgarquivos em diretórios separados como este:

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

   Observe que qualquer pasta deve ter um index.htmlarquivo vazio .

2. No seu manifesto XML (YOUR_COMPONENT_NAME.xml), você pode declarar um mediaarquivo 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 a visualização padrão (default.php) e adicione estas linhas para incluir os arquivos no Joomla! cabeça:

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