Hey there! So, in the previous articles we talked about blades — a handy tool that can help simplify your work when it comes to writing php code within your pages. We covered conditional structures and loops in blades, but in this article we’re going to dive a bit deeper into the rules related to this syntax and how apply it to our own project.
To start off, let’s create a simple navbar in friends.blade so that we can easily connect to other pages:
<ul>
<li>
<a href="/">Home</a>
<a href="/friends">Friends</a>
<a href="/about">About</a>
</li>
</ul>
<h1>My Friends</h1>
<ul>
@foreach ($users as $user)
<li> {{ $user }} </li>
@endforeach
</ul>
It’s pretty simple, but the downside is that we’d have to repeat this piece of code on all our pages if we want the navbar to appear everywhere. Not the most efficient or clean solution, huh?
Now what we need are some layouts. These nifty files allow us to easily manage contents that’s shared between different views.
You can use any library and styles for your HTML page layout, but this layout can’t just use them by themselves. Well, that’s where you can use another helper method called @yield It tells your code where to put your content in specific section in a layout. To make it work, you just need to create a yield with a name like “content” inside the body tag. To that let’s create another blade template file inside layouts/app.blade.php like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Laravel101</title>
</head>
<body>
@yield('content')
</body>
</html>
Now that you know about yield, there’s another keyword you have to use called @extends. It points to the layout you want to use. And there’s @section too, which points to the specific yield name you want to fill with your code. In this case, it’s “content”. Let’s try it out by rewriting our about page:
@extends('layouts.app')
@section('content')
<h1>About Us</h1>
<p>Welcome to the Laravel101 totorial</p>
@endsection
Just a heads up, you have the ability to split the template into smaller parts using “yield” and then set up the code for each section individually. This allows you to make as many sections as you need.
One more thing to keep in mind is that with the yield method, you can set a default value along with the name. let’s include another yield field for the title tag:
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield('title', 'Laravel101')</title>
</head>
<body>
@yield('content')
</body>
</html>
Here the yield of title has a default value, which it mean when you use layout.app in some page and don’t set section title it would be that defaut value. Then our about page can be like this:
@extends('layouts.app')
@section('title', 'About Us')
@section('content')
<h1>About Us</h1>
<p>Welcome to the Laravel101 totorial</p>
@endsection
Now Let’s back to our navigation section and for that I gonna create another blade nav.blade.php as follow:
<ul>
<li>
<a href="/">Home</a>
<a href="/friends">Friends</a>
<a href="/about">About</a>
</li>
</ul>
For include this navigation inside in all our pages just need to use @include methods with path name of the navigation blade which is nav in our layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield('title', 'Laravel101')</title>
</head>
<body>
@include('nav')
@yield('content')
</body>
</html>
Alrighty then! Now we have a layout for our page that we could handle content and title of our pages with section and navbar that’s defined on every single page. Boom!
Time to take things to the next level and add some serious style to our blank pages and make ’em look hella beautiful.
There are many way to stylize our page, One of the most popular and fascinating libraries out there is called Tailwind! Lucky for us, Laravel 10 comes with Vite, which is a super speedy and simple JavaScript builder tool. Let’s use Vite to add Tailwind to our project and make our pages look awesome!
Install Tailwind CSS
First, make sure you have Node.js and NPM (Node Package Manager) installed on your system. If you don’t, you can download them from the official Node.js website.
Next, from your Laravel project directory, run the following command in your terminal:
npm install -D tailwindcss postcss autoprefixer
This will install Tailwind CSS and its dependencies in your Laravel project.
After that, you need to create a new configuration file for Tailwind. You can do this by running the following command:
npx tailwindcss init -p
This will create a new tailwind.config.js file in your project's root directory, which need to be updated like this:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./resources/**/*.blade.php",
theme: {
extend: {},
},
plugins: [],
};
Then add the @tailwind directives for each of tailwind’s layers to your ./resources/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
To complete the process, you need to use Vite to build the styles and add them to the head of your document. Fortunately, there’s a helper function available for this step. So first you need to run npm run dev and then use that like bellow:
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield('title', 'Laravel101')</title>
@vite('resources/css/app.css')
</head>
<body>
@include('nav')
<div>
@yield('content')
</div>
</body>
</html>
I just add some tailwind class into our pages which you can find it in the tutorial repo and here is the result:
Awesome! So, in this article, we’ve gone and learned all about defining templates in Laravel, and even created a sweet layout for our project using Tailwind. But wait, there’s more! In the next article, I’ll be hooking you up with some sweet training on databases and how to configure ’em in Laravel.
Top comments (0)