ti-enxame.com

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 faço para incluir os arquivos no cabeçalho do Joomla (somente quando necessário)?
8
Bogowoe

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

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

Dentro da pasta de mídia, crie 2 subpastas, css e 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>

Mudança mod_EXAMPLE para 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

7
Lodder
  1. Presumo que sua extensão seja um componente. A melhor maneira é criar um diretório media ao lado dos diretórios admin e site. Em seguida, coloque os arquivos js, css e img dentro de 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 arquivo index.html Vazio.

  2. No seu manifesto XML (YOUR_COMPONENT_NAME.xml), você pode declarar o arquivo media assim:

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