Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Featured posts

Add a featured posts section to a page.

The @reflexjs/gatsby-theme-post provides a usePost hook to easily retrieve, filter and render posts.

Let's use this hook to get a list of featured posts in a block and use the block on the home page.


Create a block

content/blocks/featured-posts
import { usePost } from "@reflexjs/gatsby-theme-post"
export const FeaturedPosts = () => {
// This will return an array of all featured posts.
const featuredPosts = usePost({ featured: true })
}

Render the posts in a list

content/blocks/featured-posts
import { usePost } from "@reflexjs/gatsby-theme-post"
export const FeaturedPosts = () => {
const featuredPosts = usePost({ featured: true })
return featuredPosts
? featuredPosts.map((post) => <A href={post.slug}>{post.title}</A>)
: null
}

Place block on page

content/pages/about.mdx
---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="featured-posts" />

Make block configurable

Let's add a limit props to the block so that we can set how many featured posts to show.

content/blocks/featured-posts
import { usePost } from "@reflexjs/gatsby-theme-post"
export const FeaturedPosts = ({ limit = 5 }) => {
const featuredPosts = usePost({ featured: true })
return featuredPosts
? featuredPosts
.slice(0, limit)
.map((post) => <A href={post.slug}>{post.title}</A>)
: null
}
content/pages/about.mdx
---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="featured-posts" limit="3" />
Meta tagsCustom blog page

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github