#import "@preview/wrap-it:0.1.1": *

#pagebreak()

== Modelle

=== Global <global>
Im @single-type *Global* können Werte hinterlegt werden, die im Kontext der gesamten Website zur Verfügung stehen sollen. Diese Einträge umfassen die Navigationsleiste, die Fußzeile und SEO, welche die Anzeige in einer Suchmaschine steuern. Diese Werte müssen definiert werden, damit die Webseite funktionsfähig angezeigt werden kann.
\
\
*Navigation*
#figure(
  image("../../images/global-navbar.png", width: 100%),
)
Die Navigationsleiste kann mit einem Logo und eigenen Links definiert werden. Die Links können entweder eigenständig oder mit Sublinks erstellt werden. Außerdem kann ein Top-Level-Link direkt auf eine Seite oder auf einen Sub-Link verweisen. Die Links erhalten immer eine Bezeichnung und einen Text, wie der Link in der URL aussehen soll. Jedem Link, der etwas anzeigen soll, muss eine Seite zugeordnet werden. Das Anlegen von Seiten wird in @page erklärt.

#pagebreak()

#wrap-content(
  figure(
    image("../../images/navbar_single.png", width: 6.5cm),
  ),
  align: right
)[
Links in der Navigation ohne untergeordneten Links:
#figure(
  image("../../images/navbar_single_example.png", width: 100%),
)
Top-Level-Links ohne Unterlinks werden in der Hauptnavigationsleiste angezeigt. Diese Links verweisen auf eine zugeordnete Seite. Die angelegten Seiten können über das angezeigte Dropdown-Menü ausgewählt werden.
]

#wrap-content(
  figure(
    image("../../images/navbar_sublink.png", width: 6.5cm),
  ),
  align: right
)[
Links in der Navigation mit untergeordneten Links:
#figure(
  image("../../images/navbar_sublink_example.png", width: 100%),
)
Top-Level-Links mit Unterlinks werden in der Hauptnavigationsleiste angezeigt. 
Wenn ein Link ausgewählt wird, werden die erzeugten Sublinks angezeigt. Je nach Konfiguration des Links wird dann entweder direkt eine Seite oder eine Seite des Sublinks aufgerufen. Beim Verweis auf Sublinks muss der Verweis `default_active_child` mit dem Wert der URL des Sublinks übereinstimmen.
]
\
*Fußleiste*
#figure(
  image("../../images/global-footer.png", width: 100%),
)
Die Fußzeile kann mit Verweisen auf den Betreiber und eigenen Links definiert werden. Die Links können entweder auf eine in den Seiten definierte URL (@page) oder auf externe Webseiten verweisen. Um auf eine definierte Seite zu verweisen, muss nur der Pfad angegeben werden. Ein Pfad kann mit einem `/` beginnen oder ein ganzer Pfad sein (`aktuelles/einsaetze`). Soll ein Link auf eine externe Seite verweisen, muss dem Link `https://` oder `http://` vorangestellt werden.
\
\
*SEO (Search Engine Optimization)*
#figure(
  image("../../images/global-seo.png", width: 100%),
)
Der Abschnitt SEO ist optional und kann verwendet werden, um den Titel der Registerkarte und die Beschreibung der Seite festzulegen. Dies optimiert die Ergebnisse in Suchmaschinen, da u.a. die Beschreibung direkt angezeigt wird. 

=== Startseite
#figure(
  image("../../images/homepage.png", width: 100%),
)

Der @single-type *Startseite* definiert die Startseite. Diese ist immer fest und muss konfiguriert werden, damit die Website funktionsfähig ist.

Die Startseite besteht aus einem Bild, das über der Navigationsleiste angezeigt werden kann. Die Funktionalität, dass etwas über der Navigationsleiste angezeigt wird, kann auch über `hide_backdrop` deaktiviert werden.

Das Logo, das auch auf der Startseite verwendet wird, ist das gleiche, das unter Global (@global) angegeben wurde.

Die Erstellung von Inhalten mit Hilfe von Komponenten wird unter Verwendung in @usage erläutert. Die Startseite ist eine vollwertige Seite wie die Seiten (@page), jedoch mit erweiterten Darstellungsmöglichkeiten, um die Startseite hervorzuheben.

=== Sammlungs Referenz <reference>
#figure(
  image("../../images/collection-ref.png", width: 100%),
)
Der @collection-type *Collection Reference* definiert, wie die definierten Listen für Artikel, Einsätze, Termine und Fahrzeuge angezeigt werden sollen. Damit wird auch festgelegt, dass der Inhalt bei jeder Verwendung einheitlich ist.

