Sintaxis de ramita

Los complementos maestros Creador de widgets representa HTML, CSS y JavaScript de su widget a través de a Motor de plantilla de sintaxis de ramita. Si ha tocado Twig en Timber o Craft CMS, la sintaxis le resultará familiar: {{ tokens }} imprimir valores de campo, {% if %} los bloques muestran u ocultan el marcado, y {% for %} los bucles recorren las filas de repetidores.

Este es un subconjunto seguro integrado en el complemento, no en la biblioteca Twig completa. No hay evaluación ni PHP compilado detrás de él, y cada valor impreso se escapa según su tipo de campo. Obtienes las partes de Twig que importan para las plantillas de widgets, sin las partes que podrían convertir un generador de páginas en un problema de seguridad.

Donde escribes código de plantilla #

El editor Widget Builder tiene tres pestañas de código y el motor funciona en todas ellas:

• HTML: el marcado de su widget. Los tokens, condiciones y bucles viven aquí.
• CSS: los estilos de su widget. Los tokens funcionan dentro de los valores de propiedad, por lo que un campo de color puede alimentarse background: directamente.
• JS: Javascript opcional. Los tokens también funcionan aquí, lo cual es útil para pasar valores de campo a un script.

Cada control que agrega al panel de opciones del widget se convierte en una variable de plantilla que lleva el nombre del campo Nombre configuración. Agregar un Campo de texto nombrado title y {{ title }} imprime lo que sea que haya escrito el usuario. La barra lateral de documentación al lado del editor de código enumera el token para cada campo a medida que lo agrega, por lo que nunca tendrá que adivinar la ortografía.

Nota: la plantilla HTML se representa en cada compilación, pero la salida CSS y JS se envía con Complementos maestros Pro, igual que el propio Widget Builder completo.

Imprimir valores con tokens #

La plantilla más sencilla es markup plus tokens:

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

Algunas reglas que vale la pena conocer:

• Caminos punteados alcanzar valores estructurados: {{ item.name }} dentro de un bucle, o {{ tabs.tab_1.person }} para un control de pestañas.
• Los campos multimedia imprimen su URL. Cuando un token contiene una matriz de imágenes o videos, el motor genera url parte automáticamente, entonces <img src="{{ photo }}"> sólo funciona.
• Escapar sigue el tipo de campo. Los campos de URL pasan por el escape de URL, los campos WYSIWYG y Code permiten HTML seguro y todo lo demás se escapa HTML. No es necesario que desinfectes nada usted mismo.

Filtros #

Agregue un filtro a un token con el carácter de tubería. El motor admite cinco:

• {{ title|upper }} imprime el valor en UPPERCASE.
• {{ title|lower }} lo imprime en minúsculas.
• {{ title|trim }} elimina los espacios en blanco de ambos extremos.
• {{ content|raw }} omite escapar e imprime el valor tal como está.
• {{ content|e }} (o |escape) fuerzas que escapan después de a raw.

Tratar |raw como herramienta nítida. Existe para casos en los que un campo contiene marcado intencionalmente y usarlo en un campo de texto sin formato significa que cualquier tipo de editor de página llegue a su página sin escapar. Si el campo es un tipo WYSIWYG o Código que rara vez necesita raw en absoluto, ya que esos tipos ya permiten el paso de etiquetas HTML seguras.

Marcado condicional con si se bloquea #

Un {% if %} el bloque representa su contenido sólo cuando pasa la condición. Este es el socio frontal de la opción Condiciones del lado del panel: Condiciones ocultan el control en el panel Elementor y el if block elimina el marcado coincidente de la página.

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

Se comprueba la veracidad de una variable desnuda, estilo Twig: cadenas vacías, 0, las listas vacías y los valores no establecidos cuentan como falsos. Desde a Campo conmutador tiendas yes cuando está activado y un valor vacío cuando está desactivado, {% if show_badge %} es todo lo que necesitas para alternar.

La ramificación completa también funciona:

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

Operadores que puedes utilizar en condiciones #

• Comparaciones: ==, !=, >, <, >=, <=. Los valores se comparan como números cuando ambos lados son numéricos, como texto en caso contrario.
• Logica: and, or, not, escrito en palabras minúsculas.
• Literales: strânduri citate ("card" o 'card'), numere, true, false, y null.

Combinați-le gratuit: {% if show_price and price > 0 %}, sau {% if not hide_footer %}, sau {% if plan == "pro" or plan == "agency" %}.

