Partials-Referenz

Partials sind kleine, wiederverwendbare Code-Schnipsel, die Sie in der Seitenvorlage oder in Widgets über den Befehl system.partial verwenden können.

In diesem Kapitel erfahren Sie, welche Partials bereits "ab Werk" vorhanden sind und wie Sie diese nutzen können.

An Partials können Sie Parameter übergeben. Diese Parameter werden entweder als sogenannte "named Parameter" ("name1":"wert1", "name2":"wert2"…) oder als Parameter-Liste ("wert1", "wert2"…) übergeben. Bei Parameter-Listen muss man die Reihenfolge der Parameter einhalten und kann Parameter nur am Ende der Liste auslassen (nicht zwischendrin, weil dann die Reihenfolge durcheinander käme).

Eigene Partials erstellen

Sie können auch eigene Partials erstellen. Partials haben immer die Dateierweiterung ".html" und beinhalten HTML-Code, der mit JavaScript angereichert werden kann.

Damit Partials gefunden werden, müssen die Dateien sich in einem Ordner "partials" befinden der sich im Ordner "templates" des jeweiligen Layouts befindet.

Layout-Partials haben gegenüber globalen Partials (mit ZP installiert) Vorrang. Seien Sie also vorsichtig! Wenn Sie z.B. ein Partial namens "area.html" in Ihrem Layout definieren, so hat dies Vorrang vor dem mit Zeta Producer installierten, globalen Partial mit dem selben Namen. Dies könnte zu ungewollten Ergebnissen führen. Am besten benutzen Sie daher bei der Wahl der Dateinamen für Ihre Partials einfach einen Präfix, also z.B.: "layout-area.html"

Beispiel eines individuellen Partials "layout-head.html":

<$
  var parameters = context.param(0, {});
  var headlineText = args["hText"] || "";
  var headlineLevel = args["hLevel"] || "h2";
$>

<<$= headlineLevel $>>
  <$= headlineText $>
</<$= headlineLevel $>>

Im obigen Beispiel wird ein Partial erzeugt, das 2 benannte Parameter akzeptiert: hText und hLevel. Der Vorgabewert für hText ist ein Leerstring (""), der Vorgabewert für hLevel (der Headline-Level H1, H2, H3 etc.) ist "h2". Vorgabewerte werden verwendet, wenn der jeweilige Parameter nicht übergeben wurde.

In Zeile 1 bis 5 werden die Parameter und ihre Vorgabewerte definiert.

In Zeile 7 bis 9 wird eine HTML-Überschrift anhand der übergebenen Parameter (Text und Level) ausgegeben.

Das so erstellte Partial würde folgendermaßen aufgerufen:

system.partial("layout-head.html"{ "hLevel":"h1", "hText":"Die Überschrift" })

Das Partial würde durch diesen Aufruf folgenden HTML-Code generieren:


<h1>
  Die Überschrift	
</h1>

Folgende Partials sind in Zeta Producer enthalten und zur allgemeinen Nutzung freigegeben:

Partials, die mit Zeta Producer installiert wurden, aber nicht auf dieser Seite aufgeführt werden, sind (noch) nicht zur allgemeinen Nutzung freigegeben und werden momentan nur von Zeta Producer intern genutzt. Dies kann z.B. darin begründet sein, dass der finale Funktionsumfang noch nicht genau feststeht und sich das Partial daher jeder Zeit ändern kann, was dann ggf. Ihren Code unbrauchbar machen würde.

Alle unten angegebenen Parameter sind optional. In der Liste der Parameter ist der Datentyp in runden Klammern, der Vorgabewert in eckigen Klammern angegeben.

area.html

Syntax: system.partial("area.html", "areaName", maxColumns, "cssClass")

Gibt alle Artikel eines bestimmten Bereichs aus und legt fest, in wie vielen Spalten (maximal) Artikel in diesem Bereich nebeneinander angeordnet werden dürfen.

Beispiel:

<$= system.partial("area.html", "Standard", 4) $>

Im Beispiel oben werden alle Artikel des Bereichs "Standard" ausgegeben. Es wird festgelegt, dass im Bereich Standard Artikel in maximal 4 Spalten nebeneinander angeordnet werden können.

