Konfigurationsmöglichkeiten des Templates

Positionen des Templates

mozaikoo verwendet Seiten und Widgets, um die Seiten im CMS aufzubauen. Seiteninhalte werden abhängig vom Typ innerhalb des <main>-Tags ausgegeben. Die Widgets können Positionen und Seiten zugeordnet werden, um wiederkehrende Inhalte oder Inhalte mit spezieller Funktionalität auszugeben.

Standardpositionen des Standardtemplates von mozaikoo.

Standardpositionen können frei verändert werden

Die gezeigten Positionen sind in der application.hbs und der Template-Konfigurationsdatei angelegt. Sie können die Positionen entfernen, neue definieren und in der application.hbs mittels HTML an anderer Stelle anordnen.

Die Positionen des Templates, die dann im Backend für Widgets verfügbar sind, werden in der Template-Konfigurationsdatei frei definiert:

├── config               (das Konfigurationsverzeichnis)
│   └── template.json    Konfigurationsdatei des Templates

Die Positionen werden unter positions eingetragen:

    "positions": {
        "interner-name": "Dargestellter Name",
    ...

Der interne Name wird im Handlebar-Template verwendet, der dargestellte Name wird im Backend bei der Ausgabekonfiguration von Inhalten an den Positionen angezeigt.

MAIN bzw. Seiteninhalt

Für den Inhalt, der in <main> gerendert wird (in der Grafik Seiteninhalt), wird keine Position angegeben.

Positionen in der application.hbs

application.hbs ist das Haupttemplate. Dieses Template regelt die Ausgabe der Standardseite und den in der Template-Konfigurationsdatei definierten Positionen:

{{#if media.isMobile}}
  <nav id="offcanvas">
    {{partial "content/offcanvas"}}
  </nav>
{{/if}}

{{#if userProxy.isLoggedIn}}
  <dialog>
    {{partial "editor"}}
  </dialog>
{{/if}}

<header>
    {{partial "content/logo"}}
  <nav>
    {{partial "content/menu"}}
  </nav>
</header>


{{partial "content/top"}}

{{partial "content/breadcrumbs"}}

<main>

  {{partial "content/main-top"}}

  <!-- The Main-Content -->
  {{outlet}}

  {{#if widgets.sidebar}}
    <aside>
      {{partial "content/sidebar"}}
    </aside>
  {{/if}}

  {{partial "content/main-bottom"}}

</main>

{{partial "content/bottom"}}

<footer>
  {{partial "content/footer"}}
</footer>

Reduzierter Beispielaufbau der Positionen in der application.hbs

application.hbs und <body>

In der application.hbs wird kein <body> definiert. Der Inhalt der application.hbs steht direkt innerhalb des body-Tags aus der index.html.

Responsive Breakpoints ohne Media-Query

mozaikoo verwendet breakpoint.js, um die Anzeige von responsiven Inhalten zu regeln. Der Vorteil von breakpoint.js ist, dass Inhalte, die im definierten Media-Query nicht dargestellt werden sollen, auch nicht im DOM gerendert werden. Ember steuert automatisch das Erzeugen der Elemente, wenn andere Media-Query-Einstellungen ein Element anzeigen.

Media-Queries im CSS

Es können im CSS/LESS auch weiterhin Media-Queries definiert werden, jedoch ist aus Performancegründen die Steuerung über breakpoint.js vorzuziehen. Elemente, die über ein CSS-Media-Query gesteuert werden befinden sich immer im DOM, auch wenn diese nicht dargestellt werden.

Die Datei kann editiert werden und befindet sich im App-Verzeichnis auf der obersten Ebene.

Die in breakpoint.js definierten Media-Queries stehen im Backend für die Widgets zur Konfiguration zur Verfügung.

export default {
  mobile:  '(max-width: 767px)',
  tablet:  '(min-width: 768px) and (max-width: 959px)',
  desktop: '(min-width: 960px) and (max-width: 1199px)',
  large:   '(min-width: 1200px)'
};

Die Anweisungen in breakpoint.js entsprechen dabei den bekannten Media-Query-Anweisungen aus CSS/LESS/SASS und können entsprechend erweitert werden, z.B.:

    tabletLandscape:  '(min-width: 768px) and (max-width: 1024px) and (orientation: landscape)',

Breakpoint.js stellt zudem beliebig erweiterbare Variablen zur Verfügung, die in den Template-Dateien verwendet werden können. So ist es zum Beispiel denkbar, eine Variable zu definieren, die mit einem {{#if}} Statement nur Elemente einblendet, wenn der Viewport der Seite eine geringe Höhe hat:

   smallHeight: '(max-height: 800px)'

Im Template werden die Media-Queries (z.B. mittels IF-Abfrage) wie folgt eingebunden:

   {{#if media.isMobile}}
   ... Anweisung für die mobile Ausgabe
   {{/if}}

Die definierte Variable wird im media-Objekt mit vorangestelltem is in camelCase abgefragt.

Komponenten

Jede eingebundene Komponente hat einen eigenen Template-Ordner. Der Aufbau dieser Templates wird unter Templateaufbau erläutert.