Referenz zu den Designoptionen

Theme-Optionen sind Einstellungen, die Ihr Theme im Layout-Editor bereitstellt, damit die Nutzer, die damit veröffentlichen, Anpassungen vornehmen können, ohne das Theme selbst zu ändern. Sie werden in der options von theme.json definiert, und die Vorlagen lesen den für das Layout gewählten Wert als theme.options.<key>ein.

{
    "key": "accent",
    "type": "color",
    "label": "Accent color",
    "description": "Links, buttons and the portal banner.",
    "default": "#3a46e8"
}

Feld	Erforderlich	Beschreibung
`key`	Ja	Der Name, den die Vorlagen verwenden. Eine Option ohne Schlüssel wird ignoriert.
`type`	Nein	Der Wertetyp, der das Feld im Layout-Editor bestimmt. Siehe die unten aufgeführten Typen. Ein fehlender oder unbekannter Typ führt zu einem Textfeld.
`label`	Nein	Der Name der Option im Layout-Editor. Ist kein Name angegeben, wird der Schlüssel angezeigt.
`description`	Nein	Unter dem Feld angezeigter Hilfetext, maximal 500 Zeichen.
`default`	Nein	Der Wert, der so lange verwendet wird, bis ihn jemand ändert. Weisen Sie jeder Option einen Standardwert zu, damit das Theme funktioniert, bevor jemand die Einstellungen festlegt.
`values`	Für `select`	Die Auswahlmöglichkeiten.

Typen

Typ	Auch geschrieben als	Im Layout-Editor	Werte in Vorlagen
`color`		Eine Farbauswahl	Eine Zeichenkette
`text`	`string`, `url`	Ein Textfeld	Eine Zeichenkette
`select`	`choice`, `enum`	Eine Liste mit Auswahlmöglichkeiten	Eine Zeichenkette
`toggle`	`bool`, `boolean`	Aktivieren oder deaktivieren	`true` oder `false`
`number`	`int`, `integer`, `float`	Ein Textfeld, das beim Speichern des Layouts auf einen numerischen Wert überprüft wird	Eine Zahl
`image`		Bild hochladen	Der Dateiname des Bildes

Farbe: Der Wert muss ein Hex-Farbcode mit 3, 4, 6 oder 8 Ziffern sein, z. B. #3a46e8, oder ein CSS-Farbname, z. B. „rebeccapurple“ oder „transparent“. Werte wie „rgb(…)“ und „hsl(…)“ werden nicht akzeptiert. Verwenden Sie den Standardwert "", um die Option leer zu lassen, und prüfen Sie dies in der Vorlage.

<style>:root { --accent: {{ theme.options.accent }}; }</style>

text: Bis zu 2.000 Zeichen.

select: Listen Sie die Auswahlmöglichkeiten unter values auf, entweder als Objekte mit einem Wert und einer Bezeichnung oder als einfache Zeichenfolgen, die beides enthalten:

{
    "key": "hero-contrast",
    "type": "select",
    "label": "Portal banner text and logo",
    "default": "auto",
    "values": [
        { "value": "auto",  "label": "Automatic (from the background)" },
        { "value": "light", "label": "Light" },
        { "value": "dark",  "label": "Dark" }
    ]
}

"values": ["auto", "light", "dark"]

Ein select ohne Werte wird als Textfeld angezeigt.

Umschalten:

{% if theme.options.sidebar %}
    <nav class="sidebar">…</nav>
{% endif %}

Zahl: Jede endliche Zahl, wie beispielsweise 68 oder 1.5.

Bild: Die Person, die die Option festlegt, lädt ein Bild hoch, und Paligo veröffentlicht es zusammen mit den Assets des Themes. Verwenden Sie asset(), um darauf zu verlinken:

{% if theme.options['hero-image'] %}
    <div class="hero" style="background-image: url('{{ asset(theme.options['hero-image']) }}')"></div>
{% endif %}

Anzeigeoptionen in Vorlagen

Verwende einen Punkt für einen einfachen Schlüssel und Klammern für einen Schlüssel, der einen Bindestrich enthält:

{{ theme.options.accent }}
{{ theme.options['hero-image'] }}

Der Layout-Editor überprüft die Werte beim Speichern des Layouts. Wenn ein gespeicherter Wert nicht zum Typ der Option passt – beispielsweise nachdem Sie eine Option von text auf toggle geändert haben –, wird er beim Veröffentlichen ignoriert und der Standardwert verwendet.

Referenz zu den Designoptionen

Typen

Anzeigeoptionen in Vorlagen

Suchresultat