187 lines
10 KiB
Typst
187 lines
10 KiB
Typst
#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.
|
|
\
|
|
\
|
|
*Logo*
|
|
#figure(
|
|
image("../../images/global-logo.png", width: 100%),
|
|
)
|
|
Das Logo wird global definiert und ersetzt dadurch das Fallback Logo der Webseite. Wird irgendwo ein Bild angezeigt, das nicht angegeben ist, so wird dort auch das Logo als Ersatz angezeigt.
|
|
\
|
|
\
|
|
*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.
|
|
\
|
|
\
|
|
#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.
|
|
]
|
|
|
|
#pagebreak()
|
|
|
|
*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 optional aus einem Bild, das über der Navigationsleiste angezeigt werden kann. Die Funktionalität, dass etwas über der Navigationsleiste angezeigt wird, wird anhand der Füllung des Feldes `backdrop` entschieden. Ist kein Bild angegeben, wird überhalb der Navigationsleiste nichts angezeigt.
|
|
|
|
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 *Sammlungs Referenz* definiert global, wie die 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.
|
|
\
|
|
\
|
|
- `show_image`: Soll das Element in der Liste ein Bild anzeigen.
|
|
- `show_date`: Soll das Element in der Liste ein Datum anzeigen.
|
|
- `enable_detail`: Soll das Element auf eine Detailseite weiterleiten können. Zusätzlich wird angegeben, ob eine Detailseite überhaupt verfügbar ist.
|
|
- `list_with_date`: Dieses Auswahlfeld beinhaltet mehrere Varianten.
|
|
- `none`: Soll die Liste ohne Gruppierung nach Zeit angezeigt werden.
|
|
- `by-year`: Sollen die Listenelemente nach Jahren gruppiert angezeigt und navigiert werden.
|
|
- `by-month`: Sollen die Elemente durch einen Text mit dem Monat getrennt werden.
|
|
- `items_with_number`: Dieses Auswahlfeld beinhaltet mehrere Varianten.
|
|
- `none`: Sollen die Liste keine Nummerierung besitzen.
|
|
- `numbered`: Sollen die Listenelemente mit einer Nummer angezeigt werden.
|
|
- `inverted`: Sollen die Listenelemente mit einer Nummer in umgekehrter Zählweise angezeigt werden.
|
|
\
|
|
*Beispiele:*
|
|
#table(
|
|
columns: (1fr, 1fr),
|
|
inset: 10pt,
|
|
stroke: none,
|
|
"Anzeige von z.B. Artikeln als Liste mit Bild und `list_with_date` mit dem Werte `by-year`. `items_with_number` hat den Wert `none`.",
|
|
"Anzeige von z.B. Einsätzen als Liste ohne Bild und `list_with_date` mit dem Werte `by-month`. Invertiert nummeriert wird über `items_with_number` = `inverted`",
|
|
image("../../images/date-image-list.png", width: 6.5cm),image("../../images/date-month-list.png", width: 6.5cm),
|
|
"Anzeige von z.B. Terminen als Liste ohne Bild und `list_with_date` mit dem Werte `by-year`. `items_with_number` hat den Wert `none`.",
|
|
"Anzeige von z.B. Fahrzeugen als Liste ohne Datum und Nummer: \n`list_with_date` = `inverted` \n`items_with_number` = `inverted`",
|
|
image("../../images/date-year-list.png", width: 6.5cm),
|
|
image("../../images/image-list.png", width: 6.5cm),
|
|
)
|
|
|
|
|
|
=== 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 Unterüberschrift versehen werden.
|
|
|
|
Ist das Banner oder die Unterüberschrift nicht gesetzt, so wird der nicht erstellte Inhalt nicht 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 die Detailseite eines Artikels geöffnet werden kann, wird in der Sammlungsreferenz (@reference) anhand des Wertes `enable_detail` eingestellt.
|
|
|
|
=== 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 die Detailseite eines Einsatzes geöffnet werden kann, wird in der Sammlungsreferenz (@reference) anhand des Wertes `enable_detail` eingestellt.
|
|
|
|
=== 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.
|
|
|
|
Jedes Fahrzeug 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 die Detailseite eines Fahrzeugs geöffnet werden kann, wird in der Sammlungsreferenz (@reference) anhand des Wertes `enable_detail` eingestellt.
|
|
|
|
=== 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 die Detailseite eines Termins geöffnet werden kann, wird in der Sammlungsreferenz (@reference) anhand des Wertes `enable_detail` eingestellt.
|
|
|
|
=== 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.
|