Kvist Syntaks

Master Addons Widget Builder gengiver din widgets HTML, CSS og JavaScript gennem en Twig-syntaks skabelon motor. Hvis du har rørt Twig i Timber eller Craft CMS, vil syntaksen føles velkendt: {{ tokens }} udskriv feltværdier, {% if %} blokke viser eller skjuler opmærkning, og {% for %} sløjfer går gennem repeaterrækker.

Dette er en sikker delmængde indbygget i plugin, ikke det fulde Twig bibliotek. Der er ingen eval og ingen kompileret PHP bag det, og hver udskrevet værdi undslippes baseret på dens felttype. Du får de dele af Twig, der betyder noget for widget skabeloner, uden de dele, der kunne gøre en sidebygger til et sikkerhedsproblem.

Hvor du skriver skabelonkode #

Widget Builder editoren har tre kodefaner, og motoren kører på dem alle:

• HTML: din widgets markup. Poletter, betingelser og sløjfer bor alle her.
• CSS: din widgets typografier. Poletter fungerer inde i egenskabsværdier, så et Farvefelt kan fodre background: directly.
• JS: valgfri JavaScript. Poletter fungerer også her, hvilket er praktisk til at overføre feltværdier til et script.

Hvert kontrolelement, du føjer til widgettens indstillingspanel, bliver en skabelonvariabel opkaldt efter feltets Name indstilling. Tilføj en Tekstfelt navngivet title og {{ title }} udskriver, hvad brugeren har skrevet. Sidebjælken Dokumentation ved siden af kodeeditoren viser tokenet for hvert felt, mens du tilføjer det, så du aldrig behøver at gætte stavningen.

Bemærk: HTML-skabelonen gengives i hver build, men CSS- og JS-outputtet leveres med Master Addons Pro, samme som den fulde Widget Builder selv.

Udskrivning af værdier med tokens #

Den enkleste skabelon er markup plus tokens:

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

Et par regler, der er værd at vide:

• Prikkede stier nå ind i strukturerede værdier: {{ item.name }} inde i en løkke, eller {{ tabs.tab_1.person }} for en Tabs kontrol.
• Mediefelter udskriver deres URL. Når et token indeholder et billede eller et videoarray, udsender motoren url del automatisk, så <img src="{{ photo }}"> virker bare.
• Escaping følger felttypen. URL felter går gennem URL escapeing, WYSIWYG og Kode felter tillader sikker HTML, og alt andet er HTML-escaped. Du behøver ikke at rense noget selv.

Filtre #

Føj et filter til et token med rørtegnet. Motoren understøtter fem:

• {{ title|upper }} udskriver værdien med STORE BOGSTAVER.
• {{ title|lower }} udskriver det med små bogstaver.
• {{ title|trim }} fjerner mellemrum fra begge ender.
• {{ content|raw }} springer escape over og udskriver værdien som den er.
• {{ content|e }} (eller |escape) kræfter, der flygter tilbage på efter en raw.

Treat |raw som et skarpt værktøj. Det findes for tilfælde, hvor et felt med vilje holder markup, og ved at bruge det på et almindeligt tekstfelt betyder det, at uanset hvad en sideeditor skriver, lander på din side uden flugt. Hvis feltet er en WYSIWYG- eller kodetype, har du sjældent brug for raw overhovedet, da de typer allerede tillader sikre HTML-tags igennem.

Betinget markup med if blokke #

An {% if %} block gengiver kun sit indhold, når betingelsen passerer. Dette er front-end partneren til indstillingen betingelser på panelsiden: Betingelser skjuler kontrollen i Elementor-panelet, og den if blok fjerner den matchende markering fra siden.

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

En bar variabel kontrolleres for sandhed, Twig stil: tomme strenge, 0, tomme lister, og ikke indstillede værdier tæller som falske. Da a Switcher field butikker yes når den er tændt og en tom værdi, når den er slukket, {% if show_badge %} er alt hvad du behøver for en vippe.

Fuld forgrening virker også:

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

Operatører, du kan bruge under forhold #

• Sammenligninger: ==, !=, >, <, >=, <=. Værdier sammenlignes som tal, når begge sider er numeriske, som tekst ellers.
• Logik: and, or, not, skrevet med små ord.
• Literaler: citerede strenge ("card" eller 'card'), tal, true, false, og null.

Kombiner dem frit: {% if show_price and price > 0 %}, eller {% if not hide_footer %}, eller {% if plan == "pro" or plan == "agency" %}.

