Templateneuerungen verstehen

    Hi,


    ich beschäftige mich momentan vorab mit Templatebau in Joomla 4. Grundsätzlich hat sich im Vergleich zu J3 nichts geändert, die Struktur und der Aufbau eines Templates sind identisch.


    Neu hinzu gekommen ist z.B. ein sog. Web Asset Mananger. Da bin ich gerade dabei den Sinn dessen zu verstehen. Wie die Web Assets grundsätzlich funktionieren ist schon klar, aber der Sinn des ganzen... Da ich mich beim eigenen Template am Template cassiopeia orientiere, bin ich auf ein paar neue Anweisungen gestoßen, wo ich einfach nichts zu finden kann, was sie denn bedeuten. In J3 hab es die Anweisung


    Code
    <jdoc:include type="head" />


    Diese ist aus cassiopeia raus und stattdessen findet man Anweisungen wie diese hier


    Code
    <jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />


    Kann mir jemand sagen wie diese Anweisungen funktionieren bzw. was sie bewirken.



    MfG

    Sorry, du hast recht. Ich hatte zu schnell gelesen und das Codebeispiel nicht genau genug angesehen. Ich habe nur Web Asset Manager gelesen .)


    Wenn ich das richtig verstanden habe, hat man das eine Tag in drei aufgeteilt, um flexibler zu sein. So kann nun man nun im Template Code zwischen <jdoc:include type="styles" /> und <jdoc:include type="scripts" /> einfügen oder vielleicht sogar die Skripte im Fußbereich laden.

    Der Code wurde hier geändert:

    https://github.com/joomla/joomla-cms/pull/15186

    Das Splitten hat nicht unmittelbar mit dem WebAssetManager zu tun.


    Alle drei Zeilen zusammen machen das selbe wie "head". Probleme bekommst du u.U. , wenn du Erweiterungen verwendest, die darauf nicht vorbereitet sind, dass z.B. die Scripts am Ende der Seite geladen werden (wie es bspw. das Atum-Template macht). Es ist aber grundlegend egal, ob die Scripts per JHtml/HTMLHelper-Methoden (bzw. addScript() und ähnliche) oder WebAssetManager gesammelt werden.


    Grundlegendes Problem, unabhängig von den 3 neuen jdocs, ist, dass der WebAssetManager in Teilen inkompatibel mit altbekannten JHtml/HTMLHelper-Methoden zum Sammeln von Assets ist, aber trotzdem beide in Joomla 4 noch drinnen sind, also Entwickler verleiten bei den alten Methoden zu bleiben. Bzw. richtiger, dass durch den WAM Teile des alten Codes inkompatibel und ohne Not verändert wurden.

    Ok, die Anweisung <jdoc:include type="metas" /> ist klar. Sie lädt halt die benötigten Meta-Angaben für die Seite.


    Die beiden Anweisungen <jdoc:include type="styles" /> und <jdoc:include type="scripts" /> haben aber bei mir keinerlei Wirkung. Was bewirken diese Anweisungen bzw. wie kann man mit diesen Anweisungen die entsprechenden CSS und JS-Dateien laden oder bewirken sie etwas ganz anderes?

    "styles" lädt CSS-Dateien und <style>-Blöcke in das Template.

    "scripts" lädt JS-Dateien und <script>-Blöcke in das Template.


    Natürlich müssen sie irgendwo im Program-Ablauf von Joomla von irgendeiner Erweiterung "angefordert" worden sein. Plugin, Komponente, Modul und/oder Template oder sonstwas.


    Wenn du also zum Test ein "mod_finder" mit Grundeinestellungen an einer Modulposition veröffentlichst solltest du im Seitenquelltext mindestens so was in der Art finden


    Dort wo zuvor "scripts" war

    Code
    <script src="/media/com_finder/js/finder.min.js?56e617cd67fdaa35ebc87f4a78dc0982" defer></script>
    <script src="/media/vendor/awesomplete/js/awesomplete.min.js?1.1.5"></script>

    und so was in der Art mit Hinweisen auf MOD_FINDER im folgenden Kuddelmuddel

    Code
    <script type="application/json" class="joomla-script-options new" nonce="MDQwZWE3N2Q5YjYyMzFkY ... Kuddelmuddel ...

    Dort wo zuvor "styles" war

    Code
    <link href="/media/vendor/awesomplete/css/awesomplete.css?1.1.5" rel="stylesheet" />

    Weil diese Über-3-Ecken-Hieroglyphen das laden:

    https://github.com/joomla/joom…/tmpl/default.php#L46-L49


    https://github.com/joomla/joom…/tmpl/default.php#L56-L60

    Ok danke, soweit verstanden.


    D.h. aber, das ich eigene CSS- und JS-Dateien für mein Template darüber nicht laden kann sondern muss dies über einen anderen Weg machen? Z.B. über die Webassets oder halt wie in J3? Sehe ich das richtig? Was wäre der beste Weg eigene Dateien zu laden?

    Zitat von neoman666

    D.h. aber, das ich eigene CSS- und JS-Dateien für mein Template darüber nicht laden kann sondern muss dies über einen anderen Weg machen? Z.B. über die Webassets oder halt wie in J3? Sehe ich das richtig? Was wäre der beste Weg eigene Dateien zu laden?

    Der beste Weg ist, es mit den Joomla-Methoden zu machen. Da diese im Hintergrund sich um weitere Dinge kümmern, wie z.B. doppeltes Laden verhindern, richtige Reihenfolge der Dateien und Blöcke. Außerdem ermöglichst du es den Benutzern bei korrekter Verwendung der Joomla-Methoden, z.B. in einem Modul, Template-Overrides zu erstellen.


    Bei mir mit eventuellen Ausnahmen. Da die Reihenfolge des Ladens abhängig davon ist, wann, welcher Code, seine Lade-Codes abgesetzt hat, kann es also sein, dass ich z.B. eine CSS-Datei, die ich unbedingt im Template als letzte haben will, auch mal händisch in's Template einsetzte oder mit einem JLayout. Das sind dann aber Assets von denen ich sicher bin, dass sie keine andere Erweiterung auch lädt. Würde ich sie mit den Standard-Methoden einsetzen habe ich nicht immer Gewähr, dass sie als letztes im Template erscheint. Bspw., wenn ein System-Plugin in einem onBeforeCompileHead() noch etwas danach dazulädt. Ein Bootstrap-CSS wäre hier aber sicher falsch, weil sie doppelt geladen werden könnte, wenn ich sie händisch reinquäle.


    Den WAM kann man meines Erachtens aber auch ohne json-Datei verwenden. Bin aber noch nicht ganz durch mit dem Mistding (das schlicht Mehrarbeit ist, wenn man etwas trickiger agieren will ;) ).


    Nur noch als Hinweis. Wenn eine eigene JS-Datei beispiel.js z.B. JQuery benötigt, sollte man immer davor auch diese Abhängigkeit "abfeuern". Hier jetzt mit J3 als Beispiel und gekürzt(!).

    Code
    JHtml::_('jquery.framework');
