Zweig-Syntax

Die Master Addons Widget-builder Rendert HTML, CSS und JavaScript Ihres Widgets über a Twig-Syntax-Vorlagen-Engine. Wenn Sie Twig in Timber oder Craft CMS berührt haben, wird sich die Syntax bekannt vorkommen: {{ tokens }} Druckfeldwerte, {% if %} Blöcke Markup anzeigen oder ausblenden, und {% for %} Schleifen gehen durch Repeaterreihen.

Dies ist eine sichere Teilmenge, die in das Plugin eingebaut ist, nicht die vollständige Twig-Bibliothek, es gibt kein eval und kein kompiliertes PHP dahinter, und jeder gedruckte Wert wird aufgrund seines Feldtyps maskiert Sie erhalten die Teile von Twig, die für Widget-Vorlagen wichtig sind, ohne die Teile, die einen Seitenersteller in ein Sicherheitsproblem verwandeln könnten.

Wo Sie Vorlagencode schreiben #

Der Widget Builder-Editor verfügt über drei Code-Registerkarten, und die Engine läuft auf allen:

• HTML: Das Markup Ihres Widgets Token, Bedingungen und Schleifen leben alle hier.
• CSS: Die Stile Ihres Widgets Tokens funktionieren innerhalb von Eigenschaftswerten, sodass ein Farbfeld Feeds durchführen kann background: Direkt.
• JS: JavaScript optional Auch hier funktionieren Token, was praktisch ist, um Feldwerte in ein Skript zu übergeben.

Jedes Steuerelement, das Sie dem Optionsfeld des Widgets hinzufügen, wird zu einer Vorlagenvariablen, die nach dem des Felds benannt ist heißen Einstellung. Fügen Sie ein Textfeld Benannt title und {{ title }} Druckt, was der Benutzer eingegeben hat Die Seitenleiste Dokumentation neben dem Code-Editor listet das Token für jedes Feld auf, während Sie es hinzufügen, sodass Sie die Schreibweise nie erraten müssen.

Hinweis: Die HTML-Vorlage wird in jedem Build rendert, die CSS- und JS-Ausgabe wird jedoch mit ausgeliefert Master Add-dons Pro, genau wie der vollständige Widget Builder selbst.

Druckwerte mit Token #

Die einfachste Vorlage ist Markup plus Token:

<div class="hero">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <a href="{{ button_link }}">{{ button_text }}</a>
</div>

Ein paar wissenswerte Regeln:

• Punktierte Wege In strukturierte Werte greifen: {{ item.name }} In einer Schleife, oder {{ tabs.tab_1.person }} Für eine Tabs-Steuerung.
• Medienfelder drucken ihre URL. Wenn ein Token ein Bild- oder Videoarray enthält, gibt die Engine das aus url Teil automatisch, also <img src="{{ photo }}"> Funktioniert einfach.
• Die Flucht folgt dem Feldtyp. URL-Felder durchlaufen URL-Escaping, WYSIWYG - und Code-Felder erlauben sicheres HTML, und alles andere ist HTML-escapedSie müssen nichts selbst bereinigen.

Filter #

Einen Filter an ein Token mit dem Rohrzeichen anhängen Der Motor unterstützt fünf:

• {{ title|upper }} Druckt den Wert in GROSSBUCHSTABEN.
• {{ title|lower }} Druckt es klein.
• {{ title|trim }} Streifen Leerraum von beiden Enden.
• {{ content|raw }} Überspringt das Entkommen und druckt den Wert so aus, wie er ist.
• {{ content|e }} (oder |escape) Kräfte, die nach einem wieder fliehen raw.

Behandeln |raw Als scharfes Werkzeug Es existiert für Fälle, in denen ein Feld absichtlich Markup hält, und die Verwendung auf einem Klartextfeld bedeutet, was auch immer ein Seiteneditor eingibt, landet unausgeflogen auf Ihrer Seite. Wenn das Feld ein WYSIWYG- oder Codetyp ist, benötigen Sie ihn selten raw überhaupt, da diese Typen bereits sichere HTML-Tags ermöglichen.

