Assets, Icons, Schriften und Übersetzungen

Asset-Hashing

Dateien in assets/ bekommen beim Build einen Inhalts-Hash im Namen. Ändert sich die Datei, ändert sich der Name – Browser laden automatisch die neue Version.

{# ✅ #}
{{ 'css/main.min.css' | asset_url | stylesheet_tag }}

{# ❌ Hash wird nicht aufgelöst #}
<link rel="stylesheet" href="/assets/css/main.min.css">

url(...)-Verweise in CSS-Dateien (Schriften, Hintergrundbilder) schreibt der Build automatisch auf die gehashten Namen um. Critical CSS wird beim Schreiben jeder Seite inline in den <head> gelegt.

Dynamische Werte

<section class="intro" id="intro-{{ section.id }}">
  <style>#intro-{{ section.id }} { padding: {{ section.settings.padding | default: 4 }}rem 0; }</style>
  …
</section>

SVG-Sprite

<svg viewBox="0 0 24 24" aria-hidden="true">
  <use href="{{ 'images/icons/sprite.svg' | asset_url }}#icon-arrow-forward"></use>
</svg>

Mit stroke="currentColor" im Symbol erben Icons die Textfarbe.

Schriften

Setting-Felder vom Typ font_picker wählen Google-Schriften. Beim Speichern lädt Mosaio die Dateien herunter und liefert sie von der Kundendomain aus. Im Layout bindest du sie mit {{- theme.fonts | font_face_tag }} ein. Eigene Schriftdateien laden Nutzer in den Theme-Einstellungen hoch.

<style>
  :root { --font-body: '{{ settings.font_body | css_safe }}', system-ui, sans-serif; }
</style>

Übersetzungen

// locales/de.default.json
{
  "general": { "submit": "Absenden", "close": "Schließen" },
  "forms":   { "email": "E-Mail-Adresse" }
}

{{ 'general.submit' | t }}

Mehrsprachigkeit ist für eine spätere Ausbaustufe geplant. Lege Texte trotzdem schon heute in locales/ ab – die Struktur ist die richtige.