Recorriendo filas de repetidores #

El Campo repetidor es donde {% for %} se gana su sustento. Un repetidor nombrado menu_items con subcampos dish, price, y photo renderiza así:

<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 del bucle (aquí item, pero cualquier palabra funciona) contiene una fila a la vez y cada subcampo está disponible a través de una ruta punteada bajo el nombre que le diste. Las condiciones funcionan dentro de bucles, por lo que los cambios por fila están a una cuadra anidada:

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

Tablas de lectura y campos Popover #

Dos controles estructurales exponen los valores de sus hijos a través de formas simbólicas especiales:

• Pestañas: los niños son leídos con un camino de tres partes: {{ tabs_name.tab_name.field_name }}. Un control de pestañas nombrado tabs con un tab_1 pestaña que contiene un person impresiones de campo como {{ tabs.tab_1.person }}. No se necesita bucle.
• Alternar Popover: cada campo dentro de la ventana emergente obtiene un token combinado: el nombre del interruptor, un guión bajo y luego el nombre del campo. Un popover nombrado overlay con un opacity campo dentro de las impresiones como {{ overlay_opacity }}.

Tokens en CSS #

La pestaña CSS pasa por el mismo motor, por lo que los campos de estilo se conectan directamente a los valores de propiedad:

.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 bloquear una regla completa es una forma limpia de enviar un estilo opcional: la regla solo existe en la salida cuando el interruptor está activado. Por ejemplo, aquí también funciona un campo multimedia background-image: url("{{ hero_image }}");, ya que el token se resuelve en la URL del archivo.

Tokens en JavaScript #

La pestaña JS le permite pasar valores del panel a un script. Cite valores de cadena y apóyese en la veracidad para alternar:

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

if (autoplay) {
  startSlider(speed);
}

Los valores impresos en JS se escapan como cualquier otro token, por lo que un usuario no puede salir de su script escribiendo comillas en un campo de texto.

Recetas prácticas #

Algunos patrones que aparecen en casi todos los widgets:

• Segundo botón opcional: envuelve todo el ancla {% if second_button_text %} entonces el botón desaparece cuando el campo de texto está vacío. No se requiere conmutador.
• Clase de diseño de una selección: imprima el campo directamente en el atributo de clase: <div class="pricing pricing--{{ layout }}">, luego peina cada variante en CSS.
• Conținut de retomate: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} evita que el marcado represente elementos vacíos.
• Niveles de precios numerados: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} reacciona al valor de un campo Número.
• Etiquetas mayúsculas: {{ eyebrow|upper }} deja que el CSS se mantenga libre de text-transform cuando el diseño requiere tapas en un solo lugar.
• Galerías, menús, líneas de tiempo y testimonios impulsados por repetidores: uno {% for %} loop plus un repetidor reemplaza un número fijo de bloques copiados y pegados.

Lo que el motor no soporta #

Conocer los bordes ahorra tiempo de depuración. Este es un subconjunto deliberado, por lo que algunas funciones de Twig completa están ausentes:

• No {% set %}, macros, incluye o herencia de plantillas.
• No hay expresiones internas matemáticas: compare valores, pero calcule en CSS calc() o en la pestaña JS.
• Sin filtros más allá raw, escape/e, upper, lower, y trim.
• No loop.index u otros metadatos de bucle en su interior {% for %}.
• No hay paréntesis para agrupar lógica. Ordene su and/or cadenas para que lean correctamente o se dividan en anidadas if bloques.

Si una plantilla necesita una lógica más pesada que esta, normalmente es una señal para mover la decisión al panel, por ejemplo, un campo Seleccionar cuyas opciones llevan los valores que estaba intentando calcular.

Preguntas frecuentes #

Envolviendo #

El motor de sintaxis Twig es lo que conecta los campos de Widget Builder a su marcado: {{ tokens }} imprimir valores de panel, {% if %} elimina el marcado opcional cuando está apagado y {% for %} permite que un bloque de HTML sirva como repetidor ilimitado. Comience con tokens simples, agregue un bloque if para su primer cambio y luego gradúe a bucles cuando se repita un diseño. A partir de ahí, el Repetidor, Seleccionar, y Conmutador los campos cubren la mayoría de los widgets dinámicos que necesitará crear. ¿Nuevo para el propio constructor? El Descripción general del creador de widgets camina por el editor y el página de precios muestra lo que incluye cada plan.