Syntaxe de brindille

Les modules principaux Constructeur de widgets rend le HTML, le CSS et le JavaScript de votre widget via a Moteur de modèles de syntaxe Twig. Si vous avez touché Twig dans Timber ou Craft CMS, la syntaxe vous semblera familière : {{ tokens }} valeurs du champ d'impression, {% if %} les blocs affichent ou masquent le balisage, et {% for %} les boucles traversent les rangées de répéteurs.

Il s'agit d'un sous-ensemble sûr intégré au plugin, pas à la bibliothèque complète de Twig Il n'y a pas d'évaluation et pas de PHP compilé derrière, et chaque valeur imprimée est échappée en fonction de son type de champ Vous obtenez les parties de Twig qui comptent pour les modèles de widgets, sans les parties qui pourraient transformer un constructeur de page en un problème de sécurité.

Où vous écrivez le code du modèle #

L'éditeur Widget Builder dispose de trois onglets de code et le moteur fonctionne sur chacun d'eux :

• HTML : le balisage de votre widget. Les jetons, les conditions et les boucles vivent tous ici.
• CSS : les styles de votre widget. Les jetons fonctionnent à l'intérieur des valeurs de propriété, donc un champ Couleur peut alimenter background: directement.
• JS : javascript optionnel. Les jetons fonctionnent ici aussi, ce qui est pratique pour transmettre des valeurs de champ dans un script.

Chaque contrôle que vous ajoutez au panneau d'options du widget devient une variable modèle nommée d'après celle du champ Nom réglage. Ajouter un Champ texte nommé title et {{ title }} imprime quelle que soit la saisie de l'utilisateur La barre latérale Documentation à côté de l'éditeur de code répertorie le jeton pour chaque champ au fur et à mesure que vous l'ajoutez, vous n'avez donc jamais à deviner l'orthographe

Remarque : le modèle HTML restitue chaque version, mais les sorties CSS et JS sont livrées avec Maître Addons Pro(Identique au Widget Builder complet lui-même).

Impression de valeurs avec des jetons #

Le modèle le plus simple est le balisage plus les jetons :

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

Quelques règles qui méritent d'être connues :

• Chemins pointillés atteindre en valeurs structurées : {{ item.name }} à l'intérieur d'une boucle, ou {{ tabs.tab_1.person }} pour un contrôle Tabs.
• Les champs médias impriment leur URL. Lorsqu'un jeton contient une image ou un tableau vidéo, le moteur émet le url partie automatiquement, donc <img src="{{ photo }}"> fonctionne juste.
• L'évasion suit le type de champ. Les champs URL passent par l'échappement d'URL, les champs WYSIWYG et Code permettent un HTML sûr et tout le reste est échappé au HTML. Vous n’avez pas besoin de nettoyer quoi que ce soit vous-même.

Filtres #

Ajouter un filtre à un jeton avec le caractère de tuyau Le moteur en supporte cinq :

• {{ title|upper }} imprime la valeur en MAJUSCULE.
• {{ title|lower }} l'imprime en minuscules.
• {{ title|trim }} coupe les espaces des deux extrémités.
• {{ content|raw }} saute l'échappement et imprime la valeur telle quelle.
• {{ content|e }} (ou |escape) les forces s'échappent après un raw.

Traiter |raw en tant qu'outil pointu Il existe pour les cas où un champ détient intentionnellement le balisage, et l'utiliser sur un champ de texte brut signifie que tout ce qu'un éditeur de page tape atterrit dans votre page sans échappement Si le champ est un type WYSIWYG ou Code dont vous avez rarement besoin raw du tout, puisque ces types autorisent déjà le passage de balises HTML sûres.

Marquage conditionnel avec blocs if #

Un {% if %} block rend son contenu uniquement lorsque la condition passe Il s'agit du partenaire front-end de l'option Conditions côté panneau : Les conditions masquent le contrôle dans le panneau Élémenteur, et le if block supprime le balisage correspondant de la page.

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

Une variable nue est vérifiée pour vérifier la véracité, style Twig : chaînes vides, 0(en), les listes vides, et les valeurs non définies comptent comme faux Depuis un Champ de commutation magasins yes lorsqu'il est activé et une valeur vide lorsqu'il est désactivé, {% if show_badge %} est tout ce dont vous avez besoin pour basculer.

La ramification complète fonctionne également :

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

Opérateurs que vous pouvez utiliser dans des conditions #

• Comparaisons : ==, !=, >, <, >=, <=. Les valeurs se comparent sous forme de nombres lorsque les deux côtés sont numériques, comme texte autrement.
• Logique: and, or, not[traduction], écrit en minuscules.
• Littéraux : chaînes citées ("card" ou 'card'), des chiffres, true, false, et null.

Combinez-les librement : {% if show_price and price > 0 %}; ou {% if not hide_footer %}; ou {% if plan == "pro" or plan == "agency" %}.

