webpage component update

This commit is contained in:
Julian Krauser 2025-02-15 17:25:08 +01:00
parent 960311c2f8
commit 9ec5ce3b89
20 changed files with 48 additions and 18 deletions

Binary file not shown.

View file

@ -15,7 +15,7 @@ Wichtig ist, dass ein paar Einstellungen vor der ersten Verwendung vorgenommen w
), ),
align: right align: right
)[ )[
2. *Einstellungen anpassen*: In den Einstellungen müssen unter dem Punkt `Users & Permissions Plugin` die Rollen und Berechtigungen angepasst werden. Unter `Roles > Public` müssen die Berechtigungen `find`, `findOne` und falls vorhanden `distinctYears` und `findByYear` für bestimmte Vorlagen aktiviert werden. Dadurch kann die Website später ohne weitere Einstellungen lesend auf die veröffentlichten Inhalte zugreifen. Die Leseberechtigungen müssen für `Article`, `Collection-lookup`, `Event`, `Global`, `Homepage`, `Operation`, `Page`, `Vehicle` und `Upload` aktiviert werden. 2. *Einstellungen anpassen*: In den Einstellungen müssen unter dem Punkt `Users & Permissions Plugin` die Rollen und Berechtigungen angepasst werden. Unter `Roles > Public` müssen die Berechtigungen `find`, `findOne` und falls vorhanden `distinctYears` und `findByYear` für bestimmte Vorlagen aktiviert werden. Dadurch kann die Website später ohne weitere Einstellungen lesend auf die veröffentlichten Inhalte zugreifen. Die Leseberechtigungen müssen für `Article`, `Collection-lookup`, `Event`, `Global`, `Homepage`, `Operation`, `Page` und `Vehicle` aktiviert werden.
] ]
#wrap-content( #wrap-content(

View file

@ -8,14 +8,20 @@
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. 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* *Navigation*
#figure( #figure(
image("../../images/global-navbar.png", width: 100%), 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. 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( #wrap-content(
figure( figure(
image("../../images/navbar_single.png", width: 6.5cm), image("../../images/navbar_single.png", width: 6.5cm),
@ -42,7 +48,9 @@ Links in der Navigation mit untergeordneten Links:
Top-Level-Links mit Unterlinks werden in der Hauptnavigationsleiste angezeigt. 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. 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* *Fußleiste*
#figure( #figure(
image("../../images/global-footer.png", width: 100%), image("../../images/global-footer.png", width: 100%),
@ -63,7 +71,7 @@ Der Abschnitt SEO ist optional und kann verwendet werden, um den Titel der Regis
Der @single-type *Startseite* definiert die Startseite. Diese ist immer fest und muss konfiguriert werden, damit die Website funktionsfähig ist. 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. 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. Das Logo, das auch auf der Startseite verwendet wird, ist das gleiche, das unter Global (@global) angegeben wurde.
@ -73,15 +81,37 @@ Die Erstellung von Inhalten mit Hilfe von Komponenten wird unter Verwendung in @
#figure( #figure(
image("../../images/collection-ref.png", width: 100%), 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. 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. 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. - `show_image`: Soll das Element in der Liste ein Bild anzeigen.
- `date_list`: Sollen die Listenelemente nach Jahren gruppiert angezeigt und navigiert werden. Die Elemente werden durch einen Text mit dem Monat getrennt. - `show_date`: Soll das Element in der Liste ein Datum anzeigen.
- `numbered_item`: Sollen die Listenelemente ohne Bild anstelle des Tages als große Zahl durchnummeriert werden? - `enable_detail`: Soll das Element auf eine Detailseite weiterleiten können. Zusätzlich wird angegeben, ob eine Detailseite überhaupt verfügbar ist.
- `inverse_count`: Soll die Anzeige umgekehrt werden (neueste oder älteste zuerst). Bei der Verwendung von `numbered_item` wird dadurch die Nummerierung geändert. - `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> === Seiten <page>
#figure( #figure(
@ -99,9 +129,9 @@ Der Identifier dient nur zur lesbaren Identifizierung der Seite, wenn sie einem
), ),
align: right 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. 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 kein Banner gesetzt, wird direkt unter der Navigation der Kontext der Seite angezeigt. 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. Der Hauptteil einer Seite kann mit definierten Komponenten erstellt werden.
@ -118,7 +148,7 @@ Der @collection-type *Artikel* speichert Beiträge der Website ähnlich wie Arti
Jeder Artikel enthält einen Titel, einen URL-Pfad (@slug), ein Datum und eine Beschreibung. 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. 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. 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 === Einsätze
#figure( #figure(
@ -129,7 +159,7 @@ Der @collection-type *Einsätze* speichert vergangene Einsätze ab. Die Art und
Jeder Einsatz enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung. 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. 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. 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 === Fahrzeuge
#figure( #figure(
@ -137,10 +167,10 @@ Content wird z.B. nur benötigt, wenn ein Einsatz geöffnet werden kann. Ob ein
) )
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. 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. 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. 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. 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: === Termine:
#figure( #figure(
@ -151,7 +181,7 @@ Der @collection-type *Termine* speichert vergangene oder anstehende Termine. Die
Jeder Termin enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung. 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. 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. 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 === 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. 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.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 72 KiB