JHtml::_('script', 'beispiel.js');

    Da bist du bei dem Vorteil. dass die Joomla-Methoden (WAM oder JHtml oder addScript() usw. usf.) doppeltes Laden verhindern. Jeder andere Code kann auch so JQuery anfordern. beliebig oft. Trotzdem wird deine danach geladen und JQuery nur ein mal.


    Vielleicht hilft dieser Joomla-3-Artikel etwas weiter. Die aktualisierte Version ist leider noch in Arbeit. Das Grundlegende stimmt aber so noch.

    https://ghsvs.de/programmierer…mla-3-templates-verstehen

    Danke erstmal für deine ausführlichen Hilfen. Mir bleiben also zwei Möglichkeiten, eigene CSS- und JS-Dateien zu laden. Zum einen wäre da die JHtml-Methoden und zum anderen der neue WebAssetManager. Da ich mit beiden wenig Erfahrungen habe, fällt es mir schwer, das richtige von beiden zu wählen. In J3 habe ich CSS-Dateien mit addStyleSheet() und JS-Dateien mit addScript() geladen. Da ich nicht nur ein oder zwei Dateien benötige, sondern eine ganze Menge, hatte ich auch entsprechend viele addStyleSheet() und addScript() Anweisungen in meinem Template. Wenn ich nun die JHtml-Methoden verwende, habe ich wieder genau so viele Anweisungen in meinen Template. Oder gibt es da Vorteile von JHtml gegenüber den anderen beiden Aweisungen?


    Da scheint mir der neue WebAssetManager einige Vorteile zu bieten, denn die Anweisungen werden ja in dieser json-Datei ausgelagert und man lädt die benötigten CSS- und JS-Dateien mit ein bis zwei Zeile Code ins Template.


    Ist das ein möglicher Ansatz oder liege ich hier falsch mit meiner Denkensweise?

    Die JHtml-Methoden, über die wir hier reden, sind ja (fast) nichts anderes als die addXyz()-Methoden; nur nebenbei.


    Problem von WAM ist, dass die betreffenden JHtml-Methoden bzw. addXyz()-Methoden nicht konsequent abgeschafft wurden.

    So kann es zu Konflikten kommen.


    Für ein neues Template für Joomla 4: Verwende den WAM!

    Die Konflikte, die evtl. durch andere Erweiterungen auftreten, kannst du so oder so nicht templateseitig verhindern.

    Muss nochmal zum Thema Web Asset Manager was fragen. Bei dem Teil sehe ich nicht so recht durch.


    Ist es möglich, die Reihenfolge der zu ladenden Dateien, also für js und css festzulegen? Egal wie ich die Reihenfolge in der json-Datei und auch in der index.php des Templates festlege, die Dateien werden immer in der gleichen willkürlichen Reihenfolge gerendet/geladen.


    Wo gibt es mehr Infos zum Gebrauch des WAM? Diese Seite hier kenne ich, hilft aber nicht wirklich weiter...

    Zitat von neoman666

    Bei dem Teil sehe ich nicht so recht durch

    Das war der erste Kritikpunkt an dem Ding, lange bevor ich das meckern angefangen habe.


    Die Reihenfolge kannst du ebensowenig ändern wie zuvor. "Wer zuerst im Joomla-Ablauf was anfordert, mahlt zuerst". Der Wunsch, bei den Aufrufen auch eine Art Priorität angeben zu können wurde logischerweise verworfen, weil ja jede Erweiterung dann irgendwelche Prioritäten setzen kann, die der anderen nicht passen.


    Es gäbe angeblich die Möglichkeit, wenigstens per eigenem Plugin einzugreifen. Schon der Versuch, einfach zu debuggen, was im Plugin von dem WAM-Schrott eigentlich ankommt, führt zu Seitenabsturz. Ich habe erst mal aufgegeben...

    Hm, das klingt ja nicht so gut. Warum wird dann sowas "unausgereiftes" implementiert? Egal, hab mich nun einigermaßen mit dem Teil arragiert, meine Scripte werden nun geladen, nur die Reihenfolge stimmt halt nicht. Solange das gut geht und keine Fehler erzeugt, lasse ich es nun so, andersfalls muss ich auf die alten Methode zurück greifen.

    Hallo neoman666,


    die Reihenfolge kann schon beeinflusst werden und zwar über die json Datei. Dort gibt es die Möglichkeit für jeden Asset ein Abhängigkeit (dependencies) festzulegen. Ansonsten gilt first come first serve.

    Na ja, die Dependencies sind unter Joomla 3 halt in den JHtml-Helpern, also PHP, festgelegt. "Lädst du Bootstrap, brauchst halt zuvor auch JQuery (Dependency)". Hat aber ein Modul zuvor schon JQuery geladen, bleibt JQuery weiter vorne im <HEAD>.

    Da sehe ich keinen Unterschied beim WAM. "Was schon ist, braucht nicht noch mal".


    Und das Template ist halt im Ablauf erst sehr spät dran mit seinen JHtml- bzw. WAM-Geschichten.