- Blade compileert .blade.php-sjablonen naar pure PHP en biedt duidelijke richtlijnen voor voorwaarden, lussen, lay-outs en componenten.
- Met de stacks van Blade (@stack, @push, @prepend) kunt u scripts en stijlen centraliseren en de stapeling delegeren aan onderliggende weergaven.
- Omgevings-, autorisatie-, sessie- en validatierichtlijnen integreren de weergaven veilig en expressief met de rest van het raamwerk.
- Aangepaste richtlijnen en helpers zoals Js::from openen de deur naar geavanceerde patronen, waaronder een hasStack-achtige richtlijn.
Als je dagelijks met Laravel werkt, kom je vroeg of laat Blade, de bijbehorende directives en natuurlijk view stacks tegen, inclusief het idee van een hypothetische `hasStack` directive om deze beter te beheren. Misschien ben je gewend aan klassieke PHP templates, of aan React of Vue, maar wanneer je Blade en alles wat het te bieden heeft (inclusief stacks) echt begrijpt, zal je view-organisatie een aanzienlijke sprong voorwaarts maken.
In dit artikel duiken we diep in de details: je ziet in detail hoe Blade werkt, wat control directives zijn, hoe layouts, components, slots, attributes, authorization en environments zijn gestructureerd, en hoe het concept van stacks en een `hasStack` directive daarin passen, waarmee je kunt controleren of content gestapeld is voordat je deze rendert. Dit alles wordt geïllustreerd met praktische voorbeelden en een realistische aanpak, speciaal ontworpen voor moderne Laravel-projecten.
Wat is Blade en waarom is het belangrijk om de richtlijnen ervan te begrijpen?
Blade is de officiële Laravel-sjabloonengineJe hoeft PHP hierdoor niet te laten liggen, maar het biedt je een veel nettere syntaxis voor het mixen van presentatielogica en HTML, zonder dat je voortdurend tags hoeft te openen en te sluiten. Altijd. Elke sjabloon .blade.php Het is gecompileerd naar pure PHP en gecached in storage/framework/views, waardoor de runtime overhead minimaal is.
Bladweergaven worden doorgaans opgeslagen in bronnen/weergaven en worden teruggestuurd vanuit routes of controllers met behulp van de helper view()U kunt gegevens aan deze helper doorgeven in een tweede argument (associatieve array, compact()enz.), en in de weergave worden ze verbruikt met de syntaxis van dubbele sleutels om ontsnapte inhoud weer te geven of met uitroeptekens voor niet-ontsnapte inhoud.
Een groot voordeel van Blade is dat het biedt specifieke richtlijnen (de woorden die beginnen met @) om voorwaarden, lussen, autorisatie, script stacks, componenten, slots, validatie, omgevingen... te verwerken. Dit alles maakt de weergavecode veel leesbaarder en beter te onderhouden dan een chaotische mix van klassieke PHP met echo en gewone HTML.
Basis Blade-syntaxis: echo, escape en verbatim
De meest voorkomende bewerking in een weergave is het weergeven van gegevens. Om met Blade de inhoud van een variabele af te drukken, gebruikt u eenvoudigweg {{ }}, wat zich intern vertaalt in een echo e($variable) en daarom, HTML-entiteiten ontsnappen om XSS te voorkomen:
Het weergeven van ontsnapte variabelen is heel eenvoudig:
{{ $name }}
Als je vooraf gegenereerde HTML of inhoud wilt weergeven die niet hoeft te worden ontsnapt (bijvoorbeeld omdat je de controle hebt en weet dat het veilig is), kun je de syntax {!! !!} gebruiken . Hiermee wordt automatisch ontsnappen uitgeschakeld en kan de browser de inhoud ongewijzigd interpreteren:
{!! $htmlSeguro !!}
Als u met frontend-frameworks werkt die ook sleutels gebruiken (bijvoorbeeld Vue of een client-side templatebibliotheek), kunt u met Blade: “ontsnappen” aan zijn eigen motor met het voorvoegsel @. Op deze manier @{{ variabeleJavascript }} Deze wordt niet geïnterpreteerd als een Blade-expressie, maar blijft in de HTML staan en wordt verwerkt door het browserframework.
Wanneer je grote codeblokken hebt waarbij je de dubbele accolades volledig wilt respecteren zonder dat Blade ze aanraakt, kun je ze omringen met de directive `@verbatim … @endverbatim` . Alles binnenin blijft dan ongewijzigd, een zeer handige tool bij het integreren van complexe frontend-templates.
Besturingsstructuren: if, switch, lussen en de variabele $loop
Blade biedt een complete set stroombesturingsinstructies die PHP-syntaxis op een leesbaardere en consistentere manier verpakken. In de praktijk is de logica vrijwel identiek, maar je wint aan duidelijkheid en voorkomt overmatig gebruik van PHP-tags in je HTML.
De if-instructies zijn mee geschreven @if, @elseif, @else en sluit af met @endifJe hebt ook snelkoppelingen zoals @unless (ontkenning van een voorwaarde), @isset om te verifiëren dat een variabele is gedefinieerd en @empty om te controleren of deze leeg is.
Voor scenario's met meerdere mogelijke waarden is de richtlijn @schakelaar repliceert de PHP-switchstructuur met @case, @break, @default en sluit af met @endswitch, waardoor meerdere voorwaardelijke zinnen gemakkelijk te lezen zijn.
Wat betreft lussen, je hebt @voor, @foreach y @terwijl, Plus @forelseDit is erg handig als u over een verzameling wilt itereren, maar ook de situatie van een lege lijst wilt afhandelen zonder dat u een extra if-instructie hoeft te schrijven. @forelse ... @empty ... @endforelse U kunt alternatieve inhoud weergeven als er geen elementen zijn.
Als je door een @foreachBlade maakt de variabele voor u beschikbaar $lus, een object dat zeer nuttige informatie bevat over de huidige iteratie: index, of het de eerste of laatste beurt is, of de index even of oneven is, hoeveel iteraties er in totaal zijn, of zelfs toegang tot de bovenliggende lus in het geval van geneste lussen die $loop->parent.
Sjabloonovererving, lay-outs en secties
In praktische toepassingen wilt u kopteksten, menu's of voetteksten niet in elke weergave herhalen. Met Blade kunt u een hoofdlay-out (meestal wordt het opgeslagen in) resources/views/layouts/master.blade.php) die alle pagina's erven. Binnen de lay-out definieert u "lege" gebieden met @yield en de rest van de algemene HTML blijft stabiel.
Om die lay-out vanuit een kinderweergave te gebruiken, hoeft u alleen maar aan te geven @extends('layouts.master') en geef de secties aan die u wilt invullen met behulp van @sectie y @eindsectie. elk @yield('nombre') de mastergraad komt overeen met een @section('nombre') in de ogen van de dochter.
Bovendien kun je met de `@parent` -richtlijn niet alleen een sectie overschrijven, maar ook inhoud boven of onder de door de lay-out gedefinieerde elementen toevoegen . Dit is erg handig bij zijbalken of blokken die je wilt uitbreiden, niet vervangen.
Als u herbruikbare HTML-fragmenten zonder volledige overerving moet opnemen, biedt Blade @erbij betrekken en een hele familie van gerelateerde richtlijnen: @includeIf, @includeWhen, @includeUnless y @includeFirstwaarmee u voorwaardelijk subweergaven kunt opnemen of de eerste kunt kiezen die bestaat in een lijst met mogelijke routes.
In gevallen waarin je een klein fragment herhaalt voor elk element van een verzameling, combineert de `@each` -richtlijn `foreach` en `include` tot één regel, en kan zelfs een alternatieve weergave definiëren voor het geval de verzameling leeg aankomt.
Bladcomponenten, sleuven en kenmerken
Blade-componenten zijn de natuurlijke evolutie van layouts en includes: ze stellen je in staat om herbruikbare interface-elementen (knoppen, alerts, kaarten, formulieren, enz.) te encapsuleren met hun eigen logica, eigenschappen en slots met inhoud die van buitenaf kan worden geïnjecteerd, en dat alles met een syntax die sterk lijkt op die van moderne JS-frameworkcomponenten.
Er zijn twee hoofdtypen componenten: de klasse-gebaseerd (gelegen in app/View/Components, gegenereerd met php artisan make:component) en de anoniemdie alleen te zien zijn in resources/views/components zonder een bijbehorende klasse. In beide gevallen worden ze weergegeven in weergaven met labels van het type <x-alert /> o <x-forms.input />.
Klasse-gebaseerde componenten ontvangen gegevens via HTML-kenmerken (Met kebab-case in zicht en camelCase in de constructor) worden in de componentweergave weergegeven als openbare eigenschappen en kunnen kiezen voor een methode shouldRender() om voorwaardelijk te beslissen of ze getoond moeten worden.
Voor flexibele inhoud zijn de componenten voorzien van speelautomatenDe hoofdinhoud is toegankelijk als $slot in de componentsjabloon en de slots met naam worden gedefinieerd met behulp van <x-slot name="titulo">...</x-slot> Bij gebruik van het component. Van binnenuit kunt u componentmethoden aanroepen via $component en zelfs controleren of een sleuf leeg is met $slot->isEmpty() of als het echte inhoud heeft met $slot->hasActualContent().
De componenten beheren ook op elegante wijze de extra attributen die niet overeenkomen met eigenschappen van de constructor (bijvoorbeeld class, id, data-*Dit alles is gegroepeerd in een toegankelijke ‘attributentas’ met $attributesdie u kunt weergeven zoals ze zijn of kunt manipuleren met methoden zoals merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
Daarnaast bevat Blade specifieke richtlijnen voor typische formulier-HTML: @checked , @selected , @disabled , @readonly en @required , die het bijbehorende attribuut alleen afdrukken als de voorwaarde waaraan ze voldoen waar is.
Lay-outs met behulp van componenten en klassieke overerving
In het moderne Laravel wordt het steeds gebruikelijker om de globale lay-out van de app te definiëren als een Bladcomponent (bijvoorbeeld <x-layout>) in plaats van alleen de klassieke overerving van @extendsOp deze manier kan de lay-out slots, kenmerken en eigenschappen ontvangen, net als de rest van de componenten.
Het typische patroon omvat het maken van een component Layout met php artisan make:component LayoutDefinieer de basis-HTML-structuur (header, CSS-links, navigatie, voettekst) in uw sjabloon en gebruik {{ $slot }} om de hoofdinhoud te injecteren. Optioneel wordt een benoemde sleuf gedefinieerd. title zodat elke pagina op een declaratieve manier haar titel specificeert.
Aan de andere kant bestaat de "klassieke" optie nog steeds met sjabloonovererving via @extends, @section y @yieldDit werd veel gebruikt vóór de popularisering van componenten. Je kunt beide benaderingen blijven combineren, componentgebaseerde lay-outs voor alles gebruiken of vasthouden aan traditionele overerving als je project al zo is ingericht.
In beide gevallen is het doel hetzelfde: voorkomen dat het HTML-skelet in elke weergave wordt herhaald , een eenduidige basis voor de lay-out behouden en ervoor zorgen dat elke pagina zich volledig kan richten op de specifieke inhoud.
Sessie, authenticatie, omgeving en autorisatie in Blade
Blade integreert zeer goed met de rest van het framework, waardoor het niet beperkt is tot het weergeven van HTML: het biedt ook geavanceerde richtlijnen voor interactie met de sessie, het authenticatiesysteem, de app-omgeving en autorisatieregels.
Voor authenticatie zijn er richtlijnen zoals @auth en @guest , die hun inhoud alleen weergeven als de gebruiker respectievelijk is geauthenticeerd of een gast is. Daarnaast kunt u een specifieke guard als argument opgeven om de gebruikte authenticatiecontext te verfijnen.
De milieurichtlijnen als @production o @env('local') Hiermee kun je delen van de weergave conditioneren, afhankelijk van de huidige Laravel-omgeving. Dit is bijvoorbeeld erg handig voor het weergeven van banners, debug traces of scripts, alleen in lokale of staging-omgevingen.
Wat sessies betreft, maakt de `@session` -richtlijn het eenvoudig om te controleren of een sessiesleutel bestaat en, zo ja, de waarde ervan door te geven via de `$value`- variabele . Dit lost op elegante wijze het klassieke geval van flashberichten of waarschuwingen op.
Voor beleid en poort-stijl autorisatie biedt Blade @kan, @kanniet y @cananyHiermee kunt u knoppen, links of hele blokken weergeven of verbergen, afhankelijk van of de gebruiker toestemming heeft voor een specifieke actie op een model of klasse. Gecombineerd met @guest o @authZe maken de constructie van veel veiligere en duidelijkere interfaces mogelijk.
Formulieren, validatie en foutbehandeling in weergaven
Wanneer je overstapt van statische weergaven naar formulieren, zie je pas echt hoe handig Blade is. Laravel vereist dat je een CSRF-token opneemt in alle formulieren die gegevens wijzigen. Om te voorkomen dat je het verborgen veld handmatig moet invullen, is er de `@csrf`- richtlijn , die het invoerveld genereert met het bijbehorende token.
HTTP-methoden zoals PLAATSEN, PATCHEN of VERWIJDEREN Ze worden gesimuleerd via een verborgen veld _methoden Blade maakt het voor u beschikbaar @methode('PUT') (of PATCH/DELETE) om het automatisch in het formulier te genereren.
Om te laten zien validatiefouten De richtlijn bestaat @foutdie gekoppeld is aan een specifiek veld. Daarin is de variabele beschikbaar. $bericht met de fouttekst. Omdat het eigenlijk een gecompileerde if-instructie is, kunt u @else om alternatieve inhoud weer te geven als er geen fout is.
Het object $fouten Het is altijd aanwezig in de weergaven en groepeert alle validatieberichten voor de huidige aanvraag. Het integreert naadloos met de helper. old(), waarmee u het formulier opnieuw kunt vullen met de waarden die de gebruiker heeft ingediend na een mislukte validatie. De ingevoerde waarden blijven behouden en fouten worden duidelijk weergegeven.
Door deze richtlijnen te combineren met validatieregels in controllers of formulieraanvragen, ontstaat een robuuste servervalidatiestroom , die een aanvulling vormt op clientvalidatie en veel beter bestand is tegen kwaadwillige manipulatie.
Stapels in Blade: @stack, @push, @prepend en het hasStack-concept
Een van de minder besproken, maar zeer nuttige functies van Blade voor grote projecten zijn stacks . Een stack is in feite een verzameling viewfragmenten waaraan je content kunt toevoegen vanuit childviews, componenten of includes, en die je vervolgens allemaal samen kunt renderen op een specifiek punt in de masterlayout.
De `@stack('name')` -richtlijn specificeert waar alle fragmenten die bij die stack horen, naartoe worden gepusht. Vanuit een andere weergave kunt u daarentegen `@push('name')` gebruiken om inhoud naar het einde van de stack te pushen of `@prepend('name') ` om deze naar het begin te pushen. Dit wordt vaak gebruikt voor scripts en paginaspecifieke stijlen.
Stel je bijvoorbeeld voor dat je in je lay-out zoiets hebt in de <head> en aan het einde van <body>:
@stack('styles')
...
@stack('scripts')
Vervolgens kunt u in een specifieke weergave die extra JavaScript vereist , het volgende doen:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
Hierdoor hoeft de lay-out niet elk script of elke stijl op elke pagina te kennen ; er worden alleen de stacks gedefinieerd, en de onderliggende weergaven stapelen wat ze nodig hebben. Er is ook `@pushIf` om content te pushen op basis van een booleaanse voorwaarde zonder de volledige `if`-instructie te hoeven schrijven.
In deze context missen veel ontwikkelaars een richtlijn zoals `@hasStack` of iets dergelijks , waarmee ze kunnen controleren of een bepaalde stack inhoud bevat voordat deze wordt weergegeven. Hoewel Blade niet standaard een richtlijn met die naam bevat, is het idee duidelijk: iets kunnen doen als "als de scriptstack leeg is, print dan geen extra labels" of "als er elementen in een metadatastack staan, plaats deze dan in een specifiek blok".
De manier om vandaag de dag gelijkwaardig gedrag te bereiken is complementeer stapelrichtlijnen met logica in de lay-out of met aangepaste helpers, of zelfs met onze eigen geregistreerde richtlijnen via Blade::directive()Op deze manier kan een hasStack-richtlijn worden gesimuleerd die intern de stack bevraagt voordat wordt besloten welke HTML moet worden gegenereerd.
JSON-, JavaScript- en helperrichtlijnen in Blade
In veel Laravel-weergaven moet je gegevens van de backend naar JavaScript doorgeven. Meestal houdt dit in dat je een json_encode() van een array of verzameling en laat deze in een inline script staan, maar dat is niet altijd veilig of handig. Laravel maakt dit gemakkelijker met de helper Js::from(), die PHP-waarden serialiseert en correct escapet naar JSON voor insluiting in HTML.
Wanneer u complexe gegevens naar de browser weergeeft, Js::from() Het vermijdt problemen met aanhalingstekens of speciale tekens en retourneert een expressie JSON.parse() Veilig voor gebruik in attributen of scripts. Het doorgeven van complexe expressies binnen de richtlijn wordt afgeraden, omdat Blade intern regex gebruikt bij het compileren ervan, wat op onverwachte manieren tot storingen kan leiden.
Bovendien kun je met Blade sjablooncommentaren definiëren die niet in de uiteindelijke HTML worden opgenomen (in tegenstelling tot klassieke HTML-commentaren) en @php … @endphp- blokken gebruiken om kleine stukjes pure PHP uit te voeren wanneer dat absoluut noodzakelijk is. Je kunt zelfs @use gebruiken om klassen in de view te importeren of er aliassen aan toe te wijzen, wat handig is bij het werken met helpers of zeer specifieke componenten.
Als u het punt bereikt dat u een zeer gespecialiseerde echofunctionaliteit voor bepaalde objecten nodig hebt, kunt u deze registreren aangepaste echo-handlers met Blade::stringable()zodat Blade bij het echoën van een specifiek object jouw callback aanroept in plaats van de magische methode __toString() van de klas.
Foutweergaven, fragmenten en aangepaste richtlijnen
Met Laravel kunt u de foutweergaven: maak eenvoudig bestanden aan in resources/views/errors met de HTTP-code als naam (bijvoorbeeld 404.blade.php o 500.blade.phpElke keer dat deze fout optreedt, wordt uw sjabloon gebruikt in plaats van de generieke sjabloon van het framework.
Voor gevallen waarin u met hulpmiddelen als Turbo of htmx werkt en gewoon terug wilt keren specifieke fragmenten van een uitzichtBlade biedt de richtlijnen @fragment … @endfragment gecombineerd met methoden zoals view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Op deze manier kunt u dezelfde volledige sjabloon hergebruiken en, afhankelijk van de context, alleen de onderdelen extraheren die u nodig hebt.
Als het repertoire aan richtlijnen niet voldoende voor u is, kunt u altijd uw eigen repertoire creëren met Blade::directive()De gebruikelijke praktijk is om ze te registreren met behulp van de methode boot() de AppServiceProvider of via een speciale provider. De Blade-compiler stuurt je de expressie in de richtlijn als een string, en je retourneert de PHP-code die je bij compilatie wilt genereren.
Voor eenvoudige aangepaste voorwaarden is er ook Blad::als()die voorwaardelijke richtlijnen op één regel creëert. U kunt bijvoorbeeld definiëren @disk('s3') om te controleren of de standaardschijf van de app S3 is en deze vervolgens in elke weergave te gebruiken alsof het een native richtlijn is.
Met dit arsenaal kun je een sjabloontaal bouwen die praktisch is afgestemd op je behoeften , inclusief een `hasStack-type`-richtlijn als je dat wilt. Deze fungeert als syntactische suiker voor de logica die intern controleert of een stapel inhoud bevat voordat deze wordt afgedrukt.
Door Blade grondig te beheersen – van basissyntaxis tot geavanceerde componenten, autorisatierichtlijnen, validatie, omgevingen en vooral stackbeheer – kunt u modulaire, veilige, consistente en gemakkelijk te onderhouden weergaven bouwen , waar een toekomstige richtlijn zoals hasStack natuurlijk in zou passen om de controle over wat er in elk deel van uw lay-out wordt geïnjecteerd verder te verfijnen.