This lesson walks through how to update and query frontmatter data for Gatsby blog posts in order to display featured articles separately from recent articles.

Display Featured Articles through Frontmatter Properties on a Gatsby Blog

Monica Powell: [0:00] Let's first go into one of our post and add featured to the frontmatter at the top of the post. Now, within our index page where we were listing the latest post, let's update the page query so that the query is also querying for the featured attribute.

[0:23] Now, we have a mapping that is going through all of the latest post. We want to update this so that this is filtering out the articles that have been labeled as featured. In order to do that, we are looking at the frontmatter value for each post, and if that is not true, then we are returning that in the items that we're mapping.

[0:54] We'll copy over this code because the codes here show the featured post will be very similar. We'll rename the title, and instead of posts that aren't labeled as featured, we'll want posts that are labeled as featured. Now, if you go back to the site, you'll see that we're showing both the latest post and the featured post.

Display Featured Articles through Frontmatter Properties on a Gatsby Blog

Share this video with your friends

This lesson is a Community Resource