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


8

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

Antworten:


7

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


2
Sie können auch JHtml::stylesheet("mod_EXAMPLE/style.css", array(), true)laden media/mod_EXAMPLE/css/style.css(das zusätzliche css/Teil beachten ) und JHtml::script("mod_EXAMPLE/script.js", false, true)laden media/mod_EXAMPLE/js/script.js(das zusätzliche js/Teil beachten ).
Flimm

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

JHtmlsollte verwendet werden, um CSS- und JS-Dateien anstelle von addStyleSheetund zu importieren addScript: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
Lodder

@Lodder Nein, sollte es nicht. Der Punkt ist, dass die Parameter von JHtml::script()und JHtml::stylesheet()geändert werden: docs.joomla.org/Potential_backward_compatibility_issues_in_Joomla_3_and_Joomla_Platform_12.2
Farahmand

@Lodder In Bezug auf Ihre Referenz :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 Die Parameter wurden nur von 2.5 geändert, um die Unterstützung für die 1.5-Methode zu entfernen. Wenn Sie die 3.x-Parameter verwenden, funktionieren sie in 2.5 einwandfrei. Nachdem Sie auch die Joomla Docs-Seite geschrieben haben, auf die Sie verwiesen haben, würde ich dringend empfehlen, JHtml zu verwenden, wenn Sie Inhalte in den Medienordner legen, damit die Benutzer Ihre Skripte einfacher überschreiben können (was mit JDocument nicht möglich ist). Obwohl, wie Sie sagen, es nicht obligatorisch ist.
George Wilson

1
@ GeorgeWilson Wie im oben genannten Link erwähnt: 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.Also J! Website-Entwickler verwenden JDocument und Entwickler von öffentlichen Erweiterungen von Drittanbietern können JHtml verwenden.
Farahmand
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.