Bedingte Markierung mit if-Blöcken #

Ein {% if %} Block gibt seinen Inhalt nur dann wieder, wenn die Bedingung vorüber ist Dies ist der Front-End-Partner der Option Panelseitige Bedingungen: Bedingungen verbergen die Steuerung im Elementorpanel, und die if Block entfernt das passende Markup von der Seite.

{% if show_badge %}
  <span class="badge">{{ badge_text }}</span>
{% endif %}

Eine bloße Variable wird auf Wahrhaftigkeit überprüft, Twig-Stil: leere Zeichenfolgen, 0Leere Listen und nicht festgelegte Werte gelten als falsch. Da a Schalterfeld Geschäfte yes Wenn an und ein leerer Wert, wenn aus, {% if show_badge %} Alles was Sie für einen Kippschalter brauchen.

Vollverzweigung funktioniert auch:

{% if layout == "card" %}
  <div class="item item--card">...</div>
{% elseif layout == "list" %}
  <div class="item item--list">...</div>
{% else %}
  <div class="item">...</div>
{% endif %}

Betreiber, die Sie unter Bedingungen verwenden können #

• Vergleiche: ==, !=, >, <, >=, <=. Werte werden als Zahlen verglichen, wenn beide Seiten numerisch sind, wie es sonst Text ist.
• Logik: and, or, not, in Kleinbuchstaben geschrieben.
• Literale: Zitierte Zeichenfolgen ("card" oder 'card'), Zahlen, true, false, und null.

Kombinieren Sie sie frei: {% if show_price and price > 0 %}, oder {% if not hide_footer %}, oder {% if plan == "pro" or plan == "agency" %}.

Schleife durch Repeaterreihen #

Die Repeaterfeld Wo ist {% for %} Verdient seinen Bergfried Ein Repeater namens menu_items Mit Teilfeldern dish, price, und photo Renders wie folgt:

<ul class="menu">
{% for item in menu_items %}
  <li class="menu__row">
    <img src="{{ item.photo }}" alt="{{ item.dish }}">
    <span class="menu__dish">{{ item.dish }}</span>
    <span class="menu__price">{{ item.price }}</span>
  </li>
{% endfor %}
</ul>

