We are adding support for Nextjs. Get in touch on Twitter to learn more.

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.

Add header and footer

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.