thewebdev (24 Part Series)
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.
Next, let’s create a file tags-template.js inside the templates folder. We are just putting a basic content here first.
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.
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
After that if we go to any non-existent page, we can get the newly created tags pages.
On clicking on anyone of them, we can see the basic content of our tags-template.js file.
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.
Now, we will add the query in the tags-template.js file.
Next, let’s use these to display the page. It will be shown whenever user clicks on some tag on the home page.
Let’ also add some styles in a newly created tagsTemplate.module.css in css folder.
Now, when you click on any tag in the home page, it will show below.
Next, let’s also change the PostCard component, to show the tags. Do, the below changes in PostCard.js
Also, do the following changes in postcard.module.css
This will show tags in our home page also.
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.
Next, let’s add some new styles for it in postcard.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.
Next, let’s make the following changes in post-template.js to show the tags.
Now, let’s add and update some styles in postTemplate.module.css
It will show these beautiful tags in each posts.
This completes part-11 of the series.
You can find the code for the same in this github repo.
Level up every day