Entwicklung
Block-Studio: Reiter Code
HTML-Template und SCSS eines Designs bearbeiten, mit der Template-Syntax von bloqy.
Blöcke und ihre Designs liegen in config/modules/<typ>/. Bearbeitet werden sie im Block-Studio: Gestaltung → 
Blöcke → Block öffnen. Die Reiter heißen Allgemein, Inhalt, Aussehen, Code und Verwendung. Hier geht es um den Reiter Code; die übrigen beschreibt der Bereich für Designer.
HTML und SCSS
- HTML ist das Template des Designs: normales HTML mit Platzhaltern. Es sollte genau ein äußeres Element haben.
- SCSS gehört nur zu diesem Design. bloqy kapselt es automatisch in die Klasse des Designs (
.mv-<id>) und übersetzt es ins Theme-CSS. So stören sich Designs nicht gegenseitig.
Die Leiste Platzhalter fügt Felder, Einstellungen, Stile und Bereiche per Klick an der Cursor-Position ein.
Template-Syntax kurz
| Syntax | Bedeutung |
|---|---|
{{field.title}} | Wert eines Felds (wird escaped) |
{{setting.level}} | Wert einer Einstellung |
class="{{style.align}}" | Klassen eines gewählten Stils |
{{slot.content}} | Bereich für weitere Blöcke |
{{#if field.x}} … {{else}} … {{/if}} | Bedingung |
{{#each field.items}} {{item.title}} {{/each}} | Schleife über eine Liste |
Damit Redakteure direkt in der Seite bearbeiten können, tragen Elemente Attribute wie data-cms-field="title" und Listeneinträge data-cms-repeat. Alle data-cms-*-Attribute werden für Besucher entfernt.
Was es nicht gibt
Kein PHP, kein <script> und keine Event-Handler im Template; sie werden beim Speichern entfernt. Interaktive Funktionen kommen aus dem JavaScript des Blocks oder der JavaScript-Verwaltung. Beim Speichern prüft das Block-Studio die Syntax.
Wie Designs, Stile und Theme-Variablen zusammenspielen, zeigt Blöcke, Designs, Stile und Variablen – technisch. Die vollständige Referenz liegt in deiner Installation unter docs/module/: template-engine.md, varianten.md, felder-und-einstellungen.md, modultyp.md und beispiele.md.