{"id":759,"date":"2025-02-06T15:33:48","date_gmt":"2025-02-06T20:33:48","guid":{"rendered":"https:\/\/waterloobae.com\/?p=759"},"modified":"2025-08-20T14:23:02","modified_gmt":"2025-08-20T18:23:02","slug":"laravel-blade-templates-overly-simplified","status":"publish","type":"post","link":"https:\/\/waterloobae.com\/blog\/2025\/02\/06\/laravel-blade-templates-overly-simplified\/","title":{"rendered":"[Laravel] Laravel Blade Templates – overly simplified"},"content":{"rendered":"\n

I am going to use Laravel Blade Templates to render H1 tag in orange. It is overly simplified Laravel Blade Templates guide line. The full documentations are available on https:\/\/laravel.com\/docs\/blade<\/a><\/p>\n\n\n\n

First of all, create any customized resources you need like css, js or image files under \/public directory. I am going to create \/public\/waterloobae.css as below.<\/p>\n\n\n\n

h1 {\n    color: orange;\n    font-size: 50px;\n    text-align: center;\n}<\/code><\/pre>\n\n\n\n
After that, create component to render H1 tags for Layouts or Views under \/resrouces\/views\/components\/. The file name will be waterloobae-h1.blade.php<\/strong><\/em><\/p>\n\n\n\n
Component <\/h2>\n\n\n\n
<h1>\n    {{ $slot }}\n<\/h1><\/code><\/pre>\n\n\n\n
Or<\/p>\n\n\n\n
<h1>\n    {{ $h1 }}\n<\/h1><\/code><\/pre>\n\n\n\n
php artisan make:component WaterloobaeH1<\/code><\/pre>\n\n\n\n
\/\/ \/app\/View\/Components\/WaterloobaeH1.php\n<?php\nnamespace App\\View\\Components;\nuse Illuminate\\View\\Component;\n\nclass WaterloobaeH1 extends Component\n{\n    public $h1;\n\n    public function __construct($h1)\n    {\n        $this->h1 = $h1;\n    }\n\n    public function render()\n    {\n        return view('components.waterloobae-h1');\n    }\n}<\/code><\/pre>\n\n\n\n
{{ $slop }} takes context what goes inside <x-waterloobae-h1><\/x-waterloobae-h1> tags. {{ $h1 }} takes property value of h1 in the opening tag like <x-waterloobae-h1 h1=”Hello There!”><\/x-waterloobae-h1>.<\/p>\n\n\n\n
Layout<\/h2>\n\n\n\n
Finally, we are going to make layout for overly simplified template under \/resources\/views\/layouts. The file name will be waterloobae.blade.php and one more file under \/app\/View\/Components\/WaterlooLayout.php. Those two file will be created with command of<\/p>\n\n\n\n
php artisan make:component WaterloobaeLayout<\/code><\/pre>\n\n\n\n
\/\/ \/app\/View\/Components\/WaterloobaeLayout.php\n<?php\n\nnamespace App\\View\\Components;\nuse Illuminate\\View\\Component;\n\nclass WaterloobaeLayout extends Component\n{\n    public $title;\n\n    public function __construct($title)\n    {\n        $this->title = $title;\n    }\n\n    public function render()\n    {\n        return view('layouts.waterloobae');\n    }\n}<\/code><\/pre>\n\n\n\n
The view layout is created under \/resources\/views\/layouts\/ as waterloobae.blade.php<\/strong><\/em> and it looks as<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n<head>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n    @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])\n    <link rel=\"stylesheet\" href=\"{{ asset('waterloobae.css') }}\">\n<\/head>\n\n<body class=\"tex2jax_ignore\" data-aos-easing=\"ease\" data-aos-duration=\"400\" data-aos-delay=\"0\">\n    <x-waterloobae-h1 h1=\"{{ $title }}\"><\/x-waterloobae-h1>\n        <div class=\"body\">\t\t\t\n            {{ $slot }}\n            <br>\n        <\/div>\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
View<\/h2>\n\n\n\n
Since we have layout and component to render the page, view page can be simple as below. It is stored as waterloobae.blade.php<\/strong><\/em> under \/resources\/views.<\/p>\n\n\n\n
<x-waterloobae-layout title=\"Hello There!\">\n    <div class=\"py-12 text-4xl text-center\">\n        Welcome to Waterloo BAE!\n    <\/div>\n<\/x-waterloobae-layout><\/code><\/pre>\n\n\n\n
Route<\/h2>\n\n\n\n
The route to this page is added to \/routes\/web.php below. Then it can be accessed as http:\/\/yoursite\/waterloo.bae.<\/p>\n\n\n\n
Route::get('\/waterloobae', function () {\n    return view('waterloobae');\n});\n<\/code><\/pre>\n\n\n\n
Screen will look like<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
It was overly simplified version of how to get orange H1 heading in your Laravel application with Blade Template. Hope It Helps!<\/p>\n","protected":false},"excerpt":{"rendered":"
I am going to use Laravel Blade Templates to render H1 tag in orange. It is overly simplified Laravel Blade Templates guide line. The full documentations are available on https:\/\/laravel.com\/docs\/blade First of all, create any customized resources you need like css, js or image files under \/public directory. I am going to create \/public\/waterloobae.css as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,14],"tags":[],"class_list":["post-759","post","type-post","status-publish","format-standard","hentry","category-it-tips","category-laravel"],"_links":{"self":[{"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/posts\/759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/comments?post=759"}],"version-history":[{"count":6,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/posts\/759\/revisions"}],"predecessor-version":[{"id":784,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/posts\/759\/revisions\/784"}],"wp:attachment":[{"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/media?parent=759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/categories?post=759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/waterloobae.com\/blog\/wp-json\/wp\/v2\/tags?post=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}