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
09. Adding blog post tags

Episodes

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

Transcript

00:00
So we're not going to complicate adding tags to our blog posts, we're just
00:04
remember going to put these in the metadata of each of our posts inside of them flat files. This isn't like a relational database where we're going to have a table that contains all of the possible tags that we could have and then attach them with a many-to-many relationship, we just want to go ahead
00:22
and add these. But the magic will come when we can click on them to filter out all blog posts that have that set of tags or one of them tags. So we're going to head over to one of our posts here and the key thing here is how do we actually define out an array within the YAML front matter parser. Well let's go
00:44
ahead and say tags and then we just format this like an array, it just looks exactly the same. And we're going to do this all in lowercase because we'll use some formatting to format these into a title case later. But let's go ahead and just say Laravel and Tailwind for this one and that's it. And then we'll do
01:02
the same thing for this one as well but we will just include one tag in here. So we have two blog posts under the Laravel tag and we have one blog post under the Tailwind tag. Okay great, so let's head over to our index.blade.php file and just dump out this post and just see what this gives us. Does it give us a
01:24
string? Does it give us an array that's going to be really handy to use? Well let's have a look. Okay so let's have a look at our tags and sure enough you can actually see this is now defined this out for us as an array. Perfect, now we can just go ahead and iterate through each of these tags so that's going to be
01:44
really helpful. We're obviously going to add that to our post meta component because that's now a component used between the index and the show page for each of our blog posts. So let's go ahead and output these. So we're going to go ahead and do a foreach here on post tags as tag. Of course end that foreach here
02:04
and then in here it's really up to you. So let's go and create out an unordered list to wrap this like so. And of course we could check the count of this as well so we don't render this unordered list out. So let's go ahead and say if count remember we're working with just an array here not a collection. So we're
02:25
going to say if count post tags and we can end that foreach there. Pull that unordered list in and then for each of these it will of course just be a list item. So in here let's go and create these out as an anchor and this is driving me mad and we'll just output the tag. Let's just see how that looks and
02:46
then we can style it up. Okay so yeah if and end if perfect. Okay undefined variable count let's get this right and there we go great. So we're actually outputting each of the tags on each of these and of course when we click through we have them just here as well. Easy not much work. Let's style these up
03:05
really quickly and then we're good to go. So for the unordered list we are of course going to say not prose. We don't want this to be sort of markdown formatted or anything like that. We'll set a margin on the top of zero. We will set the padding to zero. We'll set the list style to none because we just want
03:22
these to sit next to each other and we'll go ahead and give this an inline flex and we'll use item center. So they should sit next to each other just here. Nice. Okay so for each of the list items let's go and add in a text of small here that should kind of take effect from up here but that's fine and we can just go
03:43
ahead and separate these out so we could have space X of 2 maybe and yeah we'll bump that down to 1. There we go great. Okay so we want this to sit on a different line so let's actually set this as a normal flex and there we go. Great. Okay so we can style these up. Let's I guess also set a margin on the
04:04
top a little bit. Yeah that's fine and we'll get rid of this and yeah I think that's fine. Okay so for each of the anchors here we will just set these to text blue 500 just to differentiate them a bit and we are good to go. Now the only issue we have is because we want these to be all lowercase and all the same so
04:26
we can use them later when we click to fetch out all blog posts that have this specific tag, we want to format these when we output them so they look a little bit better. So we can use Laravel string helper for that. So we can use the title method to change this to title case so it looks a little bit better but
04:47
then when we click through we can still have that lowercase in the slug of the URL and we can use that to look up all blog posts where these tags exist. So there we go. That's how easy it is to add tags but of course we need to do a little bit more work because we want to show all posts under a specific tag.
13 episodes•1 hr 11 mins

Overview

Let's build a ridiculously fast blog from scratch in Laravel, entirely driven by markdown files. No database required!

Your blog will feature everything you're used to, like syntax highlighting, post tagging and pagination. Plus, it'll render in record time.

Once you're done with the course, you'll be able to add on additional features with ease, style it up how you want and quickly create new posts since there's no need for an admin panel.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.