Tutorial: Verwendung von Blueprints in Kirby

Einleitung

Einführung in Blueprints

Blueprints sind YAML-Dateien, die beschreiben, wie der Inhalt einer Seite im Admin-Panel organisiert ist. Sie definieren die Felder und Layouts, die Du zum Erstellen und Bearbeiten von Inhalten benötigst. Blueprints befinden sich im site/blueprints-Verzeichnis Deines Kirby-Projekts.

Ein einfaches Blueprint erstellen

Beginnen wir mit einem einfachen Beispiel. Erstelle eine Datei namens default.yml im site/blueprints-Verzeichnis. Diese Datei definiert ein einfaches Blueprint für eine Standardseite.

title: Standardseite

sections:
  content:
    type: fields
    fields:
      title:
        label: Titel
        type: text
      text:
        label: Text
        type: textarea

In diesem Beispiel haben wir ein Blueprint mit zwei Feldern erstellt: title und text. Das Feld title ist ein einfaches Textfeld, während text ein Textbereich ist.

Blueprints für verschiedene Seitentypen

Kirby erlaubt es Dir, verschiedene Blueprints für unterschiedliche Seitentypen zu erstellen. Zum Beispiel könntest Du separate Blueprints für Blog-Posts, Projekte und Teammitglieder haben. Erstelle eine Datei namens blog.yml:

title: Blog Post

sections:
  content:
    type: fields
    fields:
      title:
        label: Titel
        type: text
      date:
        label: Datum
        type: date
      text:
        label: Inhalt
        type: textarea
      tags:
        label: Tags
        type: tags

Dieses Blueprint enthält Felder, die speziell für Blog-Posts nützlich sind, wie Datum und Tags.

Verknüpfung von Blueprints mit Seiten

Um ein Blueprint mit einer Seite zu verknüpfen, musst Du die site/blueprints/pages.yml-Datei bearbeiten. Diese Datei definiert, welche Blueprints für welche Seitentypen verwendet werden.

pages:
  template:
    default: default
    blog: blog

Erweiterte Felder und Optionen

Kirby bietet eine Vielzahl von Feldtypen, die Du in Deinen Blueprints verwenden kannst. Hier sind einige Beispiele:

Select Field

status:
  label: Status
  type: select
  options:
    draft: Entwurf
    published: Veröffentlicht
    archived: Archiviert

Checkbox Field

featured:
  label: Hervorgehoben
  type: checkbox

Structure Field

Das Struktur-Feld ist besonders nützlich, wenn Du wiederholbare Inhalte benötigst, wie z.B. Teammitglieder oder FAQ-Einträge.

team:
  label: Team
  type: structure
  fields:
    name:
      label: Name
      type: text
    role:
      label: Rolle
      type: text
    photo:
      label: Foto
      type: files

Sections und Layouts

Sections ermöglichen es Dir, Deine Inhalte im Panel zu organisieren. Du kannst verschiedene Arten von Sections verwenden, um z.B. Dateien, strukturierte Daten oder einfache Felder darzustellen.

Beispiel für eine File-Section

files:
  type: files
  layout: cards

Beispiel für eine Page-Section

pages:
  type: pages
  headline: Unterseiten
  layout: list

Erweiterte Optionen und Conditional Fields

Mit erweiterten Optionen kannst Du Bedingungen in Deinen Blueprints festlegen, um z.B. Felder abhängig von anderen Feldern anzuzeigen.

show_extra_info:
  label: Zusätzliche Informationen anzeigen
  type: toggle

extra_info:
  label: Zusätzliche Informationen
  type: textarea
  when:
    show_extra_info: true

In diesem Beispiel wird das extra_info-Feld nur angezeigt, wenn showextrainfo aktiviert ist.

Best Practices und Tipps

Modularität: Teile Deine Blueprints in kleinere, wiederverwendbare Einheiten auf. Du kannst z.B. Felder in separate YAML-Dateien auslagern und sie bei Bedarf einbinden.

Dokumentation: Dokumentiere Deine Blueprints gut. Nutze die Kommentarfunktion in YAML-Dateien, um zu erklären, warum bestimmte Felder und Optionen verwendet werden.

Versionierung: Verwende ein Versionskontrollsystem wie Git, um Änderungen an Deinen Blueprints nachverfolgen zu können.

Beispielprojekt: Ein Portfolio

Zum Abschluss erstellen wir ein kleines Beispielprojekt für ein Portfolio. Wir benötigen zwei Seitentypen: project und about.

Blueprint für Projekte (project.yml)

title: Projekt

sections:
  content:
    type: fields
    fields:
      title:
        label: Titel
        type: text
      description:
        label: Beschreibung
        type: textarea
      date:
        label: Datum
        type: date
      tags:
        label: Tags
        type: tags
      images:
        label: Bilder
        type: files
        layout: cards

Blueprint für Über mich (about.yml)

title: Über mich

sections:
  content:
    type: fields
    fields:
      title:
        label: Titel
        type: text
      text:
        label: Text
        type: textarea
      photo:
        label: Foto
        type: files
        layout: cards

Konfiguration in pages.yml

pages:
  template:
    default: default
    project: project
    about: about

Jetzt hast Du ein einfaches Portfolio-Setup mit zwei verschiedenen Seitentypen und entsprechenden Blueprints.

Zusammenfassung

Blueprints in Kirby bieten eine flexible und leistungsfähige Möglichkeit, Inhalte zu strukturieren und zu verwalten. Mit den richtigen Blueprints kannst Du Deine Webseiten effizient und benutzerfreundlich gestalten. Ich hoffe, dieses Tutorial hat Dir einen guten Überblick gegeben und Dich inspiriert, Deine eigenen Blueprints zu erstellen.

Viel Spaß beim Entwickeln und Experimentieren mit Kirby!