Seitentemplates spezifizieren den strukturellen Aufbau sowie die Filterung der Inhalte einer Seite, die im Inhaltsbereich eines Rahmentemplates dargestellt wird.
Der Aufbau eines Seitentemplates erfolgt durch Anordnung und Bearbeitung der gewünschten Seiten-Komponenten im Editor. Neue Komponenten werden per Drag & Drop aus dem Vorrat rechts auf den Editor eingefügt.
Seitentemplates lassen sich über den Kopieren-Button im Fuß der Ansicht kopieren und löschen (sofern sie nirgends verwendet werden).
Änderungen an Templates wirken sofort. Wird also ein Live-Template bearbeitet, wird es mit dem nächsten Aufruf nach dem Speichern ausgeliefert.
| Inhalt |
|---|
Attribute der Seitentemplates
| Name | Funktion | Anmerkung |
|---|---|---|
| Name | intern | Der Name des Templates, welches in der Oberfläche angezeigt wird. (z. B. in Suchen, der Ressourcen-Ansicht usw.) |
| Titel | Der Seitentitel <title>-Tag | Der Seitentitel, der u. a. im Browser-Tab oder den Suchergebnissen angezeigt wird. Seitentitel sollten aus SEO-Sicht nicht länger als 60 Zeichen sein. |
| Beschreibung | Die Beschreibung der Seite <description>-Tag | Die Beschreibung der Seite, die u. a. in den Suchergebnissen unter dem Titel angezeigt wird. Die Beschreibung sollte aus SEO-Sicht nicht länger als 160 Zeichen sein. |
| Layout | Definiert den Aufbau (Spaltigkeit) der Seite | 1-Spaltig ist der Standard. Hier wird der komplette Content über eine große Spalte verteilt. Er kann intern in verschiedenspaltige Blöcke aufgeteilt werden. 2-Spaltig aktiviert die sog. "Marginalspalte" auf der rechten Seite. Marginal daher, weil diese auf allen Mobilgeräten nicht zu sehen ist. Daher sollten dort nur optionale Informationen für Desktop-Besucher untergebracht werden. |
| Links in neuem Tab öffnen | Öffnet alle internen & externen Links in einem neuen Tab | Interne Links (also auf Inhalte der gleichen Seite) werden normalerweise intern, also im gleichen Fenster / Tab geöffnet. Externe (Inhalte anderer Domains) werden immer in einem neuen Tab geöffnet. Diese Einstellung sorgt dafür, dass ausnahmslos alle Links auf der Seite (zu Artikeln, Seiten, Formularen usw.) in einem neuen Fenster / Tab geöffnet werden. Diese Funktion ist u. a. für in IFrames eingebettete Seiten hilfreich, bei denen z. B. Suchergebnisse angezeigt werden, die dann nicht im IFrame, sondern in einem neuen Tab geöffnet werden sollen. |
Filterung der Inhalte
Jedes Seitentemplate und jede Seitenkomponente kann fest legenfestlegen, welche dynamischen Inhalte aus der Datenbank selektiert und dargestellt werden sollen.
Siehe dazu: Filter für Seiten und Komponenten
Seitenlayout-Komponenten
Der Aufbau eines Seitentemplates erfolgt durch Anordnung und Bearbeitung der gewünschten Seiten-Komponenten im Editor. Neue Komponenten werden per Drag & Drop aus dem Vorrat rechts auf den Editor eingefügt.
Im folgenden werden die einzelnen verfügbaren Seitenlayout-Komponenten und ihre Parameter beschrieben.
| Inhalt | ||
|---|---|---|
|
Komponente: Artikelgrid
Das Artikelgrid stellt einen oder mehrere Artikel gemäß der gewählten Darstellungsform dar.
| Parameter | Standard | Beschreibung | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Filter | leer | Erlaubt es innerhalb dieser Komponente abweichende Filterkriterien zu setzen | |||||||||||||||||||||||||
Darstellung | - | Legt die Darstellung dieser Komponente fest. Mögliche Werte:
| |||||||||||||||||||||||||
| Vorschautyp | Bild oben, Text unten | Legt die Darstellung der Artikel in dieser Komponente fest. Mögliche Werte:
| |||||||||||||||||||||||||
| Artikelüberschrift anzeigen | True | (nur in der Grid-Darstellung) Über die Option kann die Artikelüberschrift ausgeblendet werden. | |||||||||||||||||||||||||
| Teaser max. Zeilen | leer | (nur in der Grid-Darstellung) Hier kann die Menge der Teaser-Text Zeilen (normalerweise vom VHost vorgegeben) für diesen Slider überschrieben werden. | |||||||||||||||||||||||||
| Artikelanzahl | 10 | Legt fest, wie viele Artikel diese Komponente anzeigen soll. Die Option steht nur bei Komponenten mit einer Grid-Darstellung zur Verfügung. | |||||||||||||||||||||||||
| Anzeigen Einmischen | False | (nur in der Grid-Darstellung) Wird dieser Schalter auf "True" gesetzt (Häkchen an), werden in den Vorschautypen "Bild oben, Text unten" und "Nur Text" zwei bzw. eine Anzeige vom Typ Button in einer einstellbaren Frequenz eingemischt.
| |||||||||||||||||||||||||
| Anzeigen-Priorität max | 100% | (nur in der Grid-Darstellung, nur sichtbar wenn "Anzeigen einmischen" aktiv ist) Ein Wert in % der angibt, bis zu welcher Priorität Anzeigen in dieser Komponente geladen / dargestellt werden sollen. | |||||||||||||||||||||||||
| Anzeigen-Priorität min | 0% | (nur in der Grid-Darstellung, nur sichtbar wenn "Anzeigen einmischen" aktiv ist) Ein Wert in % der angibt, ab welcher Priorität Anzeigen in dieser Komponente geladen / dargestellt werden sollen. (0% heißt bei Anzeigen nie darstellen, daher wird die 0 in diesem Feld als "Nicht gesetzt" interpretiert.) | |||||||||||||||||||||||||
| Anzeigenfrequenz | 4 | (nur in der Grid-Darstellung, nur sichtbar wenn "Anzeigen einmischen" aktiv ist) Gibt an, nach wie vielen Artikeln eine Anzeige (oder 2 untereinander) eingefügt werden soll. (1 = Ein Artikel, Eine Anzeige, Ein Artikel, ... oder 4 = Artikel, Artikel, Artikel, Anzeige, Artikel, Artikel, Artikel, Anzeige, ...) | |||||||||||||||||||||||||
| Weitere Artikel nachladbar | False | (nur in der Grid-Darstellung) Wird dieser Schalter auf "True" gesetzt (Häkchen an) kann der Besucher weitere Artikel über einen Button am Seitenende nachladen.
| |||||||||||||||||||||||||
| VG/HG/Hover-Farbe | leer | Erlaubt es einen entsprechenden Farbwert für die Komponente zu setzen. |
Komponente: Artikelslider
Der Artikelslider stellt mehrere Artikel in einem Blätterkatalog dar.
| Parameter | Standard | Beschreibung | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Filter | leer | Erlaubt es innerhalb dieser Komponente abweichende Filterkriterien zu setzen | |||||||||||||
| Überschrift | leer | Wird dieses Feld mit einem Text gefüllt, wird dieser als Überschrift im Slider angezeigt. (Verfügbar ab Version 2022.1/15) | |||||||||||||
| Darstellung | 3 spaltig (dreifach blättern) | Hier kann das Blätterverhalten des Sliders eingestellt werden. Mögliche Werte:
| |||||||||||||
Vorschautyp | Bild oben, Text unten | Legt die Darstellung der Artikel in dieser Komponente fest. Mögliche Werte:
| |||||||||||||
| Artikelüberschrift anzeigen | True | Über die Option kann die Artikelüberschrift ausgeblendet werden. | |||||||||||||
| Teaser max. Zeilen | leer | Hier kann die Menge der Teaser-Text Zeilen (normalerweise vom VHost vorgegeben) für diesen Slider überschrieben werden. | |||||||||||||
| Artikelanzahl | 15 | Legt fest, wie viele Artikel diese Komponente anzeigen soll. | |||||||||||||
| Anzeigen Einmischen | False | Wird dieser Schalter auf "True" gesetzt (Häkchen an), werden in den Vorschautypen "Bild oben, Text unten" und "Nur Text" zwei bzw. eine Anzeige vom Typ Button in einer einstellbaren Frequenz eingemischt.
| |||||||||||||
| Anzeigen-Priorität max | 100% | Ein Wert in % der angibt, bis zu welcher Priorität Anzeigen in dieser Komponente geladen / dargestellt werden sollen. | |||||||||||||
| Anzeigen-Priorität min | 0% | Ein Wert in % der angibt, ab welcher Priorität Anzeigen in dieser Komponente geladen / dargestellt werden sollen. (0% heißt bei Anzeigen nie darstellen, daher wird die 0 in diesem Feld als "Nicht gesetzt" interpretiert.) | |||||||||||||
| Anzeigenfrequenz | 4 | Gibt an, nach wie vielen Artikeln eine Anzeige (oder 2 untereinander) eingefügt werden soll. (1 = Ein Artikel, Eine Anzeige, Ein Artikel, ... oder 4 = Artikel, Artikel, Artikel, Anzeige, Artikel, Artikel, Artikel, Anzeige, ...) | |||||||||||||
| VG/HG/Hover-Farbe | leer | Erlaubt es einen entsprechenden Farbwert für die Komponente zu setzen. |
Komponente: Artikelbox
Die Artikelbox stellt einen speziellen Artiel Artikel dar. Sie wird meist als statischer "Kopf" über einer Artikelliste (zBz. B. auf Themen oder Regionalseiten) verwendet.
| Parameter | Standard | Beschreibung |
|---|---|---|
| Artikel | Darzustellender Artikel | |
Darstellung | - | Legt die Darstellung dieser Komponente fest. Mögliche Werte:
Ist im Artikel mindestens ein Bild vorhanden, wird dieses angezeigt. Ist kein Bild-Asset vorhanden, wird das in den Stammdaten>Portaleinstellungen angegebene Platzhalter-Asset angezeigt, oder abhängig vom Konfigurationsschalter "ReplacePlaceholderImagesWithAds" Anzeigen vom Typ "Button" eingemischt. |
| VG/HG-Farbe | leer | Erlaubt es einen entsprechenden Farbwert für die Komponente zu setzen. |
Komponente: Anzeigenplatz
Diese Komponente erlaubt es, eine konkrete Anzeige - oder über einen wählbaren Anzeigenplatz definierte Anzeigen einzustreuen. Wird keine passende Anzeige gefunden oder ist die fest eingestellte Anzeige abgelaufen (Datum/Klicks/Impressions erreicht), wird die Komponente automatisch ausgeblendet.
| Parameter | Standard | Beschreibung |
|---|---|---|
| Anzeigentyp | Legt fest, welche Anzeigentypen (Button, Banner,...) hier eingemischt werden sollen. | |
| Anzeige | Erlaubt es eine Konkrete Anzeige darzustellen. (setzt "Anzeigentyp" außer Kraft) | |
| Filter | Ermöglicht es, auf den eingegebenen Filter passende Anzeigen zu filtern |
Komponente: HTML
...
(Source) / HTML (WYSIWYG)
Mithilfe der HTML/Freitext-Komponente Komponenten können statische Inhalte oder HTML Inhalte in eine Seite eingebunden werden. Bitte beachten Sie vor allem beim einbetten Einbetten externer HTML/JavaScript Inhalte die DSGVO sowie geltende weitere Sicherheitsregeln. Testen Sie Seiten, auf denen Sie externe Inhalte nachladen, ausführlich und regelmäßig, da externe, nachgeladene Inhalte das #Portal PORTAL auch ungünstig beeinflussen können.
Redaktioneller Inhalt
Wird das Merkmal "Redaktioneller Inhalt" an einer HTML Komponente aktiviert, bedeutet das folgendes:
- Es wird ggfs. ein Platzhalter angezeigt, wenn im Consent-Management Tool der Anbieter abgelehnt wurde.
- Embed-Scripts (z. B. für Instagram/Twitter) werden ausgeführt.
Asset-Einfügen
Speziell an den HTML-Komponenten gibt es eine Hilfe für das Einfügen von Assets.
| Über den Knopf gelangt man in die Asset-Auswahl |
| Beim Bestätigen der Auswahl fragt die Applikation, wie das Asset eingefügt werden soll | |
| Als Image-Tag einfügen fügt das Bild direkt ein. |
| Als Download-Link einfügen fügt ein Link ein, der bei Klick direkt das Asset herunterlädt. | |
| Nur Link einfügen fügt einen Link auf die Asset-Datei ein. | |
Dabei wird auf das Assetmanagement des Portals zugegriffen. Beim Einfügen wird das Default-Preset für Assets benutzt, s Konfiguration Image-Processing. Bei Vektorgrafiken bietet es sich an, das Preset auf "vector" einzustellen, damit wird das Original PDF ausgeliefert, sonst wird von dem PDF ein JPG produziert. | |
Platzhalter in den HTML Komponenten
Innerhalb der HTML Komponenten können ggfs. Platzhalter verwendet werden. Platzhalter können maskiert oder unmaskiert eingefügt werden. (Maskieren bedeutet: HTML Tags durch lassen, oder nicht.)
[(${variable})] -> nicht maskiert[[${variable}]] -> maskiert |
Verfügbare Platzhalter:
| Platzhalter | Beschreibung |
|---|---|
authorName | Der Autorenname aus dem myContent Profil. |
| authorDescription | Die Autorenbeschreibung aus myContent. (optional) |
| authorImageUrl | Das Autorenasset aus myContent. (optional) |
| authorImageUrlWithPreset | Das Autorenasset aus myContent. (optional) Preset: Small4x3 |
| authorHasImage | 'true', wenn der Autor ein Asset hinterlegt hat. |
| authorHasDescription | 'true', wenn der Autor eine Beschreibung hat. |
Beispiele für HTML Komponenten
| Codeblock | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<div class="container">
<h1>Alle Artikel von [[${authorName}]]</h1>
[# th:if="${authorHasDescription}"]
<div style="display:flex;gap:var(--pscp-space-m);">
[# th:if="${authorHasImage}"]
<img style="border-radius: 50%;" src="[[${authorImageUrl}]]?width=150&height=150" alt="Autorenportrait" width="150px" height="150px">
[/]
<div style="align-items: center;display: flex;">
<div>[(${authorDescription})]</div>
</div>
</div>
[/]
</div>
<hr/> |
Komponente: Abstand
Definiert einen Abstand zu einer anderen Komponente. Abstände addieren sich nicht.
| Parameter | Standard | Beschreibung |
|---|---|---|
| Abstand (Bootstrap) | 3 | Gibt den gewünschten Abstand in Bootstrap-Einheiten an. 1=Klein, 5=Groß Was eine "Bootstrap-Einheit" ist, legt das responsive Grundlayout fest. |