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

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 blogAdd an author

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github