Build A Static File Blog with Laravel
This episode is for members only

Sign up to access "Build A Static File Blog with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
12. Styling pagination links

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
Now that we are paginating it's pretty easy to output pagination links. Let's go ahead and do that for our index. All we do here is we just say posts, which is the collection that we are now paginating, and we just say links. That will dump out the links onto the page for us. But we've got
00:16
a little bit of an issue in the fact that this isn't styled up. Now by default if we just go ahead and inspect these, these are styled out with Tailwind. There is a bootstrap version available and you can check out the Laravel documentation to find out how to switch that over. But since we're using Tailwind we want these styles to be included. Now why aren't they included? Well this
00:38
comes back to when we first set Tailwind up and we told Tailwind where to look for classes. We're telling this to look in all of our blade files. Surely though these should be included since this is in our blade file. Well the classes for this are actually rendered from the Laravel framework. So what we're going to have to do is go ahead and include specifically within our content section
01:03
here the pagination templates. So to do this we're going to go into the vendor directory, we're going to go into Laravel, we're going to go into framework, we're going to go into source, we're going to go into illuminate, and then pagination. So let's spell that correctly. And then under pagination we have a resources directory, then we have views, and then we have
01:27
all of the pagination blade files. So I just found these and built this url up. So of course I've just typed it out here making it look entirely like I know where these are. I just went looking for these and then built the url up. So that's that. So let's just for confidence rerun npm run dev head over and there we go. So now Tailwind is detecting those styles within that framework
01:54
and we can now paginate nicely through each of our pages. So now that's looking good. Just to finish up let's go ahead and add this over into our tags as well. So if we go over to our tag show controller we are obviously not paginating here just here but we can. So we can say paginate one and we're going to change that up in a second but now we can head over to say Tailwind
02:21
and Laravel and we only have one per page. So we can just add the links in there now. So let's head over to show.blade.php and let's add in our links for our posts and we should and let's have a look posts links and we should see our pagination in there for these tags. Now that doesn't quite look right so let's head over to Laravel and yeah the url looks like it's not
02:48
quite being built up properly here. So let's head over and just go over to our app service provider and I'm guessing this is within the options somewhere. So let's I think what we can actually do is set the path specifically here. So let's go ahead and say paginator and then we'll go ahead and return that paginator and in here we should have
03:14
a set path option or a set page name option. So let's use set path and let's just try request url and just see what happens. Okay so we're on the tags page let's go to page two and yeah there we go perfect. So that is now using the correct path and of course for the index that is going to work as well. Brilliant.

Episode summary

In this episode, we tackle styling the pagination links for our posts listing. At first, we simply dump the Laravel pagination links onto the page using $posts->links(), but quickly realize they aren't styled the way we want.

Digging a little deeper, we discover that because the pagination view is rendered inside the Laravel framework (rather than our own Blade files), Tailwind CSS doesn't pick up those classes by default. To fix this, we update our tailwind.config.js to include the pagination views path within the framework, forcing Tailwind to scan and generate the correct styles for pagination.

After revamping our configuration, we restart our build process with npm run dev and, when we reload, the pagination finally looks just right. We repeat the process for our tag detail pages, ensuring pagination there is also working and styled consistently.

Finally, we handle a little bug where pagination URLs for tag pages weren't being built properly. We solve this by customizing the paginator's path in the app service provider, making sure everything works seamlessly. Now, both the index and tag pages have perfectly styled and functioning pagination. Nice job!

Episode discussion

No comments, yet. Be the first!