Das Layout: layout/theme.liquid

Die Hülle um jede Seite — mit content_for_layout und den fest eingebauten Abschnitten.

Für Entwickler

Voraussetzungen

  • Recht: website:write

`layout/theme.liquid` ist die äussere Hülle jeder Seite: das `<html>`-Gerüst, der Kopfbereich, die Einbindung von CSS und JavaScript.

An der Stelle, an der die Seite selbst erscheinen soll, steht `{{ content_for_layout }}`. Dort setzt TacticTable die gerenderten Abschnitte der jeweiligen Vorlage ein.

Kopf- und Fussbereich gehören nicht in die Vorlagen, sondern ins Layout — dort mit `{% section "header" %}` und `{% section "footer" %}`. Deshalb sind sie im Theme-Editor unverrückbar und tragen das Kennzeichen „Fix".

Im Layout steht zusätzlich das Objekt `sections` bereit: eine Zuordnung vom Dateinamen eines Abschnitts auf seine Einstellungen und Blöcke. Damit kommen Sie im Kopfbereich an Werte heran, die in einem Abschnitt hinterlegt sind.

Eine Besonderheit des `{% section %}`-Tags: Der damit gerenderte Abschnitt bekommt `section.id`, `section.settings` und `section.blocks` — aber KEIN `section.type`. Abschnitte, die aus einer Vorlage kommen, haben es. Fragen Sie in einer Datei, die beides bedienen soll, also nicht danach.

Codebeispiele

layout/theme.liquid
Liquid
<!doctype html><html lang="{{ locale }}"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1">  <title>{% if page_meta.title %}{{ page_meta.title }}{% elsif page_title %}{{ page_title }} · {{ restaurant.name }}{% else %}{{ restaurant.name }}{% endif %}</title>  {%- if page_meta.description %}  <meta name="description" content="{{ page_meta.description | escape }}">  {%- elsif restaurant.description %}  <meta name="description" content="{{ restaurant.description | escape }}">  {%- endif %}  {%- if restaurant.icon_url %}  <link rel="icon" href="{{ restaurant.icon_url | safe_url }}">  {%- endif %}  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ settings.font_headline | font_url_family }}:wght@400;600&display=swap"></head><body>  {% section 'kopf' %}   <main>{{ content_for_layout }}</main>   {%- if widget.display_mode == 'floating' %}  <script src="{{ widget.loader_url | safe_url }}" data-slug="{{ widget.slug }}" data-mode="floating" async></script>  {%- endif %}  {%- if analytics.enabled %}  <script src="{{ analytics.script_url | safe_url }}" data-slug="{{ analytics.slug }}" defer></script>  {%- endif %}</body></html>
Das Gerüst um JEDE Seite. `{{ content_for_layout }}` ist die Stelle, an der die Abschnitte der jeweiligen Vorlage eingesetzt werden — ohne sie bleibt die Seite leer, und es sagt Ihnen niemand. Kopf- und Fussbereich stehen NICHT in den Vorlagen, sondern hier als `{% section %}`.
sections/kopf.liquid
Liquid
<header class="kopf" data-abschnitt="{{ section.id }}">  {%- assign logo = section.settings.logo | default: settings.logo | default: restaurant.logo_url | safe_url -%}  {% if logo != blank %}    <a href="/"><img src="{{ logo }}" alt="{{ restaurant.name | escape }}" style="width:{{ section.settings.logo_breite | default: 140 }}px"></a>  {% else %}    <a href="/">{{ restaurant.name | escape }}</a>  {% endif %}   <nav>    {%- assign hauptmenue = navigation_menus_by_handle['hauptmenue'] -%}    {% for eintrag in hauptmenue.items %}      <a href="{{ eintrag.url | safe_url }}"{% if eintrag.open_in_new %} target="_blank" rel="noopener"{% endif %}>{{ eintrag.label | escape }}</a>    {% endfor %}  </nav>   <a class="knopf" href="{{ restaurant.booking_url | safe_url }}">{{ 'kopf.reservieren' | t }}</a></header>
Der Kopfbereich als eigener Abschnitt. Die Kette `section.settings.logo | default: settings.logo | default: restaurant.logo_url` ist das übliche Muster: erst die Einstellung des Abschnitts, dann die des Themes, zuletzt das Branding des Betriebs. Das `safe_url` am Ende der Kette sichert alle drei Quellen auf einmal ab.
sections/kopf.schema.json
AusschnittJSON
{  "name": "Kopfbereich",  "settings": [    { "type": "image_picker", "id": "logo", "label": "Logo", "info": "Leer lassen: dann gilt das Logo aus den Website-Einstellungen." },    { "type": "range", "id": "logo_breite", "label": "Logo-Breite", "min": 80, "max": 320, "step": 4, "default": 140, "unit": "px" }  ],  "default": {    "settings": { "logo_breite": 140 }  }}
Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.Für einen Abschnitt, den das LAYOUT über `{% section %}` holt, zählt der Block `default.settings` — anders als bei Abschnitten aus einer Vorlage. Tragen Sie die Vorgaben deshalb an beiden Stellen ein, dann stimmt es in jedem Fall.
An die Einstellungen eines anderen Abschnitts kommen
Liquid
Überschrift der Tageskarte: {{ sections.tageskarte.settings.ueberschrift }}
Logo-Breite aus dem Kopfbereich: {{ sections.kopf.settings.logo_breite }}px
Kennung, unter der die Tageskarte in der Vorlage steht: {{ sections.tageskarte.id }}
Das Objekt `sections` ordnet den DATEINAMEN eines Abschnitts seinen Einstellungen und Blöcken zu — nicht der Kennung aus der Vorlage. So kommt der Fussbereich an einen Wert heran, den der Redakteur im Kopfbereich gesetzt hat.

Wo im Dashboard

/restaurant/[slug]/website/themes/[id]/code

Im Dashboard öffnen

Meldungen, die hierher gehören

Siehe auch

← Zurück zu Theme-Entwicklung