Creating Tag Taxonomy0:00
Next, let's hook up these tags here in the site. We have them on the single entry view, and then they're also on the index view here in the card. All right, for this we're going to use a feature called taxonomies. We'll head to our control panel, go to the taxonomies section, and create a new taxonomy, and we'll call it tags. Once we've done that, we can configure the taxonomy and choose which collection that taxonomy is applied to. This creates a one-to-one relationship between the collection and the taxonomy. This lets you reuse taxonomies across multiple collections, so you can aggregate them and
because it's been created, it's going to suggest it. And this last one, we'll make another new one, call it team. Now if we go back to the taxonomies section, go to our tags, you can see the tags that have been set. Another cool thing about taxonomies is that they actually have their own blueprints. So if you want to, you can add additional fields that will be stored on that taxonomy. Maybe like an image or a description for those taxonomy views on the front end of your site. All right, so now let's hook this up. Let's jump into our code. We'll go to the news index template.
Rendering Tag Links1:33
Let's jump into our code. We'll go to the news/index template. And while we're here, let's hook up that URL. All right, here is the tag. So since you can pick more than one tag, we're going to loop through them and render them here. We'll link to the URL, we'll use the title of the tag. And if we save and refresh, that's all there is to it. Next, let's do the same thing for the show template. Same thing here.
Setting Up Tag Views2:05
Next, let's do the same thing for the show template. Same thing here. And now you can see the URLs are automatically routed. We have news/tags/technology. That's great. But what happens when you click on this? Yeah, it's a 404 because we haven't done anything yet. So let's set up those views. Come back to our code editor, and we're going to create a tags subdirectory inside that news folder.
Come back to our code editor, and we're going to create a tags subdirectory inside that news folder. This allows us to create templates specifically for the news section. If you want to create templates for the entire site, you can make a tags directory in the top level, and it'll be shared across all of the collections that use that taxonomy. Inside here, we're going to have a index.antlers.html. And then we're going to duplicate that and make a show. Now the show is going to be simpler to do. So we'll do that first. We're going to copy the news index page, paste it here.
Building Tag Show Template3:09
So we'll do that first. We're going to copy the news index page, paste it here. And at the top where this says title, we're going to add articles tagged title. Okay, next, if we just replace this collection tag with simply an entries loop, see what happens. Articles tagged technology. Maybe something a little bit simpler, it would be articles tagged, and we'll just keep it really simple. Something like that. Great.
Building Tag Index Template4:01
Something like that. Great. And now finally, for the index page, we'll grab the same template, paste it in here. We're not actually looping through all of the entries, we just want to list out all of the tags. So we're going to replace this, maybe we'll put this back. And then instead of all of this grid stuff, let's just loop through the tags. Let's see how close we got. So if we just go to news/tags, technology team, there we go, let's actually make a little wrapper here.
So if we just go to news/tags, technology team, there we go, let's actually make a little wrapper here. We only have two tags, and there they are. That's really all there is to it.