Sløjfer gennem repeaterrækker #

The Repeaterfelt er hvor {% for %} tjener sit hold. En repeater ved navn menu_items med underfelter dish, price, og photo gengives sådan her:

<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>

Sløjfevariablen (her item, men ethvert ord virker) holder en række ad gangen, og hvert underfelt er tilgængeligt gennem en stiplet sti under det navn, du gav det. Betingelser fungerer inde i sløjfer, så vipper pr. række er en indlejret blok væk:

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

Læsefaner og Popover-felter #

To strukturelle kontroller afslører deres underordnede værdier gennem specielle tokenformer:

• Faner: børn læses med en tredelt sti: {{ tabs_name.tab_name.field_name }}. En Tabs kontrol opkaldt tabs med en tab_1 fane, der holder en person feltudskrifter som {{ tabs.tab_1.person }}. Ingen løkke nødvendig.
• Popover Toggle: hvert felt inde i popoveren får et kombineret token: vippens navn, en understregning og derefter feltnavnet. En popover med navnet overlay med en opacity felt inde udskrifter som {{ overlay_opacity }}.

Poletter i CSS #

Fanen CSS kører gennem den samme motor, så stilfelter tilsluttes direkte til egenskabsværdier:

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

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

An if blok omkring en hel regel er en ren måde at sende valgfri styling: reglen findes kun i outputtet, når vippen er tændt. Et mediefelt fungerer også her, for eksempel background-image: url("{{ hero_image }}");, da tokenet løser til filens URL.

Tokens i JavaScript #

Fanen JS lader dig overføre panelværdier til et script. Citatstrengværdier, og læne dig op ad sandheden for skift:

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

if (autoplay) {
  startSlider(speed);
}

Værdier, der er trykt i JS, undslippes som ethvert andet token, så en bruger kan ikke bryde ud af dit script ved at skrive citater i et tekstfelt.

Praktiske opskrifter #

Et par mønstre, der kommer op i næsten hver widget:

• Valgfri anden knap: pak hele ankeret ind {% if second_button_text %} så knappen forsvinder, når tekstfeltet er tomt. Ingen switcher påkrævet.
• Layoutklasse fra en Vælg: udskriv feltet lige ind i klasseattributten: <div class="pricing pricing--{{ layout }}">, stil derefter hver variant i CSS.
• Fallback indhold: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} forhindrer opmærkningen i at gengive tomme elementer.
• Nummererede prisniveauer: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} reagerer på et talfelts værdi.
• Store bogstaver etiketter: {{ eyebrow|upper }} lader CSS holde sig fri af text-transform når designet kun kræver kasketter på ét sted.
• Repeater-drevne gallerier, menuer, tidslinjer, og udtalelser: one {% for %} loop plus en repeater erstatter et fast antal copy-pasted blokke.

Hvad motoren ikke understøtter #

At kende kanterne sparer fejlfindingstid. Dette er en bevidst delmængde, så et par fuld-Twig-funktioner er fraværende:

• No {% set %}, makroer, medtager eller skabelonarv.
• Ingen matematik inde i udtryk: sammenlign værdier, men beregn i CSS calc() eller i JS-fanen.
• Ingen filtre ud over raw, escape/e, upper, lower, og trim.
• No loop.index eller andre loop-metadata indeni {% for %}.
• Ingen parenteser til grupperingslogik. Bestil din and/or kæder, så de læser korrekt, eller deler sig i indlejrede if blocks.

Hvis en skabelon har brug for tungere logik end dette, er det normalt et tegn på at flytte beslutningen ind i panelet, for eksempel et Vælg-felt, hvis muligheder bærer de værdier, du forsøgte at beregne.

Ofte stillede spørgsmål #

Indpakning #

Twig syntaksmotoren er det, der forbinder Widget Builder felter til din markup: {{ tokens }} udskriftspanelværdier, {% if %} fjerner valgfri opmærkning, når den er slået fra, og {% for %} lader en blok HTML tjene en ubegrænset repeater. Start med almindelige tokens, tilføj en if-blok til din første toggle, og graduer derefter til loops, når et design gentages. Derfra er den Repeater, Select, og Switcher felter dækker de fleste dynamiske widgets, du nogensinde bliver nødt til at bygge. Ny til bygherren selv? Den Widget Builder oversigt går gennem redaktøren, og den prissætning side viser, hvad hver plan indeholder.