GatsbyJS Series — Create blog details pages dynamically (Part 5)
At the moment, we have done many features for our blog. However, we still can’t view one post details. We’ll complete this feature in this part together. Let’s start!
Based on our data from contentful, Gatsby support to create nodes (we can see them as blog details pages right now for easier understand) so that we can visit node’s details. Otherwise, whenever you click on any post, 404 page will be shown like this:
Creating slugs for pages
Create new page has 2 steps:
- Generate
slug(or path) for the page. - Create the page.
First, create gatsby-node.js file at root folder with the following content:
Note that in order to create a page successfully, we need data (query from graphql) and a template page. In this example it is src/templates/blog-post.tsx Another thing to notice here is that we create slug and inject into context of page. So that we can use it as one page’s property later.
...
context: {
slug: post.node.slug,
}
...gatsby-transformer-remark
For the body of a blog, we need one plugin support for markdown syntax. gasby-transformere-remark here to help:
yarn add gatsby-transformer-remarkAdd one more configuration to gatsby-config.js
Moreover, gasby-transformere-remark is able to help to format code or handle image responsive by combining with other plugins such as: gatsby-remark-images, gatsby-remark-prismjs, gatsby-remark-smartypants, etc.
Let’s install and configure them together:
yarn add gatsby-remark-prismjs gatsby-remark-images gatsby-remark-smartypants prismjs
Formatting code
In order to format code style, we need to add prismjs css to gatsby-browser.js file first:
Blog post template
Restart Gatsby server and take a look at our result:
Really cool, right? However, if you intend to the blog title on the browser tab, you’ll see that the name is not so good.
We’ll improve this one in next part and also adding some basic SEO component. See you there.