Die Schleifenvariable (hier item(aber jedes Wort funktioniert) hält eine Reihe nach der anderen, und jedes Unterfeld ist durch einen gepunkteten Pfad unter dem Namen verfügbar, den Sie ihm gegeben haben Bedingungen funktionieren in Schleifen, so dass Kippschalter pro Reihe einen verschachtelten Block entfernt sind:

{% for member in team %}
  <div class="member">
    <h3>{{ member.name }}</h3>
    {% if member.role %}<p class="role">{{ member.role }}</p>{% endif %}
  </div>
{% endfor %}

Lese-Tabellen und Popover-Felder #

Zwei Struktursteuerungen legen die Werte ihres Kindes durch spezielle Token-Formen offen:

• Tabs: Kinder werden mit einem dreiteiligen Weg gelesen: {{ tabs_name.tab_name.field_name }}. Ein Tabs-Steuerelement namens tabs Mit einem tab_1 Lasche, die eine hält person Felddrucke als {{ tabs.tab_1.person }}. Keine Schleife erforderlich.
• Popover-Schalter: Jedes Feld innerhalb des Popovers erhält einen kombinierten Token: den Namen des Kippers, einen Unterstrich, dann den Feldnamen. Ein Popover namens overlay Mit einem opacity Feld innen druckt als {{ overlay_opacity }}.

Token in CSS #

Die CSS-Registerkarte läuft über dieselbe Engine, sodass Stilfelder direkt in Eigenschaftswerte eingefügt werden:

.hero {
  background: {{ bg_color }};
  color: {{ text_color }};
}

{% if enable_shadow %}
.hero {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
{% endif %}

Ein if Blockieren um eine ganze Regel ist eine saubere Möglichkeit, optionales Styling zu versenden: Die Regel existiert nur in der Ausgabe, wenn der Umschalter eingeschaltet ist Auch hier funktioniert zum Beispiel ein Medienfeld background-image: url("{{ hero_image }}");, da das Token auf die Datei-URL aufgelöst wird.

Token in JavaScript #

Mit der Registerkarte JS können Sie Panelwerte in ein Skript übergeben. Zitieren Sie Zeichenfolgenwerte und stützen Sie sich bei Umschaltungen auf die Wahrhaftigkeit:

var speed = {{ slide_speed }};
var autoplay = "{{ autoplay }}" === "yes";

if (autoplay) {
  startSlider(speed);
}

In JS gedruckte Werte werden wie jedes andere Token maskiert, sodass ein Benutzer nicht aus Ihrem Skript ausbrechen kann, indem er Zitate in ein Textfeld eingibt.

Praktische Rezepte #

Ein paar Muster, die in fast jedem Widget auftauchen:

• Optionale zweite Taste: Wickeln Sie den gesamten Anker ein {% if second_button_text %} Also verschwindet der Button, wenn das Textfeld leer ist Kein Umschalter erforderlich.
• Layoutklasse aus einem Auswählen: Drucken Sie das Feld direkt in das Klassenattribut: <div class="pricing pricing--{{ layout }}">, dann jede Variante in CSS stylen.
• Rückfallinhalt: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} Hält das Markup davon ab, leere Elemente wiederzugeben.
• Nummerierte Preisstufen: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} Auf den Wert eines Zahlenfeldes reagiert.
• Großbuchstabenetiketten: {{ eyebrow|upper }} Lassen Sie das CSS frei von text-transform Wenn das Design Kappen nur an einer Stelle erfordert.
• Von Repeater betriebene Galerien, Menüs, Zeitleisten und Erfahrungsberichte: Einer {% for %} Schleife plus Repeater ersetzt eine feste Anzahl kopiergepaster Blöcke.

Was der Motor nicht unterstützt #

Die Kanten zu kennen spart Debugging-Zeit Dies ist eine bewusste Teilmenge, daher fehlen einige vollständige Tw-Funktionen:

• Nein {% set %}, Makros, Includes oder Template-Vererbung.
• Keine mathematischen Insiderausdrücke: Werte vergleichen, aber in CSS berechnen calc() oder im JS-Tab.
• Keine Filter darüber hinaus raw, escape/e, upper, lower, und trim.
• Nein loop.index oder andere Schleifenmetadaten darin {% for %}.
• Keine Klammern für Gruppierungslogik Bestellen Sie Ihre and/or Ketten, damit sie richtig lesen, oder in verschachtelte if Blöcke.

Wenn eine Vorlage eine schwerere Logik benötigt, ist dies normalerweise ein Zeichen, um die Entscheidung in das Panel zu verschieben, zum Beispiel ein Auswahlfeld, dessen Optionen die Werte enthalten, die Sie berechnen wollten.

Häufig gestellte Fragen #

Einwickelnd #

Die Twig-Syntax-Engine verbindet Widget Builder-Felder mit Ihrem Markup: {{ tokens }} Druckplattenwerte, {% if %} Entfernt optionales Markup, wenn es ausgeschaltet ist, und {% for %} Lassen Sie einen HTML-Block einen unbegrenzten Repeater bedienen Beginnen Sie mit einfachen Token, fügen Sie einen if-Block für Ihren ersten Umschalter hinzu und graduieren Sie dann zu Schleifen, wenn sich ein Design wiederholt. Von dort aus ist die Repetierer, Wählen, und Schalter Felder decken die meisten dynamischen Widgets ab, die Sie jemals erstellen müssen Neu beim Builder selbst? Die Übersicht über Widget Builder Durch den Herausgeber geht, und die Preisseite Zeigt, was jeder Plan beinhaltet.