Se penchant à travers les rangées de répéteurs #

Le Champ répéteur est où {% for %} gagne son donjon Un répéteur nommé menu_items avec sous-champs dish, price, et photo rend comme ceci :

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

La variable de boucle (ici item(en anglais, but any word works) tient une ligne à la fois, et chaque sous-champ est disponible par un chemin en pointillés sous le nom que vous lui avez donné Les conditions fonctionnent à l'intérieur des boucles, donc les basculements par ligne sont à un bloc imbriqué :

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

Lecture des onglets et des champs Popover #

Deux contrôles structurels exposent les valeurs de leurs enfants à travers des formes de jetons spéciales :

• Onglets : les enfants sont lus avec un chemin en trois parties : {{ tabs_name.tab_name.field_name }}. Un contrôle Tabs nommé tabs avec un tab_1 languette tenant une person impressions sur le terrain comme {{ tabs.tab_1.person }}. Aucune boucle nécessaire.
• Bascule Popover : chaque champ à l'intérieur de la popover obtient un jeton combiné : le nom de la bascule, un trait de soulignement, puis le nom du champ Une popover nommée overlay avec un opacity champ intérieur des impressions comme {{ overlay_opacity }}.

Jetons en CSS #

L'onglet CSS traverse le même moteur, de sorte que les champs de style se branchent directement sur les valeurs des propriétés :

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

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

Un if bloquer autour d'une règle entière est une façon propre d'expédier le style facultatif : la règle n'existe dans la sortie que lorsque la bascule est activée Un champ multimédia fonctionne ici aussi, par exemple background-image: url("{{ hero_image }}");: puisque le jeton se résout en URL du fichier.

Jetons en JavaScript #

L'onglet JS vous permet de transmettre les valeurs du panneau dans un script. Citer les valeurs des chaînes et vous appuyer sur la véracité pour basculer :

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

if (autoplay) {
  startSlider(speed);
}

Les valeurs imprimées dans JS sont échappées comme n'importe quel autre jeton, de sorte qu'un utilisateur ne peut pas sortir de votre script en tapant des guillemets dans un champ de texte.

Recettes pratiques #

Quelques modèles qui apparaissent dans presque tous les widgets :

• Deuxième bouton en option : enveloppez toute l'ancre {% if second_button_text %} donc le bouton disparaît lorsque le champ de texte est vide Aucun sélecteur requis.
• Classe de mise en page à partir d'un Sélectionner : imprimez le champ directement dans l'attribut class : <div class="pricing pricing--{{ layout }}">(en), puis stylisez chaque variante en CSS.
• Contenu de secours : {% if caption %}{{ caption }}{% else %}Untitled{% endif %} empêche le balisage de restituer les éléments vides.
• Niveaux de prix numérotés : {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} réagit à la valeur d'un champ Nombre.
• Étiquettes majuscules : {{ eyebrow|upper }} permet au CSS de rester libre de text-transform lorsque le design nécessite des bouchons à un seul endroit.
• Galeries, menus, chronologies et témoignages basés sur des répéteurs : un {% for %} loop plus un répéteur remplace un nombre fixe de blocs collés.

Ce que le moteur ne supporte pas #

Connaître les bords permet de gagner du temps de débogage Il s'agit d'un sous-ensemble délibéré, donc quelques fonctionnalités de Twig complet sont absentes :

• Non {% set %}(en), macros, inclut, ou héritage de modèle.
• Pas de mathématiques dans les expressions : comparez les valeurs, mais calculez en CSS calc() ou dans l'onglet JS.
• Aucun filtre au-delà raw, escape/e, upper, lower, et trim.
• Non loop.index ou d'autres métadonnées de boucle à l'intérieur {% for %}.
• Pas de parenthèses pour la logique de regroupement Commandez votre and/or chaînes pour qu'elles lisent correctement, ou se divisent en imbriquées if blocs.

Si un modèle nécessite une logique plus lourde que celle-ci, c'est généralement un signe pour déplacer la décision dans le panneau, par exemple un champ Sélectionner dont les options portent les valeurs que vous essayiez de calculer.

Foire aux questions #

Envelopper #

Le moteur de syntaxe Twig est ce qui relie les champs Widget Builder à votre balisage : {{ tokens }} valeurs du panneau d'impression, {% if %} supprime le balisage facultatif lorsqu'il est éteint, et {% for %} permet à un bloc de HTML de servir un répéteur illimité Commencez par des jetons simples, ajoutez un bloc if pour votre première bascule, puis passez aux boucles lorsqu'un design se répète À partir de là, le Répéteur, Sélectionner, et Commutateur les champs couvrent la plupart des widgets dynamiques que vous aurez besoin de construire Nouveau au constructeur lui-même ? le Aperçu du constructeur de widgets traverse l'éditeur et le page de tarification montre ce que chaque plan comprend.