Using Blade Components for Page Titles: Using Blade Components for Page Titles

00:04

layouts in your application, rather than use the traditional blade extends directive when you're creating layouts. So we're specifically going to be focusing on page titles

00:15

here, but this can be used to take things a little bit further if you want to create slots for, say, a sidebar of your application. There's loads you can do here, but we're just

00:25

going to touch on this just to get you started. Now, I've already set up a fresh Laravel application here. I've cleared out this welcome view just here. And so far, over in our routes, we just

00:36

have the single route here. So what we're going to do is just start by defining out a kind of layout that we want to see. So that would just be the standard document layout.

00:46

And of course, the main content would go in the body. The only issue with layouts is you'll need to, from page to page, change over the title of the document.

00:55

Let's just see what this looks like with standard blade layouts first of all. Then we'll switch things over to use components. So what I would do is, rather than duplicate

01:04

this entire document structure over to another view if I'd created it, inside of views, I'd probably have a layouts directory. And we'd probably have something like app.blade.php.

01:14

So we would, inside of here, yield in any content that we wanted to use that shared between different views. And then in here, we would use the extends directive. And we would choose that layouts.app template.

01:29

And then we could go ahead and define out a section here. So that would be the content section that we're yielding inside of there. End that section.

01:37

And then, of course, this would be the home page. Just before we go on, let's define out another route really quickly. So let's create out a posts or subjects view.

01:47

And let's put this and just call this subjects. So let's go ahead and create out a new view in the root directory called subjects. And let's go ahead and pretty much just copy

01:57

what we have over here, but change this over to subjects. So the whole point here of this layout is just not to duplicate this entire structure. So let's head over to the browser

02:07

and just give that a refresh. And if we just view the page source here, you can see sure enough that's been popped in there. And the same with the subjects page as well.

02:15

So let's view the page source of that. And we get exactly the same thing. Now traditionally, what we would do to set the page title here dynamically is probably have like a overall base title.

02:26

So that would be reflected, of course, on every single page. So let's just go back to the home here. So that works for both of them, of course. But now we need to get in a dynamic title in here

02:36

based on which page we're on. So for example, over in subjects, what we could actually do is define out a section in here called title.

02:44

And we don't actually need to end this section. We can actually, as a second parameter, pass in the value of this section, which worked really well for things like page titles.

02:53

So in this case, the title would be subjects. And then over in the base template, we could go ahead and yield this in here. So let's go ahead and say yield title.

03:04

And let's just add a little dash in there. So let's go over and give that a refresh. And sure enough, on the home page, we get nothing. But on here, we get subjects.

03:12

So that's one way that you can do it. The only issue with this is trying to work out the value of yield is a little bit more messy than if you're working with a variable.

03:23

And also, if we look at the subjects page here, we've got this section in here. We've got this section defined here. And then we've got the overall extent here.

03:30

And this is a little bit more to type out than if we were using blade components. So what I'm going to do is get rid of this and get rid of the home page.

03:39

And I'm going to take this and instead create out a blade component for our overall layout. So I'm going to delete this layouts folder here, because we don't actually need that.

03:48

And let's hop over to the command line and create out a component for this. So let's say phpArtisan make component. And let's call this app layout.

03:57

You can, of course, call that anything you like. Now, this would have created two files if you're new to components. The first one would be in the view directory

04:04

just here under the components directory. That creates a class here, which tells the component what it needs to render. And the second of all, we have the components directory

04:14

within views now with this blade file. So it's pretty much just a blade file alongside of a class, but this works slightly differently. So now that we've got this app layout,

04:23

we can pop this in here. But we don't really want to use things like yield here now. So I'm going to get rid of both of them and kind of start from scratch.

04:30

So what we're going to do is inside of here instead, take the slotted content. And this is the unnamed slotted content. The way that we use this is, for example, over in welcome,

04:42

we use X, almost like an HTML attribute, app layout. So we use kebab case here for this. So use hyphens in between each thing. Then down here, we end the app layout.

04:53

Now, anything can go in there. I'm sure you'll agree that that's a lot cleaner than using the default layout functionality within blade. So we've just got almost like a HTML element in here

05:04

