CSS, JavaScript, Bilder und Schriften richtig einbinden
Text-Assets, Liquid-CSS und Medien-URLs im Entwurf und auf der veröffentlichten Website.
Für Entwicklerassets/ enthält UTF-8-Text. Eine Datei assets/theme.css wird unverändert geliefert. Eine Datei assets/theme.css.liquid wird beim Abruf mit dem Theme-Kontext gerendert und unter dem Namen theme.css ausgeliefert. Binden Sie beide über asset_url ein; der Renderer verwendet in der Vorschau die Entwurfsroute und öffentlich die veröffentlichte Route.
asset_url erzeugt eine URL unter /api/themes/<theme-id>/assets/… beziehungsweise /draft-assets/…; der Filter prüft nicht, ob die Datei existiert. Eine falsche Schreibweise liefert beim Abruf 404. Für ein Stylesheet gibt es auch die Filterkette asset_url | stylesheet_tag, für JavaScript asset_url | script_tag. Ein nackter Dateiname mit stylesheet_tag ist keine gültige Asset-Adresse.
Binärdateien werden beim normalen Theme-ZIP-Import abgewiesen. Laden Sie Bilder, Videos, PDFs und Schriften in die Mediathek und speichern Sie ihre URL im Theme- oder Abschnittsfeld. image_picker ist dafür vorgesehen. Ein bereits fertiges Theme importieren Sie ohne KI; die optionale KI-Umwandlung kann Medien aus einem Website-Archiv übernehmen und verursacht KI-Kosten.
Die Engine maskiert Werte in {{ }} nicht automatisch. Freie Texte brauchen escape, src- und CSS-URLs safe_url, Linkziele safe_href. safe_url lässt http(s)- und wurzelrelative URLs zu; safe_href zusätzlich Anker, mailto und tel. Vermeiden Sie direkte ungeschützte Einstellungen in style- oder href-Attributen.
Die Locale-Dateien liegen in locales/<code>.json; de.default.json wird als de gelesen. Der Filter t sucht einen Punktpfad in locales und gibt bei fehlendem Schlüssel den Schlüssel selbst aus. Der öffentliche Renderer setzt derzeit die Theme-Standardsprache aus theme.json; en.json allein aktiviert noch keine Sprachumschaltung.
Codebeispiele
:root { --accent: {{ settings.accent | default: '#7b3f2a' }}; --width: {{ settings.content_width | default: 1120 }}px; }
.wrap { width: min(100% - 2rem, var(--width)); margin-inline: auto; }
.button { background: var(--accent); }{{ 'theme.css' | asset_url | stylesheet_tag }}
{{ 'theme.js' | asset_url | script_tag }}{% assign bild = section.settings.image | safe_url %}
{% if bild != blank %}<img src="{{ bild }}" alt="{{ section.settings.title | escape }}" loading="lazy">{% endif %}
<a href="{{ restaurant.booking_url | safe_href }}">Reservieren</a>Siehe auch
- Ein vollständiges Restaurant-Theme zum KopierenAlle Dateien eines kleinen, lauffähigen TacticTable-Themes: Layout, zwei Vorlagen, editierbare Abschnitte und Blöcke, Navigation, CSS und Sprachen.
- Die eigenen Liquid-FilterSieben Filter kommen von TacticTable dazu — alle übrigen sind die von LiquidJS.
- Texte übersetzen: Sprachdateien und der t-FilterWie die Sprachdateien aufgebaut sind, wie sie ausgewählt werden — und warum derzeit immer die Standardsprache gewinnt.
- Die Liquid-Umgebung: wie streng sie istUnbekannte Variablen und Filter sind still, unbekannte Tags brechen ab — und ausgegeben wird ohne Maskierung.