Darstellung
Render-Eingaben, eigene Navigation mit SDK-Hilfen, Theme-Tokens, Dunkelmodus und Barrierefreiheit.
Render-Eingaben
Die Render-Funktion bekommt TemplateRenderProps aus dem SDK:
| Eingabe | Inhalt |
|---|---|
site | Name, Branding (brandName, tagline), Theme-Tokens (u. a. logoUrl), Art und Rolle der Website |
menus | Menüs je Region, bereits nach Sichtbarkeit gefiltert |
mainBlocks | Blöcke der Region main |
renderBlock | Block-Renderer der Plattform – für jeden Block aufrufen, Reihenfolge nicht ändern |
currentPath | aktueller Pfad (aktive Navigation) |
page | Seitentitel und Eltern-Seiten (Brotkrumen) |
settings | geprüfte Einstellungen mit Defaults |
import { defineWebTemplate, type WebTemplate } from "@patriotconnect/template-sdk";
import { meinTemplateManifest } from "../shared/manifest.js";
import { MeinTemplate } from "./mein-template-template.js";
export const webTemplate: WebTemplate = defineWebTemplate(meinTemplateManifest, MeinTemplate);Prüfen Sie die Einstellungen in der Render-Funktion defensiv erneut (safeParse, bei Fehler Defaults) – eine
Render-Funktion wirft nie.
Navigation, Footer und Consent-Link
Navigation und Footer gehören dem Template. Das SDK liefert die Regeln dahinter:
| Hilfe | Zweck |
|---|---|
isMenuItemActive(item, currentPath) | aktive Seite – als aria-current="page" ausgeben |
menuItemRel(item) | sicheres rel für neue Tabs (noopener noreferrer) |
linkableMenuItems(menu) | verlinkbare Einträge ohne Trenner und Überschriften |
safeInternalPath(path) | nur interne Pfade verlinken (Brotkrumen, kein Open Redirect) |
consentSettingsHref(menus), CONSENT_OPEN_ATTRIBUTE, CONSENT_SETTINGS_LABEL | Pflicht-Link „Datenschutz-Einstellungen“ im Footer |
<a href={consentSettingsHref(menus)} {...{ [CONSENT_OPEN_ATTRIBUTE]: "" }} className="underline">
{CONSENT_SETTINGS_LABEL}
</a>Der Link „Datenschutz-Einstellungen“ ist immer vorhanden (ADR-0098): Über das Attribut data-pc-consent-open
öffnet die Plattform die Einwilligungs-Verwaltung; ohne JavaScript führt er zur Datenschutz-Seite.
Theme und Dunkelmodus
Jede Website hat ein Theme (Farben, Logos, Schriften als Tokens), das an untergeordnete Gliederungen vererbt wird. Ein Template nutzt nur diese Tokens:
| Zweck | Klassen |
|---|---|
| Flächen | bg-section-white, bg-section-gray, bg-section-dark |
| Schrift | text-neutral-900 … text-neutral-500, font-title, font-sans |
| Akzente | brand-*, cta-* (z. B. border-brand-600) |
Nie feste Farben wie bg-white, text-black oder [#hex]: Im Dunkelmodus kippt die Plattform die Tokens, feste
Farben ergäben hell auf hell. Varianten stehen als vollständige Klassen in Tabellen im Quelltext – Tailwind erzeugt
nur, was dort ausgeschrieben steht.
| Hell, 390 px | Dunkel, 390 px |
|---|---|
 |  |
Barrierefreiheit (WCAG 2.1 AA)
- Genau ein
<main id="main-content">– Sprungziel des Skip-Links. - Genau eine H1. Gibt das Template den Seitentitel aus, setzt es
rendersTitleH1: trueim Manifest. - Jede Navigation hat einen Namen (
aria-label). - Lesereihenfolge = Dokumentreihenfolge – kein Umsortieren per CSS (
order,grid-flow-dense).
Dazu: sichtbarer Fokus (focus-visible:ring-*), Bilder mit alt, Kontrast aus den Theme-Tokens.