Display Featured Articles through Frontmatter Properties on a Gatsby Blog
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.
There's a faster version of egghead. Click here to try it.
'/%3E%3C/svg%3E)
Create an egghead account to access 5000+ tutorials and resources from expert developers.
Create accountAutoplay
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.
'%3E%3Ccircle cx='44.82' cy='44.82' r='44.82' fill='%23FFF'/%3E%3Cpath fill='%23151515' fill-rule='nonzero' d='M68.013 44.82l-8.91-8.91a2.7 2.7 0 113.834-3.78l10.8 10.8a2.7 2.7 0 010 3.78l-10.8 10.8a2.7 2.7 0 01-3.834-3.78l8.91-8.91zm-46.413 0l8.91 8.91a2.7 2.7 0 01-3.834 3.78l-10.8-10.8a2.7 2.7 0 010-3.78l10.8-10.8a2.7 2.7 0 013.834 3.78l-8.91 8.91zm20.412 22.248a2.7 2.7 0 01-5.238-1.296l10.8-43.2a2.7 2.7 0 115.238 1.296l-10.8 43.2z'/%3E%3C/g%3E%3Cg transform='translate(76)'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23FF2D55'/%3E%3Cpath fill='%23FFF' d='M12 15v-2a5 5 0 1110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H12a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2h-6v-2a3 3 0 116 0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
You must be a Pro Member to view code for this lesson
Access all courses and lessons, track your progress, gain confidence and expertise.