{"id":54945,"date":"2023-08-15T12:17:55","date_gmt":"2023-08-15T10:17:55","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=54945&#038;preview=true&#038;preview_id=54945"},"modified":"2023-08-25T17:15:57","modified_gmt":"2023-08-25T15:15:57","slug":"laravel-blade","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/","title":{"rendered":"Laravel Blade begrijpen en gebruiken"},"content":{"rendered":"<p>De templating engines van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-laravel\/\">Laravel<\/a> ondersteunen React, Vue en andere bibliotheken. Toch houden developers van de robuuste mogelijkheid van de Laravel <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade\" target=\"_blank\" rel=\"noopener noreferrer\">Blade<\/a> engine om snel modulaire en herbruikbare views te maken. Met Blade kun je moeiteloos layouts uitbreiden, secties defini\u00ebren en controlestructuren gebruiken om datagestuurde inhoud te genereren.<\/p>\n<p>Dit praktische artikel onderzoekt wat Blade is, hoe het werkt en hoe het je Laravel applicaties verbetert.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Alles wat je nodig hebt om Laravel Blade te gebruiken<\/h2>\n<p>Laravel Blade is de standaard templating engine voor het Laravel framework. Hiermee kun je variabelen, loops, voorwaardelijke verklaringen en andere PHP functies rechtstreeks in je HTML code gebruiken. Om Blade bestanden te maken, definieer je eenvoudigweg Blade views door bestanden aan te maken met de extensie <code>.blade.php<\/code> in de <strong>resources\/views<\/strong> directory van je Laravel project en vervolgens structureer je je gewenste dynamische pagina&#8217;s in deze bestanden.<\/p>\n<h3>Waarom zou je Blade gebruiken?<\/h3>\n<p>Een belangrijk voordeel van Blade is zijn modulaire codeorganisatie. Blade helpt je om je code te organiseren in herbruikbare modules die je gemakkelijk kunt toevoegen, verwijderen of bijwerken zonder de rest van je applicatie te be\u00efnvloeden.<\/p>\n<p><em>Code encapsulation<\/em> is een ander voordeel van Blade. Blade helpt functies in te kapselen, waardoor testen, debuggen en codeonderhoud beter beheersbaar worden. Deze aanpak komt grotere applicaties ten goede omdat ongeorganiseerde applicaties snel moeilijk te beheren kunnen worden.<\/p>\n<p>Blade&#8217;s templating engine is high-performance en het <a href=\"https:\/\/kinsta.com\/nl\/blog\/php-benchmarks\/#laravel-benchmarks\">snelste PHP framework dat we hebben getest<\/a>. De engine compileert al je blade views in gewone PHP code en slaat ze op in de cache totdat je ze aanpast. Deze aanpak zorgt voor snellere rendering en betere prestaties.<\/p>\n<p>\u00a0<\/p>\n<h2>Zo gebruik je Laravel Blade<\/h2>\n<p>In deze tutorial maken we een Laravel applicatie om Blade templates in actie te ervaren. Leer om blade layouts te defini\u00ebren en uit te breiden, gegevens door te geven tussen blade views, de verschillende beschikbare controlestructuren te gebruiken en je eigen blades te maken.<\/p>\n<h3>Vereisten<\/h3>\n<p>Om deze tutorial te kunnen volgen, moet je over het volgende beschikken:<\/p>\n<ul>\n<li>Voorkennis van PHP<\/li>\n<li><a href=\"https:\/\/getcomposer.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> ge\u00efnstalleerd. Controleer of Composer op je systeem staat door het volgende uit te voeren <code>composer -V<\/code><\/li>\n<\/ul>\n<p>Bekijk de <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-blade\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">volledige code van deze tutorial<\/a> voor begeleiding tijdens het werken.<\/p>\n<h2>De Laravel applicatie maken<\/h2>\n<p>Om een voorbeeld Laravel applicatie te maken, voer je uit:<\/p>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-app<\/code><\/pre>\n<p>Volg de instructies op je terminal om het maken van de app af te ronden.<\/p>\n<p>Ga vervolgens naar de app directory en serve deze met dit commando:<\/p>\n<pre><code class=\"language-bash\">cd my-app\nphp artisan serve<\/code><\/pre>\n<p>Klik op de link in de terminal om de Laravel Welcome pagina in je browser te openen.<\/p>\n<p>\u00a0<\/p>\n<h2>De layout defini\u00ebren<\/h2>\n<p>Met layouts kun je delen van je webapplicatie configureren zodat ze op meerdere pagina&#8217;s te zien zijn. Als je applicatie bijvoorbeeld een consistente navigatiebalk en footer heeft voor alle pagina&#8217;s, is het effici\u00ebnter om die \u00e9\u00e9n keer te maken dan ze voor elke pagina opnieuw te bouwen.<\/p>\n<p>Voordat je stap voor stap de instructies doorloopt, kun je het volgende voorbeeld bekijken.<\/p>\n<p>De code voor het maken van websites zonder layout staat hieronder. Het zorgt ervoor dat je de code van je navbar en footer voor elke pagina opnieuw moet schrijven.<\/p>\n<pre><code class=\"language-html\"><!-- Page 1 -->&lt;!-- Page 1 --&gt;\n&lt;nav&gt;. . . &lt;\/nav&gt;\n  Content for page 1\n&lt;footer&gt; . . . &lt;\/footer&gt;<\/code><\/pre>\n<pre><code class=\"language-html\"><!-- Page 2 -->&lt;!-- Page 1 --&gt;\n&lt;nav&gt;. . . &lt;\/nav&gt;\n  Content for page 2\n&lt;footer&gt; . . . &lt;\/footer&gt;<\/code><\/pre>\n<p>In plaats daarvan kun je je applicatie eenvoudig opbouwen met layouts om dezelfde onderdelen in \u00e9\u00e9n codeblok te delen:<\/p>\n<pre><code class=\"language-html\"><!-- Main layout code -->&lt;!-- Main layout code --&gt;\n&lt;nav&gt;. . . &lt;\/nav&gt;\n{slot}\n&lt;footer&gt; . . . &lt;\/footer&gt;<\/code><\/pre>\n<p>Als je eenmaal je layout hebt gedefinieerd, kun je deze op elke pagina gebruiken die je maar wilt:<\/p>\n<pre><code class=\"language-html\"><!-- Page 1 or Page n -->&lt;!-- Page 1 or Page n --&gt;\n&lt;main-layout&gt;\n  Content for page n\n&lt;\/main-layout&gt;<\/code><\/pre>\n<p>In oudere Laravel versies moest je layouts maken met behulp van <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#layouts-using-template-inheritance\" target=\"_blank\" rel=\"noopener noreferrer\">template inheritance<\/a>. Maar toen het bedrijf de <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#components\" target=\"_blank\" rel=\"noopener noreferrer\">component functie<\/a> toevoegde, werd het veel gemakkelijker om robuuste layouts te maken.<\/p>\n<p>Om een nieuwe layout te maken met Laravel Blade, voer je eerst dit commando uit om het component van de layout te maken:<\/p>\n<pre><code class=\"language-bash\">php artisan make:component Layout<\/code><\/pre>\n<p>Dit commando genereert een nieuw <strong>layout.blade.php<\/strong> bestand in een nieuwe map genaamd <strong>components<\/strong> in de <strong>resources\/views\/<\/strong> directory. Open dat bestand en plak deze code:<\/p>\n<pre><code class=\"language-php\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;{{ $title ?? 'Example Website' }}&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"{{ asset('\/css\/app.css') }}\"&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;nav&gt;\n      &lt;h3&gt;Welcome to my website&lt;\/h3&gt;\n      &lt;hr&gt;\n    &lt;\/nav&gt;\n    {{ $slot }}\n    &lt;footer&gt;\n      &lt;hr \/&gt;\n      \u00a9 2023 example.com\n    &lt;\/footer&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Deze code maakt een layoutcomponent met een eenvoudige navbar en footer. De <code><a href=\"https:\/\/laravel.com\/docs\/5.5\/blade#components-and-slots\" target=\"_blank\" rel=\"noopener noreferrer\">slot<\/a><\/code> functie definieert waar de hoofdinhoud moet worden doorgegeven wanneer je je layoutcomponent uitbreidt.<\/p>\n<h2>De layout uitbreiden<\/h2>\n<p>Je kunt eenvoudig een component importeren in een blade view met de tag <code>&lt;x-component-name&gt;<\/code>. Deze methode is ook van toepassing op de layoutcomponent die je eerder hebt gemaakt.<\/p>\n<p>Om te zien hoe het uitbreiden van de layout eruit ziet, open je het standaard bestand <strong>resources\/views\/welcome.blade.php<\/strong> en vervang je de inhoud van het bestand door deze code:<\/p>\n<pre><code class=\"language-html\">&lt;x-layout&gt;\n  &lt;div&gt;\n\t&lt;h1&gt;Hello World!&lt;\/h1&gt;\n\t&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?&lt;\/p&gt;\n    &lt;button class=\"btn\"&gt;Get Started&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/x-layout&gt;<\/code><\/pre>\n<p>Met deze aanpak wordt de welkomstpagina bijgewerkt om de layoutcomponent te gebruiken, terwijl een heading-element en een paragraaf met wat voorbeeldtekst als inhoud worden doorgegeven. Herlaad de link die je eerder hebt geopend om de wijzigingen te bekijken.<\/p>\n<p>In je layoutdefinitie zie je dat de code titeldata rendert die standaard &#8220;Example Website&#8221; is als de code de titeldata niet doorgeeft. Je kunt deze gegevens doorgeven als named slots in je views via de code <code>&lt;x-slot name=\"slotName\" \/&gt;<\/code> &#8211; in dit geval <code>&lt;x-slot name=\"title\" \/&gt;<\/code>. Werk het bestand <strong>welcome.blade.php<\/strong> bij met de onderstaande code en laad de pagina opnieuw:<\/p>\n<pre><code class=\"language-html\">&lt;x-layout&gt;\n  &lt;x-slot name=\"title\"&gt;\n    Home | Example Website\n  &lt;\/x-slot&gt;\n  &lt;div&gt;\n  &lt;h1&gt;Hello World!&lt;\/h1&gt;\n  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?&lt;\/p&gt;\n    &lt;button class=\"btn\"&gt;Get Started&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/x-layout&gt;<\/code><\/pre>\n<p>Voeg vervolgens wat styling toe om het uiterlijk van je app te verbeteren. Maak een nieuw <strong>app.css<\/strong> bestand in de map <strong>\/public\/css<\/strong> en plak de code uit dit <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-blade\/blob\/main\/public\/css\/app.css\">bestand<\/a>.<\/p>\n<p>Met al deze updates zou je de volgende output moeten zien als je een voorbeeld van je applicatie bekijkt op http:\/\/127.0.0.1:8000\/.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-blade-app-hello-world.jpg\" alt=\"Hallo wereld\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Hallo wereld<\/figcaption><\/figure>\n<h2>Backend data opnemen<\/h2>\n<p>In het vorige voorbeeld heb je eenvoudig gegevens gedeeld tussen componenten en views via slots. Er zijn echter betere benaderingen voor het laden van gegevens vanuit een database of andere externe source.<\/p>\n<p>Hierbij kun je de gegevens rechtstreeks vanuit je routerdefinitie laden en doorgeven en ze openen zoals je in het vorige voorbeeld een named slot hebt geopend. Open daarvoor het bestand<strong> routes\/web.php<\/strong> en vervang de inhoud door deze code:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nuse IlluminateSupportFacadesRoute;\n\nRoute::get('\/', function () {\n  $name = \"John Doe\";\n  return view('welcome', ['name' =&gt; $name]);\n});<\/code><\/pre>\n<p>In de bovenstaande code heb je je webroute bijgewerkt om de naam <code>\"John Doe\"<\/code> door te geven aan de welcome view. Open deze waarde nu op deze manier in je blade view:<\/p>\n<pre><code class=\"language-php\">&lt;div&gt;\n  Hello, {{ $name }}\n <code>  &lt;!-- Outputs: Hello, John Doe --&gt;\n<\/code>&lt;\/div&gt;<\/code><\/pre>\n<p>Je kunt deze methode gebruiken om gegevens uit een database te laden. Stel bijvoorbeeld dat je een to-dos tabel hebt die een to-do lijst bevat. Gebruik de <a href=\"https:\/\/laravel.com\/docs\/10.x\/database#running-queries\">DB facade<\/a> om deze to-dos te laden en door te geven aan je view:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nuse IlluminateSupportFacadesDB; \/\/ Import DB Facade\nuse IlluminateSupportFacadesRoute;\n\nRoute::get('\/', function () {\n  $todos = DB::table('todos')-&gt;get();\n  return view('welcome', ['todos' =&gt; $todos]);\n});<\/code><\/pre>\n<p>Als je echter geen database hebt, werk dan de web entry route bij om een array van statische to-dos door te geven. Open het bestand <strong>routes\/web.php<\/strong> en werk de standaardroute <code>(\/)<\/code> bij met de onderstaande code:<\/p>\n<pre><code class=\"language-php\">Route::get('\/', function () {\n  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];\n  return view('welcome', ['todos' =&gt; $todos]);\n});<\/code><\/pre>\n<p>Vervang de inhoud van het bestand <strong>welcome.blade.php<\/strong> door de onderstaande code om toegang te krijgen tot de to-dos als een gecodeerde JSON array.<\/p>\n<pre><code class=\"language-php\">&lt;x-layout&gt;\n  &lt;x-slot name=\"title\"&gt;\n    Home | Example Website\n  &lt;\/x-slot&gt;\n  &lt;p&gt;{{ json_encode($todos) }}&lt;\/p&gt;\n    &lt;!-- Output:  [\"Learn Laravel\",\"Learn Blade\",\"Build Cool Stuff\"] --&gt;\n&lt;\/x-layout&gt;<\/code><\/pre>\n<h2>Control shortcuts gebruiken<\/h2>\n<p>De Templating engine van Blade ondersteunt ook meerdere directives om verschillende gegevenstypes voorwaardelijk weer te geven. Om bijvoorbeeld door de geretourneerde to-dos array te gaan die je hebt doorgegeven aan je welcome view, pas je een <code>foreach<\/code> loop toe door de volgende code in het bestand <strong>welcome.blade.php<\/strong> te plakken:<\/p>\n<pre><code class=\"language-php\">&lt;x-layout&gt;\n  &lt;x-slot name=\"title\"&gt;\n    Home | Example Website\n  &lt;\/x-slot&gt;\n  &lt;ul&gt;\n    @foreach ($todos as $todo)\n      &lt;li&gt;{{ $todo }}&lt;\/li&gt;\n    @endforeach\n  &lt;\/ul&gt;     \n&lt;\/x-layout&gt;<\/code><\/pre>\n<p>Deze wijziging zou je to-dos in een ongeordende lijst moeten weergeven, zoals in de schermafbeelding hieronder.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-app-todos-list.jpg\" alt=\"To-dos in een ongeordende lijst\" width=\"1999\" height=\"1001\"><figcaption class=\"wp-caption-text\">To-dos in een ongeordende lijst<\/figcaption><\/figure>\n<p>Gebruik de directives <code>@if<\/code>, <code>@elseif<\/code>, <code>@else<\/code> en <code>@endif<\/code> om een blok voorwaardelijke commando&#8217;s te maken. Bijvoorbeeld:<\/p>\n<pre><code class=\"language-php\">@if (count($todos) === 1)\n  &lt;p&gt;I have one task!&lt;\/p&gt;\n@elseif (count($todos) &gt; 1)\n  &lt;p&gt;I have multiple tasks!&lt;\/p&gt;\n@else\n  &lt;p&gt;I don't have any tasks!&lt;\/p&gt;\n@endif<\/code><\/pre>\n<p>Vervang de inhoud van het bestand<strong> welcome.blade.php<\/strong> door bovenstaande code. De verschillende directives <code>if<\/code>&#8211;<code>else<\/code> tellen de taken en geven een custom bericht weer voor verschillende scenario&#8217;s. Als je meer dan \u00e9\u00e9n taak in je to-dos array hebt, zou je de uitvoer &#8220;I have multiple tasks!&#8221; in de browser moeten zien.<\/p>\n<p>Je kunt meer ondersteunde directives vinden in de <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#blade-directives\" target=\"_blank\" rel=\"noopener noreferrer\">documentatie van Laravel<\/a>.<\/p>\n<h2>Een custom extensie maken<\/h2>\n<p>Je kunt ook een custom directive schrijven, vergelijkbaar met het vorige voorbeeld. Om deze techniek te verkennen, maak je een custom text-truncating directive.<\/p>\n<p>Maak eerst een nieuwe <a href=\"https:\/\/laravel.com\/docs\/10.x\/providers\" target=\"_blank\" rel=\"noopener noreferrer\">serviceprovider<\/a> door uit te voeren:<\/p>\n<pre><code class=\"language-bash\">php artisan make:provider TruncateTextServiceProvider<\/code><\/pre>\n<p>Dit commando genereert een nieuw serviceprovider bestand op <strong>app\/Providers\/TruncateTextServiceProvider.php<\/strong>. Open dit bestand en vervang de inhoud door:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nnamespace AppProviders;\n\nuse IlluminateSupportFacadesBlade;\nuse IlluminateSupportServiceProvider;\n\nclass TruncateTextServiceProvider extends ServiceProvider\n{\n  public function register()\n  {\n    \/\/\n  }\n  public function boot()\n  {\n    Blade::directive('truncate', function ($expression) {\n      list($text, $length) = explode(',', $expression);\n      return \"&lt;?php echo Str::limit($text, $length); ?&gt;\";\n    });\n  }\n}<\/code><\/pre>\n<p>De code importeert de Blade facade en definieert een nieuwe custom directive met de naam <code>@truncate<\/code>. De directive accepteert twee argumenten: <code>$text<\/code> en <code>$length<\/code>. Het gebruikt de methode <code>Str::limit()<\/code> om de tekst af te korten tot de opgegeven lengte.<\/p>\n<p>Tenslotte registreer je de serviceprovider door hem toe te voegen aan de providers array in het configuratiebestand <strong>config\/app.php<\/strong>:<\/p>\n<pre><code class=\"language-php\">'providers' =&gt; [\n  \/\/ Other service providers\n  AppProvidersTruncateTextServiceProvider::class,\n],\n<\/code><\/pre>\n<p>Gebruik de custom directive in je Blade templates (<strong>welcome.blade.php<\/strong>) door deze te callen via de <code>@truncate<\/code> syntaxis.<\/p>\n<pre><code class=\"language-php\">&lt;div&gt;\n  @truncate('Lorem ipsum dolor sit amet', 10)\n    &lt;!-- Outputs: Lorem ipsu... --&gt;<!-- Outputs: Lorem ipsu... -->\n&lt;\/div&gt;<\/code><\/pre>\n<p>\u00a0<\/p>\n<h2>Samenvatting<\/h2>\n<p>Dit artikel onderzocht hoe Laravel Blade je in staat stelt om je ontwikkelproces te stroomlijnen terwijl je modulaire en herbruikbare views voor webapplicaties maakt. Maar je Laravel ontwikkelingsreis zou daar niet moeten eindigen.<\/p>\n<p>De infrastructuur die je applicatie host is net zo belangrijk voor je succes als je lokale ontwikkelproces. Om je Laravel applicatie naar het volgende niveau te tillen, heb je een betrouwbaar hostingplatform nodig dat de eisen aankan.<\/p>\n<p>Kinsta optimaliseert hostingoplossingen voor prestaties, beveiliging en schaalbaarheid, zodat je <a href=\"https:\/\/sevalla.com\/application-hosting\/\">je applicatie kunt laten groeien in de best mogelijke omgeving<\/a>. <a href=\"https:\/\/docs.sevalla.com\/templates\/overview#laravel\">Deploy je Laravel app op Kinsta<\/a> om het zelf te ervaren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De templating engines van Laravel ondersteunen React, Vue en andere bibliotheken. Toch houden developers van de robuuste mogelijkheid van de Laravel Blade engine om snel modulaire &#8230;<\/p>\n","protected":false},"author":290,"featured_media":54946,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[866],"class_list":["post-54945","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-laravel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Laravel Blade begrijpen en gebruiken - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Blade begrijpen en gebruiken\" \/>\n<meta property=\"og:description\" content=\"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-15T10:17:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T15:15:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Laravel Blade begrijpen en gebruiken\",\"datePublished\":\"2023-08-15T10:17:55+00:00\",\"dateModified\":\"2023-08-25T15:15:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\"},\"wordCount\":1483,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\",\"name\":\"Laravel Blade begrijpen en gebruiken - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\",\"datePublished\":\"2023-08-15T10:17:55+00:00\",\"dateModified\":\"2023-08-25T15:15:57+00:00\",\"description\":\"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Laravel Blade begrijpen en gebruiken\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Blade begrijpen en gebruiken - Kinsta\u00ae","description":"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/","og_locale":"nl_NL","og_type":"article","og_title":"Laravel Blade begrijpen en gebruiken","og_description":"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-08-15T10:17:55+00:00","article_modified_time":"2023-08-25T15:15:57+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Marcia Ramos","Geschatte leestijd":"9 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Laravel Blade begrijpen en gebruiken","datePublished":"2023-08-15T10:17:55+00:00","dateModified":"2023-08-25T15:15:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/"},"wordCount":1483,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/","url":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/","name":"Laravel Blade begrijpen en gebruiken - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","datePublished":"2023-08-15T10:17:55+00:00","dateModified":"2023-08-25T15:15:57+00:00","description":"Laravel Blade is de standaard template engine voor het Laravel framework. Leer er meer over en hoe je het goed kunt gebruiken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/laravel-blade.jpg","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/laravel-blade\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/laravel\/"},{"@type":"ListItem","position":3,"name":"Laravel Blade begrijpen en gebruiken"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/nl\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=54945"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54945\/revisions"}],"predecessor-version":[{"id":55171,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54945\/revisions\/55171"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54945\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/54946"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=54945"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=54945"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=54945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}