Beste Möglichkeit, CSS / JS-Dateien in meine benutzerdefinierte Erweiterung aufzunehmen

Wenn ich CSS- oder JS-Dateien in meine benutzerdefinierten Erweiterungen aufnehmen muss, was ist der beste und sicherste Weg, um dies zu erreichen:

1. Soll ich sie in einen bestimmten Ordner in meiner Erweiterungs-Zip-Datei einfügen?
2. Wie soll ich die Dateien in meinem XML-Manifest deklarieren?
3. Wie füge ich die Dateien in den Joomla-Header ein (nur bei Bedarf)?

Der beste Weg wäre, den Medienordner zu verwenden. Sie müssen also zunächst einen Ordner erstellen, der mediain Ihrem Modulordner aufgerufen wird .

Hinweis: Dieser Ordner sollte vor der Installation erstellt werden, nicht danach.

Erstellen Sie im Medienordner 2 Unterordner cssund js. Dies ist nicht erforderlich, aber es ist nur schöner, die Dinge getrennt zu halten.

Fügen Sie dann Ihrer XML-Datei Folgendes hinzu:

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

Wechseln Sie mod_EXAMPLEzu Ihrem Modul.

Bei der Installation wird der Medienordner automatisch verschoben und Sie erhalten Folgendes:

JOOMLA_ROOT/media/mod_EXAMPLE/js

und

JOOMLA_ROOT/media/mod_EXAMPLE/css

Ich weiß, dass ich mich bisher auf ein Modul bezogen habe, aber das gilt auch für Komponenten.

Um die Datei aufzurufen, können Sie Ihrer default.php-Datei für Ihre Erweiterung den folgenden Code hinzufügen:

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

Hoffe das hilft

1. Ich gehe davon aus, dass Ihre Erweiterung eine Komponente ist. Der beste Weg ist, ein mediaVerzeichnis neben adminund siteVerzeichnisse zu erstellen . Dann legen Sie js, cssund imgDateien in separaten Verzeichnissen wie folgt aus :

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

   Beachten Sie, dass jeder Ordner eine leere index.htmlDatei haben sollte.

2. In Ihrem XML-Manifest (YOUR_COMPONENT_NAME.xml) können Sie eine mediaDatei wie folgt deklarieren :

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

3. Bearbeiten Sie die Standardansicht (default.php) und fügen Sie diese Zeilen hinzu, um die Dateien in Joomla! Kopf:

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