Acabamos de renovar el diseño de nuestro sitio... lo que significa que hemos actualizado nuestras plantillas para incluir elementos HTML con un montón de clases de Tailwind. ¿El resultado? Un sitio agradable a la vista.
En algunas partes de las plantillas, las cosas siguen siendo dinámicas: tenemos código Twig para imprimir el capitán y la clase. Pero en otras partes, todo está codificado. Y... esto es bastante típico: un desarrollador frontend puede codificar el sitio en HTML y Tailwind... pero dejarte a ti que lo hagas dinámico y le des vida.
Organizar en una Plantilla Parcial
En la parte superior de homepage.html.twig, este largo elemento <aside> es la barra lateral. Está bien que este código viva en homepage.html.twig... ¡pero ocupa mucho espacio! ¿Y si queremos reutilizar esta barra lateral en otra página?
Una gran característica de Twig es la posibilidad de tomar "trozos" de HTML y aislarlos en sus propias plantillas para que puedas reutilizarlos. Se llaman parciales de plantilla... ya que contienen el código de sólo una parte de la página.
Copia este código, y en el directorio main/ -aunque esto puede ir en cualquier sitio- añade un nuevo archivo llamado _shipStatusAside.html.twig. Pega dentro.
| <aside | |
| class="pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20" | |
| > | |
| <div class="flex justify-between mt-11 mb-7"> | |
| <h2 class="text-[32px] font-semibold">My Ship Status</h2> | |
| <button> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M384 96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 224 288 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex flex-col space-y-1.5"> | |
| <div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center" style="background: rgba(255, 184, 0, .1);"> | |
| <div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div> | |
| <p class="uppercase text-xs">in progress</p> | |
| </div> | |
| <h3 class="tracking-tight text-[22px] font-semibold"> | |
| <a class="hover:underline" href="{{ path('app_starship_show', { | |
| id: myShip.id | |
| }) }}">{{ myShip.name }}</a> | |
| </h3> | |
| </div> | |
| <div class="flex mt-4"> | |
| <div class="border-r border-white/20 pr-8"> | |
| <p class="text-slate-400 text-xs">Captain</p> | |
| <p class="text-xl">{{ myShip.captain }}</p> | |
| </div> | |
| <div class="pl-8"> | |
| <p class="text-slate-400 text-xs">Class</p> | |
| <p class="text-xl">{{ myShip.class }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> |
De vuelta en homepage.html.twig, borra eso, y luego inclúyelo con {{ - para que diga algo de sintaxis - include() y el nombre de la plantilla:main/_shipStatusAside.html.twig.
| // ... lines 1 - 4 | |
| {% block body %} | |
| <main class="flex flex-col lg:flex-row"> | |
| {{ include('main/_shipStatusAside.html.twig') }} | |
| // ... lines 8 - 51 | |
| </main> | |
| {% endblock %} |
¡Pruébalo! Y... ¡no hay cambios! La declaración include() es sencilla:
Renderiza esta plantilla y dale las mismas variables que yo tengo
Si te preguntas por qué he antepuesto un guión bajo a la plantilla... ¡no hay motivo! Es sólo una convención que me ayuda a saber que esta plantilla contiene sólo una parte de la página.
Haciendo un bucle sobre las naves en Twig
En la plantilla de la página de inicio, podemos centrarnos en la lista de naves de abajo, que es esta zona. Ahora mismo, sólo hay una nave... y está codificada. Nuestra intención es listar todas las naves que estamos reparando actualmente. Y ya tenemos una variable ships que estamos utilizando en la parte inferior: es una matriz de objetos Starship.
Así que, por primera vez en Twig, ¡tenemos que hacer un bucle sobre una matriz! Para ello, eliminaré este comentario, y diré {% -así que la etiqueta hacer algo- y luegofor ship in ships. ships es la variable de matriz que ya tenemos y ship es el nuevo nombre de la variable en el bucle que representa un único objetoStarship. En la parte inferior, añade {% endfor %}.
| // ... lines 1 - 4 | |
| {% block body %} | |
| <main class="flex flex-col lg:flex-row"> | |
| // ... lines 7 - 8 | |
| <div class="px-12 pt-10 w-full"> | |
| // ... lines 10 - 13 | |
| <div class="space-y-5"> | |
| {% for ship in ships %} | |
| // ... lines 16 - 43 | |
| {% endfor %} | |
| </div> | |
| // ... lines 46 - 50 | |
| </div> | |
| </main> | |
| {% endblock %} |
Y ya... cuando lo probamos, ¡obtenemos tres naves codificadas! ¡Eso es una mejora!
A continuación: es hora de un giro argumental que nos llevará a crear un enum PHP.
