Dokumentation

Version 4.45

ältere Versionen
Read documentation in
here

Individualisierung

Die HTML-Vorlagen-Syntax erklärt

HTML-Vorlagen sind einfache HTML-Dokumente bzw. HTML-Fragmente, die zusätzliche Anweisungen für das Einfügen bzw. Ersetzen von Inhalten enthalten.

Ein wichtiger Bestandteil in den HTML-Vorlagen sind Variablen. Diese Fragmente dienen dazu, eindeutige Inhalte auszusprechen und auszugeben. Wie man diese Variablen und weitere Syntax-Vorlagen verwendet, erklärt dieses Kapitel unserer Dokumentation.

Hinweis: Die Anweisungen für das Verwenden in HTML-Vorlagen werden in geschweiften Klammern geschrieben.

 

Variablen

Zurück nach oben

Variablen sind Platzhalter, die zum Zeitpunkt des Seitenaufrufes von der Anwendung mit konkreten Inhalten befüllt werden.

Um in einer HTML-Vorlage den Inhalt einer Variable einzufügen, schreiben Sie den Variablen-Namen in geschweiften Klammern.

Beispiele:

{eine-variable}

Die aktuelle Sprache ist: {sys:locale}

<a class="logout" href="{logout-url}">logout</a>

Eine Variable kann sowohl Text, Zahlen, assoziative oder numerische Arrays, als auch kompliziertere Daten wie verschachtelte Arrays enthalten.

Die Variablen, die in einer HTML-Vorlage konkret zur Verfügung stehen, werden durch die Anwendung definiert, je nachdem, was gerade notwendig und sinnvoll ist. Die Bezeichnungen der Variablen übernehmen Sie bitte aus den vorhandenen Vorlagen.

Automatische Variablen

Zurück nach oben

Automatische Variablen sind Variablen, deren Inhalt aus bestimmten Datenquellen ermittelt wird. Der Name dieser Variablen besteht jeweils aus einem Präfix (z.B. text), gefolgt von einem Doppelpunkt, gefolgt von einem Datenquellen-spezifischen Namen (z.b. about-manja).

{text:*} – Inhalt des benannten Textes in der vom Benutzer gewählten Sprache.

Hinweis: aus praktischen Gründen ist der Inhalt der {text:*}-Variablen bereits HTML-kodiert. Um die Kodierung rückgängig zu machen verwenden Sie ! als Präfix.

{session:*} – Inhalt des benannten Session-Parameters.

{request:*} – Inhalt des HTTP-Request-Parameters (sowohl GET- als auch POST-Parameter).

Beispiele:

{text:my-account} - wird in deutsch zu "Mein Account", in englisch zu "My Account"

{request:id} - Inhalt des Request-Parameters id.

Vorgegebene Variablen

Zurück nach oben

