Einführung

Die Layout-Komponente bietet eine semantische Seitenstruktur aus benutzerdefinierten Kopfzeilen, Seitennavigationsleisten (Sidern), Hauptinhaltsbereichen und Fußzeilen. Sie unterstützt benutzerdefinierte Seitenleistengrößen, sichtbarkeitsbasierte Breakpoints, feste Scroll-Sperren (Sticky) und viewportfüllende Container.

Im Page-Builder-CMS können Inhaltsautoren und Entwickler semantische Strukturpanel konfigurieren, indem sie Karten, Kopfzeilen, Stacks und Buttons in dedizierte Slot-Arrays platzieren.

Verwendung

Diese Beispiele veranschaulichen, wie Inhaltseditoren semantische Seitenvorlagen binden und strukturieren.

1. Standardmäßige Seitenhülle aus Kopf, Inhalt und Fuß

Ein standardmäßiges Dokument- oder Artikellayout mit semantischen Kopfzeilen oben und einem Fußzeilen-Panel unten.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Site Brand Header", "as": "h4", "size": "sm" }
  ],
  "content": [
    { "type": "text", "content": "Main Article and Interactive Content" }
  ],
  "footer": [
    { "type": "text", "content": "© 2026 Acme Corp. All rights reserved.", "size": "xs" }
  ]
}

2. Dashboard-Hülle mit Seitennavigation (Sider)

Fügt dem Hauptinhaltsbereich links eine Navigationsleiste oder ein Rail hinzu. Sider können benutzerdefinierte sm-, md- oder lg-Breiten haben und so konfiguriert werden, dass sie auf kleinen mobilen Viewports automatisch einklappen.

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard System", "as": "h4", "size": "sm" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "text", "content": "Analytics Overview", "size": "sm" },
        { "type": "text", "content": "Cloud Infrastructure", "size": "sm" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Cloud systems are operational. Latency is within normal bounds." }
  ]
}

3. Verschachtelte Layout-Komposition

Layouts lassen sich sauber in anderen Layouts verschachteln. Dies ist nützlich, wenn Sie eine breite Site-Kopf- und -Fußzeile wünschen, aber nur der mittlere Inhaltsbereich eine Seitennavigation enthalten soll.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Global Full-Width Header", "as": "h3" }
  ],
  "content": [
    {
      "type": "layout",
      "siderWidth": "md",
      "sider": [
        { "type": "text", "content": "Nested Sidebar Rail" }
      ],
      "content": [
        { "type": "text", "content": "Nested Content Body" }
      ]
    }
  ],
  "footer": [
    { "type": "text", "content": "Global Full-Width Footer", "size": "xs" }
  ]
}

Eigenschaften

Entwicklerhinweise & Barrierefreiheit

• Verschachtelungsregeln & Tiefengrenze: Sveltia CMS erzwingt im Editor eine visuelle Verschachtelungsgrenze von etwa vier Ebenen. Diese Tiefenbegrenzung schränkt ein, was über die UI gebaut werden kann, begrenzt aber nicht den Layout-Compiler – manuell verfasste JSON-Vorlagen können Layouts beliebig tief verschachteln.
• Semantische Elementzuordnung: Diese Komponente bildet direkt auf gültige, semantische HTML5-Elemente ab: <header>, <aside>, <main> und <footer>.
• Skip-Navigation-Kompatibilität: Stellen Sie bei Verwendung benutzerdefinierter Kopf- und Fußzeilen sicher, dass Überschriften logisch angeordnet sind (z. B. mit einem h1 auf der Seite beginnend), um hohe Barrierefreiheitswerte zu halten.