Fragen zum Schreiben von Joomla4-Templates?

  • Hallo,


    kennt ihr Seiten, die sich mit dem Schreiben von Joomla4-Templates beschäftigen?


    Meine Frage soll sich aber nicht auf grundlegende Dinge wie die templateDetails.xml, Modulpositionen, Felder/Parameter usw. beziehen.

    Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.


    Bei J3 wird ja oft ein php- oder auch inc-Verzeichnis innerhalb des Template-Verzeichnisses angelegt, in welchem sich die Dateien für die verschiedenen Tabs befinden.


    Im atum wird da wohl die /Service/html/atum.php verwendet. Cassiopeia hat keine zusätzlichen Tabs. Welche Datei baut da eigentlich den Tab auf?


    Gibt es in J4 eine bestimmte Vorgehensweise, die sich anbietet, oder kann man das händeln wie man möchte?

  • Hallo,

    Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.

    ähnliche Frage hier: https://issues.joomla.org/tracker/joomla-cms/31091

    und da gibt's wohl noch mehr davon :-)

    Wegen Cassiopeia: So viel ich weiß, ist firstlady da in einer Arbeitsgruppe.


    Liebe Grüße

    Christine


    ergänzend: https://issues.joomla.org/tracker/joomla-cms/30376

  • Das ganze SCSS-Thema wollte ich erst einmal außen vor lassen und mich frühstens mit Erscheinen von J4 Stable damit beschäftigen. Das ist einfach zu komplex.

    Für den Anfang sollte nur die Möglichkeit gegeben sein, den ein oder anderen Werte im Template-Stil ändern zu können.

    Deshalb suche ich nach dem optimalen Vorgehen, ein Template diesbezüglich zu erweitern.

  • Grundlegend hat sich da nichts geändert.

    - Die Tabs erzeugst du in der templateDetails.xml indem du fieldsets innerhalb

    Code
    <fields name="params">

    anlegst und unterschiedliche name="" vergibst. So wie schon immer.

    -

    /Service/html/atum.php

    ist eine andere Geschichte. Das sind JHtml-Helper-Methoden (jetzt HTMLHelper-Methoden), die dann später in der index.php verwendet werden können, um die im Backend gespeicherten Farbwerte in irgendeiner veränderten Form als CSS-Block in den <HEAD> einzusetzen. Also für die Ausgabe.


    Zuerst werden diese Helper-Methoden in der Datei /HTML/Atum.php mit Klasse JHtmlAtum verfügbar gemacht. Pfadangaben kann man sich in diesem Fall sparen, da Joomla sie in dem o.g. Service-Ordner sucht.

    Code
    HTMLHelper::getServiceRegistry()->register('atum', 'JHtmlAtum');

    Dann die $params des Templates, die der User im Backend gespeichert hat, der Methode rootcolors() übergeben.


    Code
    HTMLHelper::_('atum.rootcolors', $this->params);


    Die ist nur dafür da, statt "normales" CSS einzusetzen, die in "modernes" CSS umzuwandeln, also CSS-Variablen (z.B. --atum-bg-light:) zu verwenden und umzurechnen, falls nötig.


    Am Ende der Funktion findest dann die 2 Zeilen, mit dem bescheuerten WebAssetManager, die nix anderes machen, als den CSS-Block inline ins Template einzusetzen. Das ist das Analogon zu $doc->addStyleDeclaration bzw. $this->addStyleDeclaration .


    Ergibt dann z.B. im Seitenquelltext

    Code
    <style nonce="NTgwZ...">:root {--atum-bg-dark: #4e1353;--atum-contrast: #42249e;--atum-bg-dark-0: #e8e8e8;--atum-bg-dark-5: #d9d9d9;--atum-bg-dark-10: #c9c9c9;--atum-bg-dark-20: #ababab;--atum-bg-dark-30: #908093;--atum-bg-dark-40: #7a5181;--atum-bg-dark-50: #6a2871;--atum-bg-dark-70: #390d3a;--atum-bg-dark-80: #210820;--atum-bg-dark-90: #0d030c;--atum-bg-light: #f0f4fb;--toolbar-bg: #ffffff;--atum-text-dark: #495057;--atum-text-light: #ffffff;--atum-link-color: #2a69b8;--atum-link-hover-color: #173964;--atum-sidebar-link-color: #132f53;--atum-special-color: #001b4c;}</style>

    und ist ein Override der CSS-Variablen-Werte in der template.css.


    - Kurz: Tabs baust genauso auf, wie früher.

    - Stinknormale Joomla-Form-Felder.

    - Die HMTLHelper-Methoden sind rein optional, wenn du meinst, bei der Ausgabe von irgendwas lieber eine (oder mehrere) externe Dateien verwenden zu wollen/müssen. Hier halt für Farbberechnungen.


    Und hat's früher auch schon gegeben, aber der Pfad musste noch extra angegeben werden.


    Allerdings nicht so üblich in Templates, die meist mit require und include irgendwas eingebunden haben oder mit JLoader. Oder diese Helper in einem Framework-Plugin haben oder... All das geht aber auch in Joomla 4 noch.

  • Konkret geht es mir darum, wie man in der Template-Stil-Ansicht eines Templates zusätzlich zum Tab "Advanced" (Erweitert) weitere Tabs ergänzen kann, um dem Anwender bestimmte Optionen zur Verfügung zu stellen (z.B. Farbvarianten u.s.w). Das Ergänzen der templateDetails.xml ist schon klar.

    ich hoffe ich verstehe dich richtig.


    Nimm die templateDetails.xml von Cassiopeia.



    Wenn du hier ein Fieldset einfügst, dann hast du das zusätzliche Tab.


    Ich habe den folgenden Code am Ende ergänzt.




    Also so


    Das sieht dann in etwas so aus:




    Sprachdateien zur Übersetzung erstellst du wie gehabt. Und wie du auf die neuen Parameter zugreifst, kannst du an den vorhanden abgucken.

  • .... Allerdings nicht so üblich in Templates, die meist mit require und include irgendwas eingebunden haben oder mit JLoader. Oder diese Helper in einem Framework-Plugin haben oder... All das geht aber auch in Joomla 4 noch.

    Ok, Danke! Ich hatte mich an Templates orientiert, die mit require und include arbeiten. Aber jetzt ist mir der Hintergrund dieser atum.php klar geworden.


    .... Wenn du hier ein Fieldset einfügst, dann hast du das zusätzliche Tab.

    Meine Frage geht eigentlich darüber hinaus (was allerdings aus meiner Fragestellung gar nicht hervor ging, wie ich nun bemerkt habe ;)):

    Angenommen ich möchte innerhalb eines Tabs ein Menü erstellen, oder bestimmte grafische Elemente hinzufügen. Wie realisiere ich das am sinvollsten? Im Prinzip ein kleines Framework. Da geht es mir nur um die Grundstruktur und keine Details.

  • Ein Framework-Plugin bzw. -Library brauchst nicht unbedingt. Die Templates von joomla51 arbeiten mit eigenen Formularfeldern in der templateDetails, die sich meist im Ordner /elements/ befinden. Laden halt u.a. eigenes JS und CSS dazu. Das JS um jeweils die linken Menüs im Tabulator zu bauen bzw. bedienbar zu machen. Als Beispiel habe ich gerade J51-Robyn vor mir.


    So was wie das Astroid-Framework (Library und Plugin), das es auch schon für Joomla 4 gibt, geht seinen eigenen Weg. Hat im Template nur ein einziges Feld, das per Klick dann eine hoch komplexe Oberfläche, also "abgekoppelt" von Joomla-Standards lädt. Inklusive einem Layout-Builder.


    Generell ist das aber hoch komplex, auch, bis man dann die Möglichkeiten raus hat, die innerhalb der Frontend-Ausgabe alle möglich sind, weil die mitgebrachten Demo-Plugins dazu nur wenig drinnen haben. Ich hatte das "Glück" mich da mit einem Pro-Template einarbeiten zu können, wo die index.php weitaus mehr zeigt.


    Bin nicht sicher, ob hier relevant. Irgendwo habe ich aufgeschnappt, dass man in Joomla auch mit "nested" <fieldset> arbeiten kann, die man dann per CSS positionieren kann.


    Mir alles zu aufwändig zu pflegen, um Nutzern so einen Luxus zu bieten ;-)

  • Das Astroid habe ich mir gestern mal angeschaut und ein paar Videos dazu. Ist wirklich ein "Mordsding".


    Was simples Schlichtes ist mir da ehrlich gesagt lieber, schon allein aus Gründen des Aufwands bei der Pflege. Aber ein wenig mehr als das Cassiopeia sollte es schon können. Aber möglicherweise wird C. noch um die ein oder andere Option ergänzt.

    Da muss ich mich jetzt mal "reinarbeiten".