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

Configuration

Configure your blog using theme options.

The @reflexjs/gatsby-theme-post package accepts the following options to make it easy to customize your blog.

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Reflex",
    description: "Starter for Reflex.",
    siteUrl: process.env.SITE_URL || "http://localhost:8000",
  },
  plugins: [
    "@reflexjs/gatsby-theme-base"
    {
      resolve: `@reflexjs/gatsby-theme-post`,
      options: {
        contentPath: "content/posts",
        basePath: "/blog",
        postsPerPage: 4,
        pageQuery: null,
        slugResolver: null,
      }
    }
  ],
}

contentPath

Update the contentPath if you need to place your posts in a different location (defaults to /content/posts).

basePath

The basePath sets the path for the blog landing page, the tags pages and the post pages. All blog pages are prefixed by the basePath.

See slugResolver if you need more flexibility.

postsPerPage

The number of posts to use to paginate blog pages.

pageQuery

The GraphQL query to use to create the /blog page. You can use this option to filter out or customize the posts that are displayed on the page.

Example:

Filter out all posts tagged with Example.

pageQuery: `
  query {
    allPost(sort: {fields: date, order: DESC}, filter: {tags: {elemMatch: {name: {nin: "Example"}}}}) {
      nodes {
        id
        slug
      }
    }
    allPostTag(sort: {fields: name, order: ASC}) {
      nodes {
        id
        name
        slug
      }
    }
  }
`,
},

slugResolver

Use the slugResolver option to have more flexibility on how post slugs are created.

Example:

This will remove the /blog prefix and add a .html suffix to all post slugs.

gatsby-config.js

const { toSlug } = require("@reflexjs/gatsby-helpers") 
module.exports = {
  plugins: [
    `@reflexjs/gatsby-theme-base`,
    {
      resolve: `@reflexjs/gatsby-theme-post`,
      options: {
        slugResolver: (node, parent, basePath) =>
          `${toSlug(node.frontmatter.title)}.html`,
      },
    },
  ],
}

Build a blog Add an author