Alt Text Welcome to part-11 of the series. We will first add one thing in TagList.js file, which we missed in the previous section. We will be adding kebabCase from lodash, which is useful to create slug paths. It changes something like the web dev to the-web-dev.

TagList.jsTagList.js

Next, let’s create a file tags-template.js inside the templates folder. We are just putting a basic content here first.

tags-template.jstags-template.js

Then we have to update gatsby-node.js which will generate the pages dynamically. We are first importing lodash and also getting back the tags from our graphql query.

gatsby-node.jsgatsby-node.js

After that we are again first getting all the unique tags and then passing it to createPage function. Here, we are writing the component which is tags-template.js

tagstags

After that if we go to any non-existent page, we can get the newly created tags pages.

Non existentNon existent

On clicking on anyone of them, we can see the basic content of our tags-template.js file.

Basic contentBasic content

Let’s now create the query needed to display, the pages with specific tags. Here, we are using filter option to get all blogs with react tag.

filterfilter

Now, we will add the query in the tags-template.js file.

queryquery

Next, let’s use these to display the page. It will be shown whenever user clicks on some tag on the home page.

DisplayDisplay

Let’ also add some styles in a newly created tagsTemplate.module.css in css folder.

stylesstyles

Now, when you click on any tag in the home page, it will show below.

tagstags

Next, let’s also change the PostCard component, to show the tags. Do, the below changes in PostCard.js

PostCard.jsPostCard.js

Also, do the following changes in postcard.module.css

postcard.module.csspostcard.module.css

This will show tags in our home page also.

tags in homepagetags in homepage

The tags are simple spans, so i thought to change them to links. So, that on click you can go directly to the tag page. Make the following changes in PostCard.js file.

PostCard.jsPostCard.js

Next, let’s add some new styles for it in postcard.module.css

postcard.module.csspostcard.module.css

Now, we will also add tags in each post page. First let’s add tags in the query in post-template.js file.

post-template.jspost-template.js

Next, let’s make the following changes in post-template.js to show the tags.

post-template.jspost-template.js

Now, let’s add and update some styles in postTemplate.module.css

postTemplate.module.csspostTemplate.module.css

It will show these beautiful tags in each posts.

Each postsEach posts

This completes part-11 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.