to get that working. Let's go over to subjects and do the same thing. So I'm just going to pop subjects inside of there. And let's just come over and see what that looks like.

05:12

So you can see, we don't have much changed. This pretty much works in exactly the same way here for both of our pages. Now, of course, at this point, we

05:19

know before what we did for page titles was we yielded, or in fact, we defined a section out for the title. But what we can actually do now is pass kind of prop-like things through to these components.

05:32

So instead of doing that, I can just do the following. And that's reduce that previous template that we looked at, or template definition, down to just a few lines.

05:42

So all of your content would go inside of there. And remember, this content here, inside of the overall element, is being placed into here via this slot variable. So how do we get this title then?

05:54

How do we get that and then use that within here? Let's just try this out really quickly and just say title, just to see what we get. Do exactly the same way.

06:03

Now, you can see here we get an undefined variable title. Because we're working with a component now, what we need to do is accept this into the constructor of here and set it as a public property

06:14

so it's available within the blade template here as part of this component. So all we need to do is accept a title in, which by default, I'm going to set to null.

06:24

And then go ahead and set that to a property. Let's do that now. And we're going to make this public, of course, so it's accessible directly outside of the class.

06:33

And that's pretty much it. So if we head over and give that a refresh, sure enough, now we have subject here. And we have nothing for the home page

06:39

because when we define that out inside of welcome, we didn't add a title. Now, you might just want to fall back to just the plain part of this if you don't have a title defined.

06:49

And that's a little bit easier now because we can use the is set directive to check if that title is set. And that's the reason I set it over here to null

06:58

because is set on a null will return false. So now we're saying, well, if that title is set, output the title and this hyphen. And then we can end the is set check just inside of here.

07:10

So let's go over and just give that a refresh. And sure enough, that goes from there. But it remains for the subject. And this works really nicely for our other routes

07:19

as well because, for example, if we had a subject just here that's being passed in, maybe using root model binding, we can then take the value of that, pass it down to the view, and then use that inside of our title.

07:33

So if you had a particular subject you were viewing. Let's just test this out really quickly by creating out a kind of fake object in here. So let's cast an array to an object.

07:41

And let's set the slug here to the subject we pass in. And let's set the title here just to Laravel, just to make that easier. And of course, this would be the actual subject model

07:53

you get back from the database. So you would actually pass that down instead. So let's go ahead and pass down the subject into that view, like so.

08:02

And then over on a specific subject page, let's just change this over to subject and go ahead and create out a new file in here. So let's just call that subject.blade.php.

08:14

We could go ahead and take that value and pop it directly into here. Now, we can do that in one of two ways. We can either bind this in using the colon.

08:25

So we could say subject title, like so. And if we come over to a new tab, subject slash Laravel, for example, you can see we get that in there.

08:36

Or if you wanted to add additional information in here as well, you could go ahead and get rid of the colon. And you could say x courses, for example. And you could replace that out with the blade syntax

08:49

to actually output a variable. So you end up with the following. So this is a really good starting point for templating. It keeps things nice and clean within your blade templates.

08:59

Let's just look at a really quick example of using this if we maybe wanted to render some sidebar content or additional content, just in case you're new to blade components.

09:08

So let's say that on the overall layout, we had a piece of information in here which was going to be some kind of sidebar. Over in any of our templates now,

09:17

what we can do is within here, so we're kind of adding in the default slot in here. But what we can also do is say x slot name, end that, and then just define out what we want to see in the sidebar.

09:30

So I'm going to say sidebar content. So let's go over to the subjects page here. And you can see we get that sidebar content. And if we view the page source, you

09:38

can see that's been put inside of that div. So you can just build up your templates exactly how you need using this method. Now, of course, on the other pages

09:48

now, we have an undefined sidebar variable because we're not actually defining the slot out in here. To get around this, we can just do a really quick is set check, so exactly like we did for the page title.

09:58

So we're just going to say is set sidebar, end is set, and we'll only render that sidebar content out if it's been defined like we did here. So even if you don't really utilize blade components,

10:09

just having a really quick and easy way within layouts to set the title, and more importantly, a nice and clean way to set the title, I think makes a lot of sense.

Episodes

Transcript

Episode summary

Episode discussion