- Blade compila plantilles .blade.php a PHP pur i ofereix directives netes per a condicionals, bucles, layouts i components.
- Els stacks de Blade (@stack, @push, @prepend) permeten centralitzar scripts i estils, delegant a les vistes filles el que s'apila.
- Directives d'entorn, autorització, sessió i validació integren les vistes amb la resta del framework de manera segura i expressiva.
- Les directives personalitzades i helpers com Js::from obren la porta a patrons avançats, inclosa una directiva tipus hasStack.
Si treballes amb Laravel diàriament, tard o d'hora acabes topant-te amb Blade, les seves directives i, és clar, amb els stacks de vistes i la idea d'una hipotètica directiva hasStack per gestionar-los millor. Pot ser que vinguis d'usar plantilles clàssiques en PHP, o que estiguis acostumat a React o Vue, però quan entens bé Blade i tot el que ofereix (stacks inclosos) és quan la teva forma d'organitzar les vistes fa un salt de qualitat.
En aquest article filarem fi: veuràs de forma molt detallada com funciona Blade, què són les directives de control, com s'estructuren layouts, components, slots, atributs, autorització, entorns i, dins aquest context, com encaixa el concepte de stacks i una directiva tipus hasStack per saber si hi ha contingut apilat abans de renderitzar. Tot amb exemples pràctics i amb un enfocament realista pensat per a projectes Laravel moderns.
Què és Blade i per què és clau entendre les seves directives
Blade és el motor de plantilles oficial de Laravel. No us obliga a deixar d'usar PHP, però et regala una sintaxi molt més neta per barrejar lògica de presentació i HTML sense estar obrint i tancant tota l'estona. Cada plantilla .blade.php es compila a PHP pur i es escorcolla a storage/framework/views, de manera que la sobrecàrrega en temps d'execució és mínima.
Les vistes Blade es guarden normalment a resources/views i es tornen des de rutes o controladors amb el helper view(). A aquest helper pots passar dades en un segon argument (array associatiu, compact(), etc.), ia la vista es consumeixen amb la sintaxi de dobles claus per mostrar contingut escapat o amb claus d'exclamació per contingut sense escapar.
Un gran avantatge de Blade és que ofereix directives específiques (aquestes paraules que comencen per @) per manejar condicionals, bucles, autorització, piles de scripts, components, slots, validació, entorns… Tot això fa que el codi de la vista sigui molt més llegible i mantenible que una barreja caòtica de PHP clàssic amb echo i HTML pla.
Sintaxi bàsica de Blade: eco, escape i verbatim
L'operació més típica en una visualització és mostrar dades. Amb Blade, per imprimir el contingut d'una variable només cal utilitzar {{ }}, el que internament es tradueix en un echo e($variable) i, per tant, escapa entitats HTML per evitar XSS:
Mostrar variables escapades és tan simple com:
{{ $name }}
Si vols mostrar HTML ja generat o contingut que no s'ha d'escapar (per exemple perquè el controles tu i saps que és segur), pots recórrer a la sintaxi {!! !!} , que desactiva l'escapat automàtic i deixa que el navegador ho interpreti tal qual:
{!! $htmlSeguro !!}
Si treballes amb frameworks frontend que també usen claus (per exemple, Vue o alguna llibreria de templating al client), Blade et deixa “escapar” el seu propi motor amb el prefix @. D'aquesta manera, @{{ variableJavascript }} no s'interpretarà com una expressió Blade, sinó que quedarà a l'HTML per ser processada pel framework del navegador.
Quan tens grans blocs on necessites respectar íntegrament les dobles claus sense que Blade les toqui, pots envoltar-los amb la directiva @verbatim… @endverbatim . Tot el que hi hagi a dins es deixarà intacte, una ajuda molt útil en integrar plantilles de frontend complexes.
Estructures de control: if, switch, bucles i la variable $loop
Blade ofereix un joc complet de directives de control de flux que envolten la sintaxi de PHP però de manera més llegible i consistent. A la pràctica, la lògica és gairebé idèntica, però guanyes claredat i evites abusar de tags PHP enmig de l'HTML.
Les sentències if s'escriuen amb @if, @elseif, @else i es tanquen amb @endif. També tens dreceres com @unless (negació d'una condició), @isset per verificar que una variable està definida i @empty per revisar si és buida.
Per a escenaris amb múltiples possibles valors, la directiva @canvi replica l'estructura del switch de PHP amb @case, @break, @default i tancament amb @endswitch, facilitant condicionals múltiples de lectura clara.
Pel que fa a bucles, tens @for, @per cadascú y @while, a més de @forelse, molt útil quan vols iterar una col·lecció però també necessites manejar el cas de llista buida sense escriure un if addicional. Amb @forelse ... @empty ... @endforelse pots renderitzar contingut alternatiu si no hi ha elements.
Mentre recorres un @per cadascú, Blade posa a la teva disposició la variable $loop, un objecte que conté informació molt útil de la iteració actual: índex, si és la primera o l'última volta, si l'índex és parell o imparell, quantes iteracions totals hi ha o fins i tot accés al bucle pare en cas de bucles imbricats mitjançant $loop->parent.
Herència de plantilles, layouts i seccions
En aplicacions reals no vols repetir capçaleres, menús o peus de pàgina a cada vista. Blade permet definir un layout mestre (el típic és guardar-lo a resources/views/layouts/master.blade.php) que totes les pàgines hereten. Dins del layout defineixes zones “buides” amb @yield i la resta de l'HTML comú es manté estable.
Per utilitzar aquest layout des d'una vista filla només heu d'indicar @extends('layouts.master') i declarar les seccions que vulguis emplenar usant @section y @endsection. cada @yield('nombre') del màster es correspondrà amb un @section('nombre') a la vista filla.
A més, la directiva @parent us permet no només sobreescriure una secció, sinó afegir contingut per sobre o per sota del que defineix el layout . Això és molt útil a barres laterals o blocs que vols estendre, no reemplaçar.
Si necessiteu incloure fragments d'HTML reusables sense herència completa, Blade proporciona @inclou i tota una família de directives relacionades: @includeIf, @includeWhen, @includeUnless y @includeFirst, que et permeten incloure sub-vistes de forma condicional o triar la primera que existeixi en una llista de possibles rutes.
Per a casos en què repeteixes un petit fragment per cada element d'una col·lecció, la directiva @each combina foreach + include en una sola línia, fins i tot pot definir una vista alternativa per al cas en què la col·lecció arribi buida.
Components de Blade, slots i atributs
Els components Blade són l'evolució natural de layouts i includes: us permeten encapsular peces d'interfície reutilitzables (botons, alerts, targetes, formularis…) amb lògica pròpia, propietats i slots amb contingut injectable des de fora, tot amb una sintaxi molt propera als components de frameworks JS moderns.
Hi ha dos grans tipus de components: els basats a classe (ubicats a app/View/Components, generats amb php artisan make:component) I els anònims, que són només vistes a resources/views/components sense classe associada. En tots dos casos es renderitzen a les vistes amb etiquetes del tipus <x-alert /> o <x-forms.input />.
Els components basats en classe reben dades a través de atributs HTML (Amb kebab-case a la vista i camelCase al constructor), s'exposen a la vista del component com a propietats públiques i poden optar per un mètode shouldRender() per decidir condicionalment si cal mostrar.
Per a contingut flexible, els components compten amb ranures. El contingut principal s'accedeix com $slot a la plantilla del component, i els slots amb nom es defineixen usant <x-slot name="titulo">...</x-slot> en utilitzar el component. Des de dins pots trucar a mètodes del component a través de $component i fins i tot comprovar si un slot està buit amb $slot->isEmpty() o si té contingut real amb $slot->hasActualContent().
Els components també gestionen de forma elegant els atributs addicionals que no casen amb propietats del constructor (per exemple class, id, data-*). Tot això s'agrupa en un “attribute bag” accessible amb $attributes, que pots renderitzar tal qual o manipular amb mètodes com merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
A més, Blade inclou directives específiques per a HTML típic de formularis: @checked , @selected , @disabled , @readonly i @required , que imprimeixen l'atribut corresponent només si la condició que reben s'avalua com a veritable.
Layouts usant components i herència clàssica
A Laravel modern, cada cop és més habitual definir el layout global de l'app com un component Blade (Per exemple, <x-layout>) en lloc d'usar només l'herència clàssica de @extends. D'aquesta manera, el layout pot rebre slots, atributs i propietats igual que la resta de components.
El patró típic consisteix a crear un component Disposició amb php artisan make:component Layout, definir a la seva plantilla l'estructura HTML base (capçalera, enllaços CSS, nav, footer) i usar {{ $slot }} per injectar el contingut principal. Opcionalment, es defineix un slot anomenat title perquè cada pàgina especifiqui el títol de manera declarativa.
D'altra banda, segueix existint l'opció “clàssica” amb herència de plantilles via @extends, @section y @yield, molt usada abans de la popularització dels components. Pots continuar barrejant tots dos enfocaments, fer servir layouts basats en components per a tot, o quedar-te amb l'herència tradicional si el teu projecte ja està muntat així.
En tots dos casos, l'objectiu és el mateix: no repetir l'esquelet d'HTML a cada vista , mantenir un únic punt de veritat per al layout i permetre que cada pàgina només es preocupi del contingut específic.
Sessió, autenticació, entorn i autorització a Blade
Blade amarra molt bé amb la resta del framework, així que no es limita a pintar HTML: també us dóna directives d'alt nivell per interactuar amb la sessió, el sistema d'autenticació, l'entorn de l'app i les regles d'autorització.
Per a la part d'autenticació hi ha directives com @auth i @guest , que mostren el seu contingut només si hi ha un usuari autenticat o si és un convidat, respectivament. A més, pots especificar un guard concret com a argument per afinar el context d'autenticació que es fa servir.
Les directives d'entorn com a @production o @env('local') permeten condicionar seccions de la vista depenent de l'environment actual de Laravel. Molt útil, per exemple, per mostrar banners, traces de debug o scripts només a local o staging.
Quant a sessió, la directiva @session facilita comprovar si hi ha una clau en sessió i, si n'hi ha, ofereix el valor a través de la variable $value . Això resol de manera elegant el clàssic cas de missatges flaix o avisos.
Per a l'autorització a l'estil policies i gats, Blade proporciona @can, @cannot y @canany. Amb elles pots mostrar o ocultar botons, enllaços o blocs complets segons si lusuari té permís per a una acció concreta sobre un model o classe. Combinades amb @guest o @auth, permeten construir interfícies molt més segures i clares.
Formularis, validació i tractament d'errors a les vistes
Quan passes de les vistes estàtiques als formularis és on es veu com és Blade. Laravel exigeix incloure un token CSRF a tots els formularis que modifiquen dades, i per no haver d'escriure manualment el camp ocult hi ha la directiva @csrf , que genera l'input amb el token corresponent.
Els mètodes HTTP com PUT, PATCH o DELET se simulen a través d'un camp ocult _method, i Blade posa a la teva disposició @method('PUT') (o PATCH/DELETE) per generar-lo automàticament dins del formulari.
per mostrar errors de validació existeix la directiva @error, que s'associa a un camp concret. A dins, tens disponible la variable $missatge amb el text derror. En ser en realitat un if compilat, pots fer servir @else per mostrar contingut alternatiu quan no hi ha cap error.
l'objecte $errors està sempre present a les vistes i agrupa tots els missatges de validació de la request actual. S'integra perfectament amb el helper old(), que us permet “repopular” el formulari amb els valors enviats per l'usuari després d'una fallada de validació, mantenint les entrades i mostrant els errors de forma clara.
En combinar aquestes directives amb les regles de validació en controladors o Form Requests, tens un flux de validació en servidor sòlid , complementari a la validació en client, i molt més segur davant de manipulacions malintencionades.
Stacks a Blade: @stack, @push, @prepend i el concepte de hasStack
Una de les funcionalitats menys comentades però més útils de Blade per a projectes grans són els stacks . Un stack és, bàsicament, una pila de fragments de vista a què pots anar afegint contingut des de vistes filles, components o includes, per després renderitzar-ho tot junt en un punt concret del layout mestre.
La directiva @stack('nom') marca el lloc on es bolcaran tots els fragments associats a aquest stack. En canvi, des de qualsevol altra vista pots utilitzar @push('nom') per enviar contingut al final de la pila o @prepend('nom') per col·locar-lo al principi. Això es fa servir moltíssim per a scripts i estils específics de pàgina.
Imagina, per exemple, que al teu layout tens alguna cosa així al <head> i al final del <body>:
@stack('styles')
...
@stack('scripts')
Després, en una vista concreta que necessita un JS addicional , podries fer:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
Això permet que el layout no hagi de conèixer cada script o estil de cada pàgina ; només defineix els stacks i són les vistes filles les que van apilant el que necessiten. També hi ha @pushIf per empènyer contingut segons una condició booleana sense haver d'escriure l'if complet.
Dins aquest context, molts desenvolupadors troben a faltar una directiva tipus @hasStack o similar que permetés comprovar si un determinat stack té contingut abans de renderitzar-lo. Tot i que Blade de fàbrica no porta una directiva amb aquest nom, la idea és clara: poder fer alguna cosa com “si l'stack d'scripts és buit, no imprimir etiquetes addicionals” o “si hi ha elements en un stack de metadades, embolicar-los en un bloc concret”.
La forma d'aconseguir un comportament equivalent avui dia és complementar les directives de stacks amb lògica al layout o amb helpers personalitzats, o fins i tot amb directives pròpies registrades via Blade::directive(). D'aquesta manera es pot simular una directiva hasStack que consulti internament la pila abans de decidir quin HTML generar.
JSON, JavaScript i directives auxiliars a Blade
En moltes vistes de Laravel necessites passar dades des del backend a JavaScript. El més típic és fer un json_encode() d'un array o col·lecció i deixar-lo dins d'un script inline, però això no sempre és segur ni còmode. Laravel facilita aquest treball amb el helper Js::from(), que serialitza i escapa correctament valors PHP a JSON per incrustar-los en HTML.
Quan renderes dades complexes cap al navegador, Js::from() evita problemes de cometes o caràcters especials i torna una expressió JSON.parse() segura per a la inclusió en atributs o scripts. No es recomana passar expressions complexes dins de la directiva perquè internament Blade fa servir regex en compilar-les, i la cosa es pot trencar de maneres poc evidents.
A més, Blade permet definir comentaris de plantilla que no s'envien a l'HTML final (a diferència dels comentaris HTML clàssics) i blocs @php… @endphp on executar petits trossos de PHP pur quan de debò no queda més remei. Fins i tot pots utilitzar @use per importar classes dins de la vista o assignar-los àlies, una cosa còmoda quan treballes amb helpers o components molt específics.
Si arribes al punt de necessitar una funcionalitat de ressò molt especialitzada per a determinats objectes, pots registrar manejadors de ressò personalitzats amb Blade::stringable(), de manera que en fer ressò d'un objecte concret Blade truqui al teu callback en comptes del mètode màgic __toString() de la classe.
Vistes d'error, fragments i directives personalitzades
Laravel et deixa personalitzar de forma molt senzilla les vistes d'error: només cal crear arxius en resources/views/errors amb el codi HTTP com a nom (per exemple, 404.blade.php o 500.blade.php). Cada vegada que es produeixi aquest error, la teva plantilla s'usarà en lloc de la genèrica del framework.
Per a casos en què treballes amb eines com Turbo o htmx i només vols tornar fragments concrets d'una vista, Blade ofereix les directives @fragment … @endfragment combinades amb mètodes com view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf(). D'aquesta manera pots reutilitzar la mateixa plantilla completa i extreure'n només les parts que necessites segons el context.
Si el repertori de directives no en té prou, sempre pots crear les teves amb Blade::directive(). El més habitual és registrar-les en el mètode boot() de AppServiceProvider o en un proveïdor dedicat. El compilador de Blade et passarà com a string l'expressió que hi hagi dins de la directiva i tu tornes el PHP que vulguis que generi en compilar-se.
Per a condicions personalitzades senzilles existeix també Blade::if(), que crea directives condicionals en una sola línia. Per exemple, podries definir @disk('s3') per comprovar si el disc per defecte de l'app és S3, i fer-la servir després en qualsevol vista com si fos una directiva nativa.
Amb aquest arsenal pots arribar a muntar un llenguatge de plantilles pràcticament a la teva mida , incloent una directiva tipus hasStack si vols, que faci sucre sintàctic sobre la lògica que consulti internament si una pila té contingut o no abans d'imprimir-la.
Dominar Blade en profunditat —des de la sintaxi bàsica fins als components avançats, les directives d'autorització, validació, entorns i sobretot el maneig de stacks— et permet construir vistes modulars, segures, consistents i fàcils de mantenir , on una futura directiva com hasStack encaixaria de forma natural per arrodonir-la encara més a l'arrodonir i encara la més encaixada a la zona per a arrodonir-la encara més.