Die folgenden Variablen stehen in jeder Vorlage zur Verfügung.

  • sys:skin – Name des aktuellen Skins (z.B. d oder default)
  • sys:skin-path – Pfad zum aktuellen Skin
  • sys:skin-files-path – Pfad zu den Dateien (insbesondere Grafiken) des Skins
  • sys:version – Manja Version
  • sys:revision – Manja Revision
  • sys:branch – GIT Branch, aus dem die Version erzeugt wurde (i.d.R. „master“)
  • sys:builddate – Datum, an dem die Version erstellt wurde
  • sys:cutag0 – Cache Usage Tag (entspricht Manja Revision oder aktuellem Zeitstempel)
  • sys:cutag – Cache Usage Tag für Verwendung in URL-Search-Parameter (Bsp: ?2318345)
  • sys:session-is-valid – true, wenn eine gültige Server-Session vorliegt (heißt, der Benutzer ist erfolgreich eingeloggt)
  • sys:session-id
  • sys:session-cookie-name
  • sys:session-data – Assoziatives Array mit Session-Daten des Users
  • sys:is-guest-session – true, wenn Session eine Gast-Session ist, das heißt es existiert zwar eine Session, aber es ist kein realer Benutzer eingeloggt, sondern ein vom System bereitgestellter Gastaccount (s. config.ini [guest-mode])
  • sys:csrf-token – CSRF-Token
  • sys:multi-locale – true, wenn Mehrsprachigkeit in Konfiguration aktiviert ist
  • sys:locales – Array mit allen konfigurierten Ländern, Schlüssel sind die locale-Kürzel (z.B. „de_DE“), Werte sind jeweils die konfigurierten Bezeichnungen (z.B. „deutsch“)
  • sys:locale-keys – Array der Schlüssel der verfügbaren Locales (z.B. de_DE, en_GB), siehe sys:locales
  • sys:locale – vom Benutzer ausgewählte Länder-/Spracheinstellung (z.B. „de_DE“)
  • sys:language – vom Benutzer ausgewählte Sprache (z.B. „de“)
  • sys:module-spec – aktuelles Modul mit Sektion (z.B. „administration.metadata“)
  • sys:module-module – aktuelles Modul, ohne Sektion (z.B. „administration“)
  • sys:module-section – aktuelle Modul-Sektion (z.B. „metadata“)
  • sys:module-action – aktuelle Modul-Aktion (z.B. „page“)
  • sys:module-url – URL zum aktuellen Modul
  • sys:upload-limit – serverseitiges Upload-Limit in Bytes
  • sys:web-root – URL zum Web-Root-Verzeichnis der Manja-Installation (eventuell eine absolute URL, z.B. https://example.manjadigital.de/my-manja)
  • sys:web-root-path – Pfad zum Web-Root-Verzeichnis der Manja-Installation (der Pfad der URL, z.B. /my-manja)
  • sys:custom-root – Name des Custom-Verzeichnisses (z.B. „custom“ oder „custom-dev“)
  • sys:cookie-path – Pfad, der für das setzen von Cookies verwendet wird
  • sys:uwn – URL Wrapper Name, i.d.R. „manja“
  • sys:timezone – vom Benutzer ausgewählte oder automatisch ermittelte Zeitzone
  • template:wrapped-content – enthält vollständige Ausgabe der Template-Vorlage (*)
  • sys:features – Assoziatives Array der durch den Manja-Server bereitgestellten Zusatzfeatures (z.B. ssl, versioning, advanced_compare)
  • sys:ui-extensions – Assoziatives Array der aktiven UI Add-Ons (z.B. ui_expiry, ui_tos, ui_projects)
  • sys:registration-url – URL zur Registrierungsmaske, falls in Konfiguration aktiviert (siehe config.ini [registration])
  • sys:enabled-privacy-notice – true, wenn die Datenschutzerklärung in der Konfiguration aktiviert wurde (s. config.ini [app] enable_privacy_notice)

(*) Um eine vollständige HTML-Seite zu erzeugen, wird eine Kette von Vorlagen abgearbeitet. Zum Beispiel die Vorlagen: login.html und page.html. Hier wird zuerst login.html verarbeitet, dessen vollständige Ausgabe wird dann an page.html in der Variablen {template:wrapped-content} übergeben. Das spart Wiederholungen, das Seitenlayout muss nur einmal in page.html definiert werden

 

Falls ein Benutzerkonto erfolgreich am Server eingeloggt ist (und damit auch eine gültige Session vorhanden ist):

  • user:user_id
  • user:username
  • user:roles – Array mit den Rollen, die der User hat
  • user:oblivious – true, wenn Session-Daten des Benutzers nicht gespeichert werden (siehe auch sys:is-guest-session)

 

In den Vorlagen page.html und print_page.html sind zusätzlich folgende Variablen verfügbar:

  • sys:page-css-urls – Array mit URLs zu allen benötigten CSS-Dateien
  • sys:page-scripts – Array mit URLs zu allen benötigten JavaScript-Dateien
  • sys:page-scripts-texts – Assoziatives Array aller Text-Übersetzungen, die in JavaScript-Dateien sys:page-scripts verwendet werden

 

Falls Web UI Debugging aktiv ist (s. config.ini [app] enable_web_ui_debugging), sind zusätzliche Variablen definiert:

  • sys:enabled-web-ui-debugging-features – Array der aktivierten Debug-Features (z.B. no-minify, avoid-caching-js-and-css)
  • sys:web-ui-debugging-features – Array aller verfügbaren Debug-Features (z.B. no-minify, avoid-caching-js-and-css, clear-all-caches-on-server, throw-now)

Ausgabe-Konvertierungen

Zurück nach oben

Inhalte von Variablen können für die Ausgabe in ihrem jeweiligen Kontext aufbereitet bzw. kodiert werden. Zum Beispiel sollten Sonderzeichen wie < und > für die Ausgabe als HTML in die jeweiligen HTML-Entitäten konvertiert werden. Sonderzeichen in URL-Parametern erfordern auch eine spezielle Kodierung.

Mit Hilfe eines Konvertierungs-Codes vor dem Variablen-Namen wird eine Konvertierung angefordert. Es können auch mehrere Konvertierungs-Codes hintereinander angegeben werden, diese werden dann von links nach rechts verarbeitet.

Konvertierungs-Codes und deren Funktionen:

  • & – HTML/XML-Sonderzeichen
    (& zu &, < zu <, > zu >, " zu ")
  • + – wie &, aber zusätzlich werden reine Text-Zeilenumbrüche (\n) in entsprechende HTML-Zeilenumbrüche (
    \n    ) umgewandelt
  • ! – Umkehrung HTML/XML-Sonderzeichen (& zu &, usw.)
  • \ – JavaScript-Sonderzeichen (\ zu \\, " zu \", ' zu \', Zeilenumbruch zu \n)
  • % – Kodierung für URL-Parameter (nach RFC 1738)
  • - – Kodierung für URL-Parameter (nach RFC 3986)
  • # – Umwandlung in Ganzzahl (wird zu 0, falls der Inhalt nicht in Zahl konvertiert werden kann)
  • . – Gleitpunktzahl in lokalisierter Darstellung (z.B. 1.234 in de_DE: „1,234“, in en_US: „1.234“)
  • ? – Debug-Ausgabe des Inhaltes
  • ~ – Debug-Ausgabe des Inhaltes (im Gegensatz zu ? erfolgt Ausgabe direkt)
  • : – JSON-Kodierung
  • ; – Umwandlung in Javascript bool (liefert entweder true oder false)

 

Beispiele:

{some-var} 
keine Konvertierung
  
{&some-var}
Inhalt wird HTML-kodiert

<a class="foo" href="foo.php?var={%&var}">foo</a>
Inhalt wird zuerst URL-kodiert, dann HTML-kodiert

{?complex-data}
Inhalt wird strukturiert mit Details (wie z.B. Datentypen) ausgegeben

<script>
var hello = "{!\text:hello}";
var complex_data = {:complex-data};
</script>

Zugriff auf Array-Elemente

Zurück nach oben

Mit Hilfe der rechteckigen Klammern kann auf einzelne Array-Elemente zugegriffen werden. Sowohl in assoziativen, als auch in indizierten Arrays.

Der Schlüssel kann ein String, eine Ganzzahl oder eine Variable sein.

Beispiele:

{sys:locales[de_DE]}

{some-list[0]}

{some-list[{some-number}]}

{some-array[{some-key}][0]} 
Eine Verschachtelung ist seit Manja 4.1 möglich.

Kommentare

Zurück nach oben

Nicht interpretierte Bereiche beginnen mit {{ und enden mit }}.

Innerhalb nicht interpretierter Bereiche werden geschweifte Klammern nicht mehr als Vorlagen-Anweisungen interpretiert. Dies ist zum Beispiel hilfreich, um darin JavaScript-Code einzuschließen, der selbst geschweifte Klammern nutzt.

Beispiel:

<script type="text/javascript">
//{{
  function foo() {
    alert("Hello world!");
  }
//}}
</script>

<div class="x">
{{
  if( foo ) {
    code();
  } else {
    json = {
      "key1": { one: "foo", "two": bar },
      "key2": [ 1, 2, 3 ]
    };
  }
}}
</div>

Bedingungen (if, else)

Zurück nach oben

Bedingungen starten mit {if, gefolgt von einer Bedingung, gefolgt von einem Block, der nur dann verarbeitet wird, wenn die Bedingung wahr ist, gefolgt von einer abschließenden geschweiften Klammer }.

Optional kann auch ein else-Block hinzugefügt werden, der nur dann verarbeitet wird, wenn die Bedingung unwahr ist.

Bitte beachten: zwischen dem else und den geschweiften Klammern darf kein Leerzeichen oder Zeilenumbruch geschrieben werden.
Falsch: } else {, Korrekt: }else{.

Beispiele:

{if {sys:session-is-valid}
  Hallo {&user:username}!
}

{if {sys:session-is-valid}
  Hallo {&user:username}!
}else{
  Bitte zuerst einloggen.
}

Ausdrücke

Zurück nach oben

Zum Vergleichen und Auswerten der Inhalte von Variablen stehen einfache Ausdrücke zur Verfügung. Diese liefern jeweils ein boolesches Ergebnis (true,false), und sind vorwiegend für die Verwendung in {if-Blöcken gedacht.

Die Ausdrücke beginnen mit {$(, gefolgt von einem Ausdruck, gefolgt von einem abschließenden )}.

Ein Ausdruck ist zusammengesetzt aus Operanden und Operatoren. Ein Operand kann ein Text, eine Zahl, eine Variable oder ein weiterer Ausdruck sein. Ausdrücke können mit Hilfe einfacher Klammern beliebig verschachtelt werden.

Die verfügbaren Operatoren sind:

  • == gleich
  • != ungleich
  • <= kleiner gleich
  • >= größer gleich
  • < kleiner
  • > größer
  • && boolesches und
  • || boolesches oder
  • ! boolesche Negierung

Beispiele:

{if {$({sys:locale}==de_DE)}
  es wird die locale de_DE verwendet
}

{if {$({selected-user}=={user:user_id})}
  der gewählte user ist der aktuelle user
}

{loop {sys:locales}
  <a href="{sys:module-url}?locale={loop:key}" class="flag{if{$({loop:key}=={sys:locale})} active}">
    <img src="{sys:skin-files-path}/flag_{loop:key}.png"
         width="20" height="12" alt="{loop:value}" title="{loop:value}" />
  </a>
}

{if {$( !{some-var} )}
  Inhalt der Variable "some-var" ist leer, 0 oder false.
}

{if {$( {A} && !{B} )}
  A ist true, B ist false.
}

{if {$( {user:roles[manager]} && {user:roles[administrator]} )}
  User ist sowohl Manager als auch Administrator.
}

{if {$( {user:roles[user]} && ( {user:roles[manager]} || {user:roles[administrator]} ) )}
  User ist sowohl regulärer Benutzer als auch Manager oder Administrator (oder beides: Manager und Administrator).
}

Schleifen (loop)

Zurück nach oben

Mit Hilfe des Schleifen-Konstruktes können alle Elemente eines Arrays durchlaufen werden. Schleifen starten mit {loop, gefolgt von der Array-Variablen, gefolgt von einem Block, der für jedes Element des Arrays wiederholt werden soll, gefolgt von einer abschließenden geschweiften Klammer }.

Beispiel:

<ul>
  {loop {sys:locales}
    <li>key={loop:key}, value={loop:value}</li>
  }
</ul>

Innerhalb des Schleifenblocks stehen zusätzliche Variablen zur Verfügung:

  • loop:key – Schlüssel des aktuellen Array-Elements (numerisch bei indizierten Arrays, Text bei assoziativen Arrays)
  • loop:value – Wert des aktuellen Array-Elements (kann beliebige Daten, beliebige Typen enthalten)
  • loop:odd – Wert 1 wenn ungerader Schleifendurchlauf, ansonsten 0
  • loop:even – Wert 1 wenn gerader Schleifendurchlauf, ansonsten 0
  • loop:first – Wert 1, wenn erster Schleifendurchlauf, ansonsten 0
  • loop:last – Wert 1, wenn letzter Schleifendurchlauf, ansonsten 0

Wenn der Wert des aktuellen Array-Elementes selbst ein assoziatives Array ist, dann steht dessen Inhalt innerhalb des Schleifenblockes über einfache Variablen zur Verfügung.

Beispiel:

<table>
 <tr>
  <th>User ID</th>
  <th>Username</th>
  <th>First Name</th>
  <th>Last Name</th>
 </tr>
 {loop {userlist}
  <tr>
   <td>{&loop:key}</td>
   <td>{&username} (oder auch: {&loop:value[username]})</td>
   <td>{&first-name}</td>
   <td>{&last-name}</td>
  </tr>
 }
</table>

Aliase

Zurück nach oben

Aliase starten mit {alias, gefolgt von dem jeweils zu verwendenden Alias-Namen, gefolgt vom Ausdruck, der die eigentlichen Daten für das Alias liefert, gefolgt von einer abschließenden geschweiften Klammer }.

Innerhalb des Alias-Blockes stehen die entsprechenden Daten unter dem als Alias-Namen definierten Namen zur Verfügung.

Beispiel:

{/*
  Angenommen, "persons" enthält folgende Daten:
  {
    "person-x": {
      "first-name": "First",
      "last-name: "Last",
      "phone": "12345"
    },
    "person-y": ...
  }
*/}

{alias x {persons[person-x]}
  Name: {&x[first-name]} {&x[last-name]},
  Tel: {&x[phone]}
}

Sonderfall: Anonyme Aliase

Wird vor dem Ausdruck kein Alias-Name angegeben, und liefert der Ausdruck als Daten ein assoziatives Array, dann stehen dessen Schlüssel als eigene Variablen innerhalb des Alias-Blockes zu Verfügung.

Beispiel:

{alias {persons[person-x]}
  Name: {&first-name} {&last-name},
  Tel: {&phone}
}

Literale

Zurück nach oben

Literale Starten mit {literal:, gefolgt von beliebigem Text als Wert, gefolgt von }.

Ein Literal-Ausdruck wird direkt zu seinem eingegebenen Wert evaluiert. Der Literal-Ausdruck kann dort verwendet werden, wo zwar ein Ausdruck erforderlich ist, aber ein Wert direkt angegeben werden soll.

Z.B. um in einem Alias einen einfachen Wert anstatt des Ausdruckes zu verwenden.

Das leere Literal {literal:} ist erlaubt und evaluiert zu einem leeren String.

Beispiel:

{/*
  Sie möchten ein Template "my-thumbnail.html" mit Parameter size aufrufen:
*/}

{alias size {literal:120}
    {include:my-thumbnail}
}

{alias size {literal:240}
    {include:my-thumbnail}
}

PHP-Code-Blöcke

Zurück nach oben

Dort, wo die per Vorlagensyntax bereitgestellten Mechanismen nicht Ihren zur Darstellung oder Aufbereitung der Daten notwendigen Mechanismen genügen, gibt es die Möglichkeit, aus der Vorlagensyntax auszubrechen, und die Anforderungen in klassischem PHP-Code zu formulieren.

Um die Kompatibilität und upgradefähigkeit Ihrer Anwendung nicht zu gefährden, sollte dies immer das letzte Mittel der Wahl sein.

Syntax: {<? startet einen PHP-Code-Block, beendet wird dieser mit ?>}.

Oder alternativ startet der PHP-Code-Block mit {<?=, womit gleichzeitig ein echo impliziert wird.

Innerhalb dieses Blockes stehen Ihnen die zuvor definierten für die jeweilige HTML-Vorlage vorgesehenen Variablen indirekt über das PHP-Array $d zur Verfügung.

Beispiele:

{/*
  Gebe den Inhalt der Variable some-id als 8-stellige Zahl mit führenden Nullen aus.
*/}

{<? echo sprintf('%08d',$d['some-id']); ?>}

{<?=sprintf('%08d',$d['some-id'])?>}

Weitere Vorlagen einbinden (include und fast-include)

Zurück nach oben

Mit Hilfe der include-Anweisung können andere Vorlagen eingebunden werden. Die Anweisung beginnt mit {include:, gefolgt vom Namen der Vorlage (ohne .html), gefolgt von einer abschließenden geschweiften Klammer }.

Die Anweisungen der eingebundenen Vorlage werden ausgeführt, das fertige HTML-Fragment wird an Ort und Stelle ausgegeben. Innerhalb der eingebundenen Vorlage stehen die gleichen Variablen wie in der aktuellen Vorlage zur Verfügung.

Zusätzlich gibt es noch die sogenannte „fast-include“-Anweisung, die immer dann benutzt werden sollte, wenn eine Vorlage sehr oft wiederholt inkludiert werden muss (z.B. für jede einzelne Zeile einer Datentabelle). Bei fast-include werden (im Gegensatz zum normalen include) alle Add-On-spezifischen Hooks ignoriert, was die Ausführungszeit deutlich verbessern kann.

Die Add-On-spezifischen Hooks reagieren ausschließlich auf die in der Standard-Distribution enthaltenen und bekannten Vorlagen (wie z.B. „page-menu.html“, „page-header.html“, u.Ä.). Eigene Vorlagen können Sie daher immer per fast-include einbinden.

Beispiele:

{include:some-fragment}

{fast-include:some-fragment}

{loop {userlist}
  {fast-include:user-fragment}
}

JavaScript Dateien einbinden

Zurück nach oben

In einer Vorlage kann das einbinden von JavaScript-Dateien angefordert werden. Die Dateien werden im HTML als <script>-Tags eingebunden.

1. einzelne Datei einbinden: {use-js-file:path-to-filename}

path-to-filename – Pfad der Datei, relativ zum Verzeichnis „web/public“ der Manja-Installation.

2. Optimiertes Set einbinden: {use-js-set:set-name}

set-name – Name eines definierten Sets.

Unter anderem diese Sets sind in Manja vordefiniert:

  • mjs.base – enthält alle minimal notwendigen externen Libraries,
  • mjs.page – weitere externe Libraries sowie Manja Basis Libraries,
  • mjs.media – alles innerhalb des „Medien“-Bereichs notwendige,
  • mjs.mmgmt – alles für Manager/Bearbeiter-Funktionen innerhalb des „Medien“-Bereichs notwendige,
  • mjs.madmin – alles für Administrator-Funktionen innerhalb des „Medien“-Bereichs notwendige,
  • mjs.acctmgmt – gemeinsamer Code für Kontenverwaltung in Bereichen „Administration“ und „Mein Konto“,
  • mjs.admin – alles innerhalb des „Administrator“-Bereichs notwendige,
  • ckeditor – CKEditor (3rdparty/ckeditor/ckeditor.js),
  • code-editor – js/manja/mj.code-editor-widget.js und Abhängigkeiten (diverse aus 3rdparty/CodeMirror/)

3. Optimiertes Set erstellen und einbinden: {use-js-set:set-name[:dep1,dep2,...]:file1[,file2,..]}

  • set-name – Name des neuen Sets,
  • dep.. – Pfad oder Name einer einzubindenden Datei,
  • file.. – Pfad oder Name einer optimiert einzubindenden Datei.

Für Einträge sowohl unter dep.. als auch file.. gilt:

A) Pfad:

  • mit vollständigem Pfad zur Datei (relativ zum Verzeichnis „web/public“ der Manja-Installation),
  • ohne Pfad – wobei dann der Pfad „web/public/js/“ angenommen wird.

B) Suffix:

  • mit Suffix: die angegebene Datei wird verwendet,
  • ohne Suffix: falls vorhanden wird die Datei name.min.js anstatt name.js verwendet.

Dateien unter dep.. werden immer direkt und einzeln eingebunden.

Dateien unter file.. werden optimiert: die Dateien des Sets werden zu einer einzigen Datei zusammengefügt und minifiziert.

Dateien unter file.. können zusätzlich mit Prefix + angegeben werden, um eine weitere Vorverarbeitung zu aktivier: In den so gekennzeichneten Dateien werden Platzhalter für lokalisierte Texte erkannt und beim verwenden werden im Browser die entsprechenden Texte geladen und bereitgestellt.

Beispiele:

{use-js-file:custom/files/my-script.js}

{use-js-set:code-editor}

{use-js-set: mjs.my-custom-set:
  custom/files/3rdparty/external-lib.js,
  custom/files/3rdparty/another-external-lib.js
  :
  custom/files/my-lib,
  custom/files/my-other-lib.js
}

{use-js-set: mjs.my-custom-set:
  custom/files/my-lib,
  custom/files/my-other-lib.js
}

CSS/Less-Dateien einbinden: {use-styles:name}

Zurück nach oben

In einer Vorlage kann das Einbinden von CSS/Less-Dateien angefordert werden. Die Dateien werden im HTML letztendlich über <style> Tags integriert.

name ist der Name der CSS/Less-Datei.

Wenn der Name mit Suffix .css oder vollständigem Pfad (relativ zum Verzeichnis „web/public“ der Manja-Installation) angegeben ist wird die entsprechende Datei direkt verwendet.

Falls weder Suffix noch Pfad angegeben sind, werden folgende Dateien – passend zum Namen und jeweiligen Skin – geprüft:

1. im Skin: public/skin/<skin-name>/f/<name>.less
2. im Skin: public/skin/<skin-name>/f/<name>.<locale>.less
3. in Add-Ons: ext/<addon-name>/skin/d/f/<name>.less
4. in Add-Ons: ext/<addon-name>/skin/d/f/<name>.<language>.less
5. in Add-Ons: ext/<addon-name>/skin/d/f/<name>.<locale>.less
6. im Custom-Folder: public/custom/<name>.less
7. im Custom-Folder: public/custom/<name>.<language>.less
8. im Custom-Folder: public/custom/<name>.<locale>.less

Die gefundenen .less-Dateien werden zu .css-Dateien kompiliert, minifiziert und in wenige optimierte CSS-Dateien zusammengefasst, und im HTML als <style>-Tags eingebunden.

Beispiele:

{use-styles:my-styles}
evt. vorhandene custom/my-styles.less, custom/my-styles.de_DE.less usw.
werden zu .css kompiliert und verwendet.

{use-styles:custom/my-styles.css}
ausschließlich die Datei custom/my-styles.css wird verwendet.

JavaScript/HTML/Template-Mix Best Practices

Zurück nach oben

Umfangreicher JavaScript-Code sollte in eigene Dateien ausgelagert werden, und per {use-js-set:*} oder {use-js-file:path-to-filename} eingebunden werden.

Für best-mögliche Darstellung des Mixes aus HTML, JavaScript und Manja-Template-Syntax in Editoren und IDEs empfehlen wir folgendes:

1. Inline-JavaScript-Code in Templates als „nicht interpretierter Bereich“ per {{ und }} umschließen und per einzeiligem JavaScript-Kommentar zu valider JavaScript-Syntax machen:

<script>
//{{
  alert("Hello World");
//}}
</script>

2. Template-Daten für JavaScript-Code in speziellem Script-Block <script type="text/x-mj-tmpl-javascript"> bereitstellen.

Blöcke mit Typ text/x-mj-tmpl-javascript werden im generierten HTML als einfache JavaScript-Blöcke ausgegeben.

Vorteil: Editoren und IDEs ignorieren den Inhalt (versuchen nicht es als JavaScript zu interpretieren).

<script type="text/x-mj-tmpl-javascript">
var some_id = {#some-id};
var some_text = "{\some-text}";
var some_object = {:some-object};
</script>

<script>
//{{
  console.log({some_id,some_text,some_object});
//}}
</script>