Creando un subtema de Drupal 8

Incluyendo Part Template

 

Muchos diseñadores de temas prefieren mantener los códigos de encabezado/pie de página en un archivo separado y llamar al archivo en page.html.twig

 

Digamos que has creado el siguiente archivo en tu carpeta tema de cabecera.

/THEME_NAME/includes/header.html.twig

 

Y ahora quieres incluir este archivo en page.html.twig

 

Usa código que aparece debajo para incluir este archivo.

 

{% Include ~ '/includes/header.html.twig'%}

 

Usando atributos en las plantillas

 

Muchas plantillas Twig tendrán uno o más objetos de atributos aprobados como variables. El trabajo del objeto Atributo es almacenar un conjunto de atributos, dar métodos útiles a la adaptación del tema para interactuar con esos datos, y permitir una fácil impresión de los atributos.

 

Debería ser algo así:

<div{{ attributes }}></div>

 

No debe haber ningún espacio entre el nombre de la etiqueta y la sintaxis de Twig.

 

Puedes utilizar tu auxiliar de depuración de elección (kint(), dump(), dpm(), etc) para inspeccionar lo que hay disponible. A continuación se muestra un ejemplo del uso {{ kint(attributes) }} en node.html.twig

 

{{Kint (atributos)}} en un nodo

métodos de atributo

Éstos son algunos de los métodos útiles que puedes utilizar con el objeto atributo:

attributes.addClass ()

Añade las clases o los combina a gran variedad de clases de CSS existentes.

una sola clase:

<div{{attributes.addClass('my-class')}}></div>

Varias clases:

{%
 set classes = [
   'red',
   'green',
 ]
%}

<div{{ attributes.addClass(classes) }}></div>

outputs <div class="red green"></div>.

attributes.removeClass ()

Elimina una clase de un objeto atributo. Se utiliza de manera similar a addClass. Digamos que se obtiene la variable de clases en otro lugar como una función de preproceso.

 

{# classes = [ 'red', 'green', 'blue' ] #}
<div{{ attributes.addClass(classes).removeClass('green') }}></div>
outputs <div class="red blue"></div>.

attributes.setAttribute($attribute, $value)

Define los valores de una clave de atributo.

 

<div{{ attributes.setAttribute('id', 'myID') }}></div>
outputs <div id="myID"></div>

attributes.removeAttribute($attribute)

Elimina un atributo de un objeto atributo.

 

<div{{ attributes.removeAttribute('id') }}></div>

attributes.hasClass($class)

Comprueba si la matriz de clase tiene la clase CSS dada.

 

{% if attributes.hasClass('myClass') %}
{# do stuff #}
{% endif %}

Otros fragmentos útiles

La notación de puntos se puede encadenar

{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}
<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>
outputs <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

 

Sin filtro

Sin el filtro twig para recuperar parte de atributos:

 

<div class="myclass {{ attributes.class }}"{{attributes|without('class') }}></div>

 

Ten en cuenta que en la mayoría de los casos el código, como el de arriba, ha de evitarse a favor del uso de addClass ().

 
 
Espero que os sirva, muchas gracias y saludos.
^^

Páginas

Total de votos: 215

Entradas relacionadas

Comentarios (0)

Deja un comentario