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

Custom blog page

Customize the blog landing page.

Shadow the posts.js component

Start by creating the src/@reflexjs/gatsby-theme-post/posts.js component.

src/@reflexjs/gatsby-theme-post/posts.js
import * as React from "react"
import { Article, H2, P, Div, Grid } from "@reflexjs/components"
import { Link } from "@reflexjs/gatsby-theme-core"
import { Image } from "@reflexjs/gatsby-plugin-image"
import { PostMeta } from "@reflexjs/gatsby-theme-post"
export const Posts = ({ posts }) => {
return posts.length ? (
<Grid col="1|2" gap="10|14">
{posts &&
posts.map((post, index) => (
<Div key={index} mb="8">
<PostTeaser {...post} />
</Div>
))}
</Grid>
) : null
}
export const PostTeaser = ({
title,
excerpt,
slug,
image,
date,
datetime,
author,
timeToRead,
...props
}) => (
<Article {...props}>
<Grid>
{image && (
<Link href={slug} d="block">
<Image src={image} title={title} alt={title} />
</Link>
)}
{title && (
<Link href={slug}>
<H2 my="4" fontSize="3xl" hoverColor="primary">
{title}
</H2>
</Link>
)}
{excerpt && <P mt="1">{excerpt}</P>}
<PostMeta
author={author}
timeToRead={timeToRead}
date={date}
datetime={datetime}
fontSize="md"
/>
</Grid>
</Article>
)

Make your changes to posts.js and save.

Restart the gatsby develop server to see your changes.

Browse the Blocks library for more posts examples.

To add a header and footer to the blog pages, create the following blocks.

site
└── content
└── blocks
└── posts-header.mdx <-- /posts header
└── posts-footer.mdx <-- /posts footer
└── post-header.mdx <-- post page header
└── post-footer.mdx <-- post page footer
├── images
├── navs
├── pages
└── posts

The blocks are placed on the corresponding pages automatically.

Featured postsRecipes

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github