{"id":64869,"date":"2023-08-15T11:15:53","date_gmt":"2023-08-15T10:15:53","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=64869&#038;preview=true&#038;preview_id=64869"},"modified":"2023-08-31T09:26:20","modified_gmt":"2023-08-31T08:26:20","slug":"laravel-blade","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/","title":{"rendered":"Laravel Blade verstehen und nutzen"},"content":{"rendered":"<p>Die Templating-Engines von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-laravel\/\">Laravel<\/a> unterst\u00fctzen React, Vue und andere Bibliotheken. Entwickler lieben jedoch die robuste F\u00e4higkeit der Laravel <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade\" target=\"_blank\" rel=\"noopener noreferrer\">Blade<\/a>-Engine, schnell modulare und wiederverwendbare Ansichten zu erstellen. Mit Blade kannst du m\u00fchelos Layouts erweitern, Abschnitte definieren und Kontrollstrukturen verwenden, um datengesteuerte Inhalte zu erstellen.<\/p>\n<p>In diesem praxisnahen Artikel erf\u00e4hrst du, was Blade ist, wie es funktioniert und wie es deine Laravel-Anwendungen verbessert.<\/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 was du brauchst, um Laravel Blade zu benutzen<\/h2>\n<p>Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Mit ihr kannst du Variablen, Schleifen, bedingte Anweisungen und andere PHP-Funktionen direkt in deinem HTML-Code verwenden. Um Blade-Dateien zu erstellen, definierst du einfach Blade-Views, indem du Dateien mit der Erweiterung <code>.blade.php<\/code> im Verzeichnis <strong>resources\/views<\/strong> deines Laravel-Projekts anlegst und dann deine gew\u00fcnschten dynamischen Seiten in diesen Dateien strukturierst.<\/p>\n<h3>Warum solltest du Blade verwenden?<\/h3>\n<p>Ein Hauptvorteil von Blade ist seine modulare Codeorganisation. Mit Blade kannst du deinen Code in wiederverwendbare Module einteilen, die du leicht hinzuf\u00fcgen, entfernen oder aktualisieren kannst, ohne dass der Rest deiner Anwendung davon betroffen ist.<\/p>\n<p>Ein weiterer Vorteil von Blade ist die Codekapselung. Blade hilft dabei, Funktionen zu kapseln, was das Testen, Debuggen und die Wartung des Codes vereinfacht. Dieser Ansatz kommt gr\u00f6\u00dferen Anwendungen zugute, denn unorganisierte Anwendungen k\u00f6nnen schnell schwer zu verwalten sein.<\/p>\n<p>Die Templating-Engine von Blade ist sehr leistungsf\u00e4hig und das <a href=\"https:\/\/kinsta.com\/de\/blog\/php-benchmarks\/#laravel-benchmarks\">schnellste PHP-Framework, das wir getestet haben<\/a>. Die Engine kompiliert alle Blade-Ansichten in einfachen PHP-Code und speichert sie im Cache, bis du sie \u00e4nderst. Dieser Ansatz sorgt f\u00fcr ein schnelleres Rendering und eine insgesamt bessere Leistung.<\/p>\n<h2>Wie man Laravel Blade verwendet<\/h2>\n<p>In diesem Lernprogramm erstellen wir eine Laravel-Anwendung, um Blade-Vorlagen in Aktion zu erleben. Du lernst, Blade-Layouts zu definieren und zu erweitern, Daten zwischen Blade-Ansichten zu \u00fcbertragen, die verschiedenen verf\u00fcgbaren Kontrollstrukturen zu nutzen und deine eigenen Blades zu erstellen.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Um diesem Tutorial folgen zu k\u00f6nnen, musst du \u00fcber folgende Voraussetzungen verf\u00fcgen:<\/p>\n<ul>\n<li>Vorkenntnisse in PHP<\/li>\n<li><a href=\"https:\/\/getcomposer.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> ist installiert. \u00dcberpr\u00fcfe, ob der Composer auf deinem System installiert ist, indem du <code>composer -V<\/code><\/li>\n<\/ul>\n<p>Schau dir den <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-blade\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">kompletten Code des Tutorials<\/a> an, um dich bei der Arbeit zu unterst\u00fctzen.<\/p>\n<h2>So erstellst du die Laravel-Anwendung<\/h2>\n<p>Um eine Laravel-Beispielanwendung zu erstellen, f\u00fchre aus:<\/p>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-app<\/code><\/pre>\n<p>Befolge die Anweisungen auf deinem Terminal, um die Anwendung zu erstellen.<\/p>\n<p>Als N\u00e4chstes gehst du in das Anwendungs-Verzeichnis und rufst sie mit diesem Befehl auf:<\/p>\n<pre><code class=\"language-bash\">cd my-app\nphp artisan serve<\/code><\/pre>\n<p>Klicke auf den Link im Terminal, um die Laravel-Willkommensseite in deinem Browser zu \u00f6ffnen.<\/p>\n<h2>Wie du das Layout definierst<\/h2>\n<p>Mit Layouts kannst du Abschnitte deiner Webanwendung so konfigurieren, dass sie sich \u00fcber mehrere Seiten erstrecken. Wenn deine Anwendung zum Beispiel eine einheitliche Navigationsleiste und Fu\u00dfzeile f\u00fcr alle Seiten hat, ist es effizienter, diese einmal zu erstellen, als sie f\u00fcr jede Seite neu zu erstellen.<\/p>\n<p>Bevor du die Schritt-f\u00fcr-Schritt-Anleitung durcharbeitest, solltest du dir das folgende Beispiel ansehen.<\/p>\n<p>Der Code f\u00fcr die Erstellung von Websites ohne Layouts ist unten abgebildet. Er zwingt dich, den Code f\u00fcr die Navigationsleiste und die Fu\u00dfzeile f\u00fcr jede Seite neu zu schreiben.<\/p>\n<pre><code class=\"language-html\"><!-- Page 1 -->\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 -->\n&lt;nav&gt;. . . &lt;\/nav&gt;\n  Content for page 2\n&lt;footer&gt; . . . &lt;\/footer&gt;<\/code><\/pre>\n<p>Stattdessen kannst du deine Anwendung ganz einfach mit Layouts aufbauen, um dieselben Komponenten in einem einzigen Codeblock gemeinsam zu nutzen:<\/p>\n<pre><code class=\"language-html\"><!-- Main layout code -->\n&lt;nav&gt;. . . &lt;\/nav&gt;\n{slot}\n&lt;footer&gt; . . . &lt;\/footer&gt;<\/code><\/pre>\n<p>Sobald du dein Layout definiert hast, kannst du es auf jeder beliebigen Seite verwenden:<\/p>\n<pre><code class=\"language-html\"><!-- Page 1 or Page n -->\n&lt;main-layout&gt;\n  Content for page n\n&lt;\/main-layout&gt;<\/code><\/pre>\n<p>In \u00e4lteren Laravel-Versionen musstest du Layouts mithilfe von <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#layouts-using-template-inheritance\" target=\"_blank\" rel=\"noopener noreferrer\">Vorlagenvererbung<\/a> erstellen. Als das Unternehmen jedoch die <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#components\" target=\"_blank\" rel=\"noopener noreferrer\">Komponentenfunktion<\/a> einf\u00fchrte, wurde es viel einfacher, robuste Layouts zu erstellen.<\/p>\n<p>Um ein neues Layout mit Laravel Blade zu erstellen, f\u00fchre zuerst diesen Befehl aus, um die Komponente des Layouts zu erstellen:<\/p>\n<pre><code class=\"language-bash\">php artisan make:component Layout<\/code><\/pre>\n<p>Dieser Befehl erzeugt eine neue Datei <strong>layout.blade.php<\/strong>, die sich in einem neuen Ordner namens <strong>components<\/strong> im Verzeichnis <strong>resources\/views\/<\/strong> befindet. \u00d6ffne diese Datei und f\u00fcge diesen Code ein:<\/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>Dieser Code erstellt eine Layoutkomponente mit einer einfachen Navigationsleiste und einer Fu\u00dfzeile. Die <code><a href=\"https:\/\/laravel.com\/docs\/5.5\/blade#components-and-slots\" target=\"_blank\" rel=\"noopener noreferrer\">slot<\/a><\/code> funktion legt fest, wohin der Hauptinhalt \u00fcbergeben werden soll, wenn du deine Layoutkomponente erweiterst.<\/p>\n<h2>Wie du das Layout erweiterst<\/h2>\n<p>Du kannst eine Komponente ganz einfach mit dem <code><\/code> Tag in eine Blade-Ansicht importieren. Diese Methode gilt auch f\u00fcr die Layoutkomponente, die du zuvor erstellt hast.<\/p>\n<p>Um zu sehen, wie die Erweiterung des Layouts aussieht, \u00f6ffne die Standarddatei <strong>resources\/views\/welcome.blade.php<\/strong> und ersetze den Inhalt der Datei durch diesen 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>Auf diese Weise wird die Willkommensseite so aktualisiert, dass sie die Layoutkomponente verwendet und als Inhalt ein \u00dcberschriftenelement und einen Absatz mit einem Mustertext \u00fcbergibt. Lade den Link, den du zuvor ge\u00f6ffnet hast, um die \u00c4nderungen zu sehen.<\/p>\n<p>In deiner Layoutdefinition hast du bemerkt, dass der Code eine \u00dcberschrift gerendert hat, die standardm\u00e4\u00dfig &#8222;Beispiel-Website&#8220; lautet, wenn der Code die \u00dcberschrift nicht \u00fcbergibt. Du kannst diese Daten als benannte Slots in deinen Ansichten \u00fcber den <code>&lt;x-slot name=\"slotName\" \/&gt;<\/code> Code \u00fcbergeben &#8211; in diesem Fall <code>&lt;x-slot name=\"title\" \/&gt;<\/code>. Aktualisiere die Datei <strong>welcome.blade.php<\/strong> mit dem unten stehenden Code und lade die Seite neu:<\/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>Als N\u00e4chstes f\u00fcgst du ein paar Stilelemente hinzu, um das Erscheinungsbild deiner Anwendung zu verbessern. Erstelle eine neue <strong>app.css<\/strong>-Datei im Verzeichnis <strong>\/public\/css<\/strong> und f\u00fcge dann den Code aus dieser <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-blade\/blob\/main\/public\/css\/app.css\">Datei<\/a> ein.<\/p>\n<p>Mit all diesen Aktualisierungen solltest du die folgende Ausgabe sehen, wenn du die Vorschau deiner Anwendung unter http:\/\/127.0.0.1:8000\/ aufrufst.<\/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=\"Hello World-Laravel \" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Hello World-Laravel<\/figcaption><\/figure>\n<h2>Wie man Backend-Daten einbindet<\/h2>\n<p>Im vorherigen Beispiel hast du Daten zwischen Komponenten und Views \u00fcber Slots ausgetauscht. Es gibt jedoch bessere Methoden, um Daten aus einer Datenbank oder einer anderen entfernten Quelle zu laden.<\/p>\n<p>In diesem Fall l\u00e4dst und \u00fcbergibst du die Daten direkt aus deiner Router-Definition und greifst auf sie zu, wie du im vorherigen Beispiel auf einen benannten Slot zugegriffen hast. Dazu \u00f6ffnest du die Datei<strong> routes\/web.php<\/strong> und ersetzst ihren Inhalt durch diesen 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>Im obigen Code hast du deine Webroute aktualisiert, um den Namen <code>\"John Doe\"<\/code> an die Willkommensansicht zu \u00fcbergeben. Jetzt greifst du auf diesen Wert in deinen Blade-Ansichten wie folgt zu:<\/p>\n<pre><code class=\"language-php\">&lt;div&gt;\n  Hello, {{ $name }}\n  <!-- Outputs: Hello, John Doe -->\n&lt;\/div&gt;<\/code><\/pre>\n<p>Du kannst diese Methode verwenden, um Daten aus einer Datenbank zu laden. Angenommen, du hast eine To-Do-Tabelle mit einer To-Do-Liste. Verwende die <a href=\"https:\/\/laravel.com\/docs\/10.x\/database#running-queries\">DB-Fassade<\/a>, um diese Aufgaben zu laden und sie an deine Ansicht zu \u00fcbergeben:<\/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>Wenn du jedoch keine Datenbank hast, aktualisiere die Web-Eingangsroute, um ein Array mit statischen To-Dos zu \u00fcbergeben. \u00d6ffne die Datei <strong>routes\/web.php<\/strong> und aktualisiere die Standardroute <code>(\/)<\/code> mit dem folgenden 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>Ersetze den Inhalt der Datei <strong>welcome.blade.php<\/strong> durch den folgenden Code, um auf die to-dos als kodiertes JSON-Array zuzugreifen.<\/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  <!-- Output: [\"Learn Laravel\",\"Learn Blade\",\"Build Cool Stuff\"] -->\n&lt;\/x-layout&gt;<\/code><\/pre>\n<h2>Verwendung von Steuerkurzbefehlen<\/h2>\n<p>Die Blade-Templating-Engine unterst\u00fctzt auch mehrere Direktiven, um verschiedene Datentypen bedingt darzustellen. Um z. B. das zur\u00fcckgegebene to-dos-Array zu durchlaufen, das du an deine Willkommensansicht \u00fcbergeben hast, f\u00fcge den folgenden Code in die Datei <strong>welcome.blade.php<\/strong> ein und wende eine <code>foreach<\/code> -Schleife an:<\/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>Diese \u00c4nderung sollte deine To-Dos in einer ungeordneten Liste darstellen, wie auf dem Screenshot unten.<\/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 einer ungeordneten Liste\" width=\"1999\" height=\"1001\"><figcaption class=\"wp-caption-text\">To-dos in einer ungeordneten Liste<\/figcaption><\/figure>\n<p>Um einen Block mit bedingten Anweisungen zu erstellen, verwendest du die Direktiven <code>@if<\/code>, <code>@elseif<\/code>, <code>@else<\/code> und <code>@endif<\/code>. Zum Beispiel:<\/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>Ersetze den Inhalt der Datei<strong> welcome.blade.php<\/strong> durch den obigen Code. Die verschiedenen <code>if<\/code>&#8211;<code>else<\/code> Direktiven z\u00e4hlen die Aufgaben und zeigen eine benutzerdefinierte Nachricht f\u00fcr verschiedene Szenarien an. Wenn du mehr als eine Aufgabe in deinem To-Do-Array hast, solltest du die Ausgabe &#8222;Ich habe mehrere Aufgaben!&#8220; im Browser sehen.<\/p>\n<p>Weitere unterst\u00fctzte Direktiven findest du in <a href=\"https:\/\/laravel.com\/docs\/10.x\/blade#blade-directives\" target=\"_blank\" rel=\"noopener noreferrer\">der Dokumentation von Laravel<\/a>.<\/p>\n<h2>Wie man eine benutzerdefinierte Erweiterung erstellt<\/h2>\n<p>Du kannst auch eine benutzerdefinierte Direktive schreiben, \u00e4hnlich wie im vorherigen Beispiel. Um diese Technik auszuprobieren, erstelle eine benutzerdefinierte Direktive zum K\u00fcrzen von Text.<\/p>\n<p>Erstelle zun\u00e4chst einen neuen <a href=\"https:\/\/laravel.com\/docs\/10.x\/providers\" target=\"_blank\" rel=\"noopener noreferrer\">Dienstanbieter<\/a>, indem du ihn ausf\u00fchrst:<\/p>\n<pre><code class=\"language-bash\">php artisan make:provider TruncateTextServiceProvider<\/code><\/pre>\n<p>Dieser Befehl erzeugt eine neue Dienstanbieterdatei unter <strong>app\/Providers\/TruncateTextServiceProvider.php<\/strong>. \u00d6ffne diese Datei und ersetze ihren Inhalt durch:<\/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>Der Code importiert die Blade-Fassade und definiert eine neue benutzerdefinierte Direktive namens <code>@truncate<\/code>. Die Direktive nimmt zwei Argumente entgegen: <code>$text<\/code> und <code>$length<\/code>. Sie verwendet die Methode <code>Str::limit()<\/code>, um den Text auf die angegebene L\u00e4nge zu k\u00fcrzen.<\/p>\n<p>Zum Schluss registrierst du den Dienstanbieter, indem du ihn in der Konfigurationsdatei <strong>config\/app.php<\/strong> zum Array deiner Anbieter hinzuf\u00fcgst:<\/p>\n<pre><code class=\"language-php\">'providers' =&gt; [\n  \/\/ Other service providers\n  AppProvidersTruncateTextServiceProvider::class,\n],\n<\/code><\/pre>\n<p>Verwende die benutzerdefinierte Direktive in deinen Blade-Vorlagen (<strong>welcome.blade.php<\/strong>), indem du sie mit der Syntax <code>@truncate<\/code> aufrufst.<\/p>\n<pre><code class=\"language-php\">&lt;div&gt;\n  @truncate('Lorem ipsum dolor sit amet', 10)\n  <!-- Outputs: Lorem ipsu... -->\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel hast du erfahren, wie du mit Laravel Blade deinen Entwicklungsprozess rationalisieren und modulare und wiederverwendbare Ansichten f\u00fcr Webanwendungen erstellen kannst. Doch damit sollte deine Laravel-Entwicklungsreise noch nicht zu Ende sein.<\/p>\n<p>Die Infrastruktur, in der deine Anwendung gehostet wird, ist f\u00fcr deinen Erfolg genauso wichtig wie dein lokaler Entwicklungsprozess. Um deine Laravel-Anwendung auf die n\u00e4chste Stufe zu heben, brauchst du eine zuverl\u00e4ssige Hosting-Plattform, die den Anforderungen gewachsen ist.<\/p>\n<p>Kinsta optimiert die Hosting-L\u00f6sungen hinsichtlich Leistung, Sicherheit und Skalierbarkeit, damit du <a href=\"https:\/\/sevalla.com\/application-hosting\/\">deine Anwendung in der bestm\u00f6glichen Umgebung entwickeln<\/a> kannst. <a href=\"https:\/\/docs.sevalla.com\/templates\/overview#laravel\">Setze deine Laravel-Anwendung auf Kinsta ein<\/a>, um es selbst zu erleben.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Templating-Engines von Laravel unterst\u00fctzen React, Vue und andere Bibliotheken. Entwickler lieben jedoch die robuste F\u00e4higkeit der Laravel Blade-Engine, schnell modulare und wiederverwendbare Ansichten zu erstellen. &#8230;<\/p>\n","protected":false},"author":290,"featured_media":64870,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[958],"class_list":["post-64869","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 verstehen und nutzen - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.\" \/>\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\/de\/blog\/laravel-blade\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Blade verstehen und nutzen\" \/>\n<meta property=\"og:description\" content=\"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-15T10:15:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T08:26:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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 ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Laravel Blade verstehen und nutzen\",\"datePublished\":\"2023-08-15T10:15:53+00:00\",\"dateModified\":\"2023-08-31T08:26:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\"},\"wordCount\":1455,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\",\"name\":\"Laravel Blade verstehen und nutzen - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg\",\"datePublished\":\"2023-08-15T10:15:53+00:00\",\"dateModified\":\"2023-08-31T08:26:20+00:00\",\"description\":\"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Laravel Blade verstehen und nutzen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Blade verstehen und nutzen - Kinsta\u00ae","description":"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.","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\/de\/blog\/laravel-blade\/","og_locale":"de_DE","og_type":"article","og_title":"Laravel Blade verstehen und nutzen","og_description":"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.","og_url":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-08-15T10:15:53+00:00","article_modified_time":"2023-08-31T08:26:20+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Marcia Ramos","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Laravel Blade verstehen und nutzen","datePublished":"2023-08-15T10:15:53+00:00","dateModified":"2023-08-31T08:26:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/"},"wordCount":1455,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/","url":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/","name":"Laravel Blade verstehen und nutzen - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","datePublished":"2023-08-15T10:15:53+00:00","dateModified":"2023-08-31T08:26:20+00:00","description":"Laravel Blade ist die Standard-Templating-Engine f\u00fcr das Laravel-Framework. Erfahre mehr \u00fcber sie und wie du sie richtig einsetzt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/laravel-blade\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/laravel-blade.jpg","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-blade\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/de\/thema\/laravel\/"},{"@type":"ListItem","position":3,"name":"Laravel Blade verstehen und nutzen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=64869"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64869\/revisions"}],"predecessor-version":[{"id":65346,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64869\/revisions\/65346"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64869\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/64870"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=64869"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=64869"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=64869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}