Damit eine Liste wie Artikel, Einsätze, Termine oder Fahrzeuge auf den Seiten verwendet werden kann, muss eine Sammlungsreferenz erstellt worden sein.
\
\
- `image_item`: Wenn das Element in der Liste ein Bild anzeigen soll.
- `date_list`: Sollen die Listenelemente nach Jahren gruppiert angezeigt und navigiert werden. Die Elemente werden durch einen Text mit dem Monat getrennt.
- `numbered_item`: Sollen die Listenelemente ohne Bild anstelle des Tages als große Zahl durchnummeriert werden?
- `inverse_count`: Soll die Anzeige umgekehrt werden (neueste oder älteste zuerst). Bei der Verwendung von `numbered_item` wird dadurch die Nummerierung geändert.

=== Seiten <page>
#figure(
  image("../../images/page.png", width: 100%),
)
Der @collection-type *Seiten* speichert alle Seiten, die erreicht werden können. Derzeit ist jede Seite - ob in der Navigation angegeben oder nicht - über den in der URL definierten @slug erreichbar, sofern nicht eine Navigationseinstellung den @slug überlagert. Standardmäßig ist die Erreichbarkeit auf `<meine Domain>/<slug>` gesetzt.
\
\
Der Identifier dient nur zur lesbaren Identifizierung der Seite, wenn sie einem Navigationslink zugeordnet ist. Der @slug speichert den Pfad, der in der URL angezeigt wird.
\
\
#wrap-content(
  figure(
    image("../../images/banner.png", width: 6.5cm),
  ),
  align: right
)[
Eine Seite kann ein Banner (Hero) haben. Dieses Banner wird direkt unter der Navigation angezeigt. Der Hero kann mit einem Untertitel versehen werden.

Ist kein Banner gesetzt, wird direkt unter der Navigation der Kontext der Seite angezeigt.
\
\
Der Hauptteil einer Seite kann mit definierten Komponenten erstellt werden.
Die Erstellung von Inhalten mit Hilfe von Komponenten wird unter Verwendung in @usage erläutert.
]


=== Artikel
#figure(
  image("../../images/article.png", width: 100%),
)
Der @collection-type *Artikel* speichert Beiträge der Website ähnlich wie Artikel in einer Zeitung. Die Art und Weise, wie ein Artikel auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 

Jeder Artikel enthält einen Titel, einen URL-Pfad (@slug), ein Datum und eine Beschreibung.

Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
Content wird z.B. nur benötigt, wenn ein Artikel geöffnet werden kann. Ob ein Artikel geöffnet werden kann, wird unter Verwendung (@usage) erläutert.

=== Einsätze
#figure(
  image("../../images/operation.png", width: 100%),
)
Der @collection-type *Einsätze* speichert vergangene Einsätze ab. Die Art und Weise, wie ein Einsatz auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 

Jeder Einsatz enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung.

Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
Content wird z.B. nur benötigt, wenn ein Einsatz geöffnet werden kann. Ob ein Einsatz geöffnet werden kann, wird unter Verwendung (@usage) erläutert.

=== Fahrzeuge
#figure(
  image("../../images/vehicle.png", width: 100%),
)
Der @collection-type *Fahrzeuge* speichert Fahrzeuge des Fuhrparks ab. Die Art und Weise, wie ein Fahrzeug auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 

Jeder Einsatz enthält einen Titel, einen URL-Pfad (@slug) und eine Beschreibung.

Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt oder nicht angezeigt, wenn diese optional sind.
Content wird z.B. nur benötigt, wenn ein Fahrzeug geöffnet werden kann. Ob ein Fahrzeug geöffnet werden kann, wird unter Verwendung (@usage) erläutert.

=== Termine:
#figure(
  image("../../images/event.png", width: 100%),
)
Der @collection-type *Termine* speichert vergangene oder anstehende Termine. Die Art und Weise, wie ein Termin auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 

Jeder Termin enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung.

Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
Content wird z.B. nur benötigt, wenn ein Termin geöffnet werden kann. Ob ein Termin geöffnet werden kann, wird unter Verwendung (@usage) erläutert.

=== User
Die Verwendung des @collection-type *User* ist nicht erforderlich, da diese nur benötigt wird, wenn sich Besucher der Website auf der Website anmelden könnten.
