Layouts-Referenz

Hier finden Sie alle Informationen zu Layouts in Zeta Producer. Für schnelle Ergebnisse können Sie sich auch die Beispiele oder die Schnellstart-Seiten anschauen.

Aufbau eines Layouts

Jedes Layout wird in einem Ordner im Dateisystem gespeichert. Innerhalb eines Layout-Ordners gibt es folgende Ordner und Dateien:

  • assets
    Der Ordner assets enthält Bilder, CSS-Dateien und alle anderen vom Layout benötigten Objekte. Dieser Ordner kann auch Unterordner enthalten.
  • templates/pages
    Hier sind die Seitenvorlagen enthalten, die den HTML-Code der Ausgabeseite definieren. Jedes Layout muss mindestens eine Seitenvorlage enthalten.
    • default.html
      Enthält den HTML-Code der Ausgabeseite.
    • default.json
      Enthält verschiedene Einstellungen der Seitenvorlage und die Definition der vom Anwender bearbeitbaren Bereiche.
  • templates/partials
    Dieser Ordner enthält sogenannte Partials, HTML-Fragmente, die innerhalb der Seitenvorlagen verwendet werden können.
  • variants
    Enthält die Varianten eines Layouts. Dieser Ordner kann für die Anpassung eines eigenen Layouts ignoriert werden.
  • layout.json
    Diese Datei enthält verschiedene Einstellungen des Layouts und legt fest, welche Dateien und Ordner aus assets in die Ausgabe-Website kopiert werden sollen.

Scopes für Layouts

Zeta Producer sucht in diesen Verzeichnissen (und in dieser Reihenfolge) nach Layouts:

  1. Projektordner
    Beispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 14\projects\*Projekt*\layouts

  2. Benutzerordner
    Beispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 14\layouts

  3. Programmordner

Eigene Layouts können Sie im Projekt- oder Benutzerordner abspeichern. Der Programmordner sollte nicht verändert werden. Wenn Sie das Standardverhalten eines mitgelieferten Layouts überschreiben wollen, können Sie dies erreichen indem Sie das Layout kopieren und unter dem gleichen Verzeichnisnamen im Projekt- oder Benutzerordner abspeichern.

Die Datei layout.json

Diese JSON-Datei enthält alle Einstellungen des Layouts wie Name, Assets und vordefinierte Attribute.

Beispiel

{
    "settings": {
        "version": "14.0.0.0",
        "name": "Minimal-Layout"
    },
    "assets": [
        {
            "fileName": "assets/styles.css",
            "mode": "bundle",
            "order": 50
        },
        {
            "fileName": "assets/*",
            "mode": "copy",
            "ignore": []
        }
    ],
    "attributes": [],
    "values": []
}

Asset-Dateien kopieren

Als Asset-Dateien werden alle Dateien bezeichnet, die für die korrekte Darstellung Ihres Layouts benötigt werden. Neben JavaScript- und CSS-Dateien kann es sich dabei auch um Bilder und sonstige Dateien handeln. Kopieren Sie alle benötigten Assets-Dateien in den Ordner assets des Layouts. Sie können zur besseren Strukturierung auch Unterordner verwenden.

Der Inhalt des Ordner assets wird nicht automatisch in den Ausgabeordner kopiert. Dadurch können Sie in diesem Verzeichnis auch temporäre Dateien für Tests oder verschiedene Versionen einer Datei aufbewahren ohne dass diese veröffentlicht werden. Damit eine Asset-Datei kopiert wird, müssen Sie dies in der Datei layout.json explizit deklarieren.

Beispiel

{
    "assets": [
        {
            "fileName": "assets/*",
            "mode": "copy"
        }
    ]
}

Dieser Eintrag würde den kompletten Inhalt des assets-Ordners kopieren. Um nur einzelne Dateien zu kopieren verwenden Sie folgenden Code:

Beispiel

{
    "assets": [
        {
            "fileName": "assets/styles.css",
            "mode": "copy"
        },
        {
            "fileName": "assets/favicon.ico",
            "mode": "copy"
        }
    ]
}

CSS- und JavaScript-Dateien bündeln

Neben dem reinen Kopieren von Asset-Dateien bietet Zeta Producer für CSS- und JavaScript-Dateien noch eine zweite Methode um diese in die erstellte Website einzubinden. Um Ladezeiten zu optimieren können alle von einem Layout benötigten CSS- und JavaScript-Dateien zu jeweils einer einzigen Bundle-Datei zusammengefügt werden. Hierbei wird jeweils eine Bundle-Datei für JavaScript und CSS erstellt.

Um diese Möglichkeit zu nutzen verwenden Sie bundle statt copy:

Beispiel

{
    "assets": [
        {
            "fileName": "assets/styles.css",
            "mode": "bundle",
            "order": 50
        },
        {
            "fileName": "assets/uikit.css",
            "mode": "bundle",
            "order": 55
        },
        {
            "fileName": "assets/uikit.js",
            "mode": "bundle",
            "order": 55
        },
        {
            "fileName": "assets/*",
            "mode": "copy",
            "ignore": []
        }
    ]
}

Über die Einstellung order können Sie die Reihenfolge der einzelnen Asset-Dateien in der Bundle-Datei bestimmen. Hier können Sie einen beliebigen numerischen Wert angeben, je kleiner um so früher wird die Datei in die Bundle-Datei eingefügt.

Verwenden Sie folgende Befehle um die gebündelten JavaScript-/CSS-Includes in Ihre Seitenvorlage aufzunehmen:

<$= project.bundleCss() $> 
<$= project.bundleJs() $>

Seitenvorlagen