Hinweis: Der Bereich "Header" (Kopfgrafiken) wird nicht über area.html ausgegeben, sondern über das spezielle Partial header.html

Unterstützte Parameter:

  • areaName (string) ["Standard"]
    Der Name des Bereichs für den Artikel ausgegeben werden sollen.

  • maxColumns (int|string) [4]
    Maximale Spaltenanzahl in der Artikel in diesem Bereich nebeneinander angeordnet werden dürfen..

  • cssClass (string) [""]
    CSS-Klassenname, der mit jeder "Reihe" (<div class="zpRow cssClass">) in diesem Bereich ausgegeben wird und womit dann "Reihen" in diesem Bereich per CSS entsprechend formatiert werden können.

article-begin.html

Syntax: system.partial("article-begin.html", "additionalClass", "articleAreaInlineCSS", "columnItemInlineCSS")

Gibt den notwendigen HTML-Code aus, der zu Beginn eines Artikels stehen muss, damit der Artikel korrekt formatiert wird und bei Mouse-Over die entsprechenden Inline-Editing-Menüs angezeigt werden.

Wird üblicherweise in einem Widget verwendet.

Unterstützte Parameter:

  • additionalClass (string) [""]
    CSS-Klassenname, der im DIV ausgegeben wird, das den Artikel umschließt.

  • articleAreaInlineCSS (string) [""]
    String, der im DIV ausgegeben wird, das den Artikel umschließt und für Inline CSS wie z.B. style="border: 1px solid red;" genutzt werden kann

  • columnItemInlineCSS (string) [""]
    String, der mit jeder "Spalte", (<div class="zpColumnItem columnItemInlineCSS">) die diesen Artikel umgibt ausgegeben wird und für Inline CSS wie z.B. style="border: 1px solid red;"

article-end.html

Syntax: system.partial("article-end.html")

Gibt den notwendigen HTML-Code aus, der am Ende eines Artikels stehen muss, damit der Artikel korrekt formatiert wird und bei Mouse-Over die entsprechenden Inline-Editing-Menüs angezeigt werden.

Wird üblicherweise in einem Widget verwendet.

Unterstützte Parameter:

  • keine

article-headline.html

Syntax: system.partial("article-headline.html", "fallbackColor")

Gibt eine Überschrift aus und sorgt dafür, dass die Überschrift gemäß den über das Zahnrad-Icon eingestellten Optionen formatiert wird (Größe, Farbe, Ausrichtung).

Unterstützte Parameter:

  • fallbackColor (string) [""]
    Standard Farbwert, der genutzt wird, wenn über das Zahnrad-Icon keine Farbe angegeben wurde.

breadcrumbs.html

Syntax: system.partial("breadcrumbs.html", "breadcrumb", "breadcrumb_separator")

Gibt den Navigationspfad mit dem über das Navigationspfad-Inline-Editing-Menü vorgenommenen Einstellungen (Text und Trennzeichen) aus.

Beispiel:

<div <$= system.partial("inline-editing-breadcrumb.html") $>>
	<$= system.partial("breadcrumbs.html", "Sie befinden sich hier: ", "/") $>
</div>

Unterstützte Parameter:

  • breadcrumb (string) [""]
    Zeichenfolge, die vor dem Navigationspfad ausgegeben wird.

  • breadcrumb_separator (string) [""]
    Trennzeichen, das zwischen den Elementen im Navigationspfad ausgegeben wird.

header.html

Syntax: system.partial("header.html")

Gibt die im Bereich "Header" platzierten Artikel aus.

Unterstützte Parameter:

  • keine

mainmenu.html

Syntax: system.partial("mainmenu.html", { "parameter1":"wert1", "parameter2":false, … })

Gibt ein Hauptmenü für die Seitennavigation als HTML-Liste aus.

Beispiel:

<$= system.partial("mainmenu.html", { "max-depth":2, "ulClass":"hauptmenue" }) $>

Unterstützte Parameter:

  • maxDepth (int|string) [0]
    legt die maximale Verschachtelungstiefe für Menüs fest.
    Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

  • ulClass (string) [""]
    Klassen-Name für das UL-Tag: <ul class="parameter">
    Menüs werden ja als unordered lists (ul) ausgegeben und dann per CSS entsprechend formatiert. Um eine Formatierung mittels CSS zu ermöglichen, können verschiedene Klassen-Namen oder auch IDs als Parameter übergeben werden, welche dann bei der Ausgabe der Listen-Elemente als class="_Parameter_" bzw. id="_Parameter_" ausgegeben werden.

  • ulID (string) [""]
    ID für das UL-Tag: <ul id="parameter">

  • activeClass (string) [“active”]
    Klassen-Name für <li>- und <a>-Tags, der ausgegeben wird, wenn das Menü für die aktive Seite ausgegeben wird bzw. für eine Seite, welche die aktive Seite als Unterseite enthält: <li class="parameter"><a class="parameter" href="#">Seite</a></li>
    Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

  • openClass (string) [""]
    Klassen-Name für <li>-Tags, der ausgegeben wird, wenn das Menü für Seiten welche die aktive Seite als Unterseite enthalten: <li class="parameter"></li>
    Hiermit kann man z.B. für Dropdown-Menüs festlegen, wie ein geöffneter Menüeintrag aussehen soll.
    Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

  • submeuUlClass (string) [""]
    Klassen-Name für das UL-Tag von Submenüs (Ab Verschachtelungstiefe 2): <ul class="parameter">
    Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

  • submenuLiClass (string) [""]
    Klassen-Name für das LI-Tag von Submenüs (Ab Verschachtelungstiefe 2): <li class="parameter">
    Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

  • submenuWrapper (array) [ ["“,”"] ]
    Ein Wrapper bestehend aus einem Array mit 2 String-Elementen, der um die Submenü-Liste gelegt wird. Der Erste-Array-Teil wird vor dem <ul> des Submenüs ausgegeben, der 2. Teil nach dem schließenden </ul> des Submenüs.
    Beispiel:
    Parameter: "submenuWrapper":"['<div class=\"submenu\">','</div>']":
    Ausgabe: <div class="submenu"><ul>…</ul></div>
    Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

rss.html

Syntax: system.partial("rss.html")

Prüft ob für das Projekt RSS-Feeds aktiviert sind und gibt entsprechende Links zum Feed aus.
Wird üblicherweise im <head>-Bereich des Layouts (default.html) verwendet

Unterstützte Parameter:

  • keine

searchfield.html

Syntax: system.partial("searchfield.html", { "parameter1":"wert1", "parameter2":false, … })

Gibt ein Suchfeld anhand dessen Sie Ihre Website durchsuchen können als HTML-Formular mit aus.

Beispiel:

<$ if ( page.attribute("search_field_visible") ) { $> 
	<$= system.partial("searchfield.html", { "useImageButton":true, "formClass":"pull-right", "formId":"searchform", "fieldClass":"search-query pull-right", "fieldId":"searchfield", "buttonId":"searchbutton", "buttonImageSrc":"" }) $>
<$ } $>

Unterstützte Parameter:

  • useImageButton (boolean) [false]
    Wenn true, wird nach dem Formularfeld für die Suche eine Bild-Datei als Button ausgegeben, ansonsten ein normaler Submit-Button

  • formClass (string) [“zpsearchform”]
    Klassen-Name der für das Suche-Formular ausgegeben wird.
    Um eine Formatierung des Suchfelds, Buttons oder Formulars mittels CSS zu ermöglichen, können verschiedene Klassen-Namen oder auch IDs als Parameter übergeben werden, welche dann bei der Ausgabe der HTML-Elemente als class="_Parameter_" bzw. id="_Parameter_" ausgegeben werden.

  • formId (string) [“zpsearchengine”]
    ID die für das Suche-Formular ausgegeben wird

  • fieldClass (string) [“zpsearchfield”]
    Klassen-Name der für das Such-Formularfeld ausgegeben wird

  • fieldId (string) [“zpsearchfield”]
    ID die für das Such-Formularfeld ausgegeben wird

  • buttonClass (string) [“zpsearchbutton”]
    Klassen-Name der für den Formular-Button ausgegeben wird

  • buttonId (string) [“zpsearchbutton”]
    ID die für den Formular-Button ausgegeben wird

  • buttonImageSrc (string) [“assets/stock-images/default-magnifier.png”]
    Der Quellpfad für die Bilddatei für den Formular-Button, wenn useImageButton true ist.

  • buttonValue (string) [“Suchen”]
    Der Text, der im Formular-Button (normaler Submit-Button) ausgegeben wird, wenn useImageButton false ist.

sitemap.html

Syntax: system.partial("sitemap.html", showHiddenPages, maxDepth)

Gibt eine Sitemap aus.

Unterstützte Parameter:

  • showHiddenPages (bool) [false]
    Legt fest, ob ausgeblendete Seiten auch in der Sitemap angezeigt werden (true) oder nicht (false).

  • maxDepth (int) [0]
    Maximale Verschachtelungstiefe bis zu der Seiten angezeigt werden. 0 = kein Limit. Wird maxDepth z.B. auf 2 gesetzt, werden nur Seiten der 1. und 2. Ebene in der Sitemap angezeigt, also Hauptseiten und deren direkte Unterseiten.

submenu.html

Syntax: system.partial("submenu.html", { "parameter1":"wert1", "parameter2":false, … })

Gibt ein Untermenü für die Seitennavigation als HTML-Liste aus.

Unterstützte Parameter:

  • pageId (int|string) [page.id]
    Die ID der Seite, für die das Untermenü erstellt werden soll.

  • maxDepth (int|string) [0]
    legt die maximale Verschachtelungstiefe für Menüs fest.

  • startLevel (int|string) [0]
    Hiermit kann festgelegt werden ob im Submenü aus entsprechende Vaterseiten ausgegeben werden. Wenn wird im Submenü immer der gesamte Baum ab Ebene 2 ausgegeben und nicht nur die Links zu entsprechenden Tochterseiten einer Seite.

  • wrapper (array) [ ["“,”"] ]
    Ein Wrapper bestehend aus einem Array mit 2 String-Elementen, der um die Submenü-Liste gelegt wird. Der Erste-Array-Teil wird vor dem <ul> des Submenüs ausgegeben, der 2. Teil nach dem schließenden </ul> des Submenüs.
    Beispiel:
    Parameter: "submenuWrapper":"['<div class=\"submenu\">','</div>']":
    Ausgabe: <div class="submenu"><ul>…</ul></div>

  • ulClass (string) [""]
    Klassen-Name für das UL-Tag von Submenüs (Ab Verschachtelungstiefe 2): <ul class="parameter">
    Menüs werden ja als unordered lists (ul) ausgegeben und dann per CSS entsprechend formatiert. Um eine Formatierung mittels CSS zu ermöglichen, können verschiedene Klassen-Namen oder auch IDs als Parameter übergeben werden, welche dann bei der Ausgabe der Listen-Elemente als class="_Parameter_" bzw. id="_Parameter_" ausgegeben werden.

  • liClass (string) [""]
    Klassen-Name für das LI-Tag von Submenüs (Ab Verschachtelungstiefe 2): <li class="parameter">

  • activeClass (string) [“active”]
    Klassen-Name für <li>- und <a>-Tags, der ausgegeben wird, wenn das Menü für die aktive Seite ausgegeben wird bzw. für eine Seite, welche die aktive Seite als Unterseite enthält: <li class="parameter"><a class="parameter" href="#">Seite</a></li>

  • openClass (string) [""]
    Klassen-Name für <li>-Tags, der ausgegeben wird, wenn das Menü für Seiten welche die aktive Seite als Unterseite enthalten: <li class="parameter"></li>
    Hiermit kann man z.B. für Dropdown-Menüs festlegen, wie ein geöffneter Menüeintrag aussehen soll.

  • showDescription (boolean) [false]
    Legt fest ob der in den Seiteneigenschaften bei “Beschreibung” eingegebene Text mit ausgegeben wird. Dies wird üblicherweise nur von Sitemaps genutzt. Das Sitemap-Widget nutzt ebenfalls das submenu.html Partial, daher wird dieser Parameter benötigt.

  • showHiddenPages (boolean) [false]
    Legt fest ob Einträge für Seiten, die via Seiteneigenschaften nicht im Navigations-Menü angezeigt werden, ausgegeben werden . Dies wird üblicherweise nur von Sitemaps genutzt. Das Sitemap-Widget nutzt ebenfalls das submenu.html Partial, daher wird dieser Parameter benötigt.