Zum Inhalt springen

Schema & Feldtypen

In setzkasten.config.ts definierst du welche Inhalte existieren und wie sie bearbeitet werden — Sections für Seitenbereiche, Collections für Listen wie Blog-Artikel.

Sections vs. Collections

Sections

Einmalige Seitenbereiche — Hero, Features, Footer. Genau ein JSON-Datensatz pro Section.

  • content/_sections/hero.json
  • → Über getSection('hero') abrufbar
  • → Im Page Builder reihenfolgebares

Collections

Beliebig viele Einträge — Blog, Team, Produkte. Jeder Eintrag ist eine eigene JSON-Datei.

  • content/blog/mein-post.json
  • → Über getCollection('blog') abrufbar
  • → Sortierbar, filterbar im Admin

Vollständiges Beispiel

Eine typische setzkasten.config.ts mit zwei Sections und einer Collection:

setzkasten.config.ts
import { defineConfig, defineSection, f } from '@setzkasten-cms/core'

export default defineConfig({
  storage: {
    kind: 'single',
    repo: 'acme/website',
    branch: 'main',
    appId: process.env.GITHUB_APP_ID ?? '',
    installationId: process.env.GITHUB_APP_INSTALLATION_ID ?? '',
  },

  products: {
    website: {
      label: 'Website',
      sections: {
        hero: defineSection({
          label: 'Hero',
          icon: 'layout',
          fields: {
            heading:    f.text({ label: 'Überschrift', required: true }),
            subheading: f.text({ label: 'Untertitel' }),
            image:      f.image({ label: 'Hintergrundbild' }),
            cta:        f.text({ label: 'Button-Text' }),
            ctaUrl:     f.text({ label: 'Button-URL' }),
          },
        }),
        features: defineSection({
          label: 'Features',
          icon: 'star',
          fields: {
            heading: f.text({ label: 'Überschrift' }),
            items:   f.array({
              label: 'Feature-Liste',
              item: {
                title: f.text({ label: 'Titel' }),
                desc:  f.text({ label: 'Beschreibung' }),
                icon:  f.text({ label: 'Icon-Name' }),
              },
            }),
          },
        }),
      },
    },
  },

  collections: {
    blog: {
      label: 'Blog',
      fields: {
        title:       f.text({ label: 'Titel', required: true }),
        date:        f.text({ label: 'Datum' }),
        description: f.text({ label: 'Beschreibung' }),
        body:        f.richtext({ label: 'Inhalt' }),
        coverImage:  f.image({ label: 'Titelbild' }),
      },
    },
  },
})

Feldtypen-Referenz

f.text()

Einzeiliger Text. Mit formatting: true für Mini-RTE (fett, kursiv, Links).

f.text({ label: 'Titel', required: true })
f.richtext()

Mehrzeiliger Rich Text mit TipTap-Editor (Absätze, Listen, Links).

f.richtext({ label: 'Inhalt' })
f.image()

Bild-Upload oder URL. Speichert { src, alt } als JSON-Objekt.

f.image({ label: 'Hintergrundbild' })
f.boolean()

Ein/Aus-Schalter. Speichert true oder false.

f.boolean({ label: 'Sichtbar', defaultValue: true })
f.number()

Zahlenwert.

f.number({ label: 'Anzahl' })
f.array()

Liste von Objekten. Jedes Item hat ein eigenes Feldobjekt (item: {...}).

f.array({ label: 'Punkte', item: { text: f.text({ label: 'Text' }) } })
f.select()

Dropdown aus vordefinierten Optionen (options: []).

f.select({ label: 'Farbe', options: ['rot', 'blau', 'grün'] })

Inhalte in Astro-Seiten nutzen

Das setzkasten:content-Modul stellt drei Funktionen bereit:

Funktion Verwendung
getSection(key) Gibt die Felder einer Section zurück
getCollection(key) Gibt alle Einträge einer Collection als Array zurück
getCollectionEntry(col, slug) Gibt einen einzelnen Eintrag anhand seines Slugs zurück