Der Ausgabecode für die Website wird in den Seitenvorlagen definiert. Diese befinden sich im Ordner templates/pages. Jedes Layout muss mindestens eine und kann beliebig viele Seitenvorlagen enthalten. Der Anwender kann pro Seite in den Eigenschaften entscheiden, welche Seitenvorlage verwendet werden soll.

Jede Seitenvorlage besteht aus zwei Dateien:

  1. HTML-Datei, z.B. default.html
  2. JSON-Datei, z.B. default.json

Die Namen der beiden Dateien müssen (bis auf den Dateityp) identisch sein.

Beispiel für HTML-Datei

<!DOCTYPE html>
<html lang="#attribute(meta_contentlanguage)">

<head>
    <!-- Title -->
	<title><$= page.title $></title>
    
    <!-- Meta Data -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="<$= page.description $>" />
	<meta name="keywords" content="<$= page.keywords $>" />
	<meta name="generator" content="<$= system.generator $>" />
	<meta name="robots" content="#attribute(meta_robots)" />
    #attribute(additional_meta)

    <!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="<$= page.pathToRoot $>assets/favicon.ico" />
    
    <!-- Bundled CSS -->
	<$= project.bundleCss() $>

    <!-- Additional CSS -->
	<$ if ( page.attribute("additional_css") ){ $>
	<style>
		#attribute(additional_css)
	</style>
	<$ } $>
        
    <!-- Bundled JavaScript -->
	<$= project.bundleJs() $>

	<!-- RSS -->
	<$= system.partial("rss.html") $>
    
    <!-- Mobile JavaScript -->
	#attribute(mobile_script)
	
	<!-- Analytics Code -->
	#attribute(google_analytics)
</head>

<body>
<a id="top"></a>
    
    <!-- Wrapper -->
    <div id="wrapper">

        
        <!-- Topline -->
        <div class="clearfix">

            <!-- Logo -->
            <div id="logo">
                <a href="<$= project.url $>"><img src="<$= page.pathToRoot $>assets/logo.png" alt="<$= project.url $>" /></a>
            </div>

            <!-- Webname -->
            <div id="webname">
                <a href="<$= project.url $>">#attribute(web_name)</a>
            </div>
            
            <!-- Search -->
            <$= system.partial("searchfield.html", { "inlineEditing": false }) $>
        
        <!-- End Topline -->
        </div>

                
        <!-- Header -->
        <$ if ( page.anyAreaArticles("Header") || (system.preview && system.showEmptyPreviewAreas) ) { $>
            <$= system.partial("header.html", "Header") $>
        <$ } $>

            
        <!-- Breadcrumb -->
        <$ if ( page.attribute("show_breadcrumb") ) { $>
            <div id="breadcrumb">
                <$= system.partial("breadcrumbs.html", "#attribute(breadcrumb)", "#attribute(breadcrumb_separator)") $>
            </div>
        <$ } $>

            
        <!-- Section -->
        <div class="clearfix">
            
            <!-- Navigation -->
            <nav id="navigation">
                <$= system.partial("mainmenu.html") $>
            </nav>
                
            <!-- News -->
            <$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas) ) { $>
                <div id="news">
                    <$= system.partial("area.html", "News", 1) $>
                </div>
            <$ } $>
                
            <!-- Content -->
            <div id="content">
                <$= system.partial("area.html", "Standard", "4") $>
            </div>
        
        <!-- End Section -->
        <div>

            
        <!-- Footer -->
        <div class="clearfix">
            
            <!-- Extramenu -->
            <div id="xmenu">
                <a href="#attribute(extramenu_url_1)">#attribute(extramenu_1)</a> - 
                <a href="#attribute(extramenu_url_2)">#attribute(extramenu_2)</a> - 
                <a href="#attribute(extramenu_url_3)">#attribute(extramenu_3)</a>
            </div>
                                
            <!-- Copyright -->
            <div id="copyright">
                #attribute(copyright_notice)
            </div>
        
        <!-- End Footer -->
        </div>
    
    <!-- End Wrapper -->
    </div>

<!-- Footer Script -->
#attribute(footer_script)

</body> 
</html>

Beispiel für JSON-Datei

{
    "areas": [
        { "name": "Standard" },
        { "name": "Header" },
        { "name": "News" }
    ]
}

Inhaltsbereiche

Damit der Anwender in Ihrem Layout Inhalte erfassen kann, müssen Sie Inhaltsbereiche in Ihrer Seitenvorlage definieren. Jeder Inhaltsbereich wird über einen Namen definiert und muss an zwei Stellen definiert werden:

  1. In der JSON-Datei der Seitenvorlage default.json. Diese Deklaration ist nötig, damit Zeta Producer den Inhaltsbereich kennt und eine entsprechende Benutzeroberfläche für die Bearbeitung zur Verfügung stellen kann.
  2. In der Seitenvorlage default.html. Hier bestimmen Sie wie und wo auf Ihrer Seite der eingegebene Content ausgegeben werden soll.

Um weitere Inhaltsbereiche auf einer Seite einzufügen bearbeiten Sie die default.json wie folgt:

Beispiel

{
    "areas": [
        { "name": "Standard" },
        { "name": "Header" },
        { "name": "News" },
	{ "name": "Banner" }
    ]
}

Mit dieser Anweisung wird ein zusätzlicher Inhaltsbereiche Banner definiert. Um in der Seitenvorlage den Bereich auszugeben verwenden Sie folgenden Befehl in der default.html:

Beispiel

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

Der Befehl verwendet das Partial area.html und weist Zeta Producer an, den Bereich Banner auszugeben. Der Anwender kann in diesem Bereich maximal 4 Spalten erstellen, also vier Artikel nebeneinander anordnen.