Theme Options
Define options for layout and UI per-collection
1 minute read
Theme Options
Overview
The theme's options are defined in the plugin options just as with any other gatsby plugin.
In your gatsby-config.js file, add an options object to gatsby-theme-golden-condor.
gatsby-config.js
{
resolve: `gatsby-theme-golden-condor`,
options: {
// ...
}
}
gatsby-config.js
{
resolve: `gatsby-theme-golden-condor`,
options: {
// ...
}
}
Example
Here is the configuration for this site's doc collection type, resulting in the layout you see now.
gatsby-config.js
{
resolve: `gatsby-theme-golden-condor`,
options: {
collections: {
doc: {
showTOC: true,
containerVariant: "container",
sidebarNav: {
heading: "Documentation"
}
}
}
}
}gatsby-config.js
{
resolve: `gatsby-theme-golden-condor`,
options: {
collections: {
doc: {
showTOC: true,
containerVariant: "container",
sidebarNav: {
heading: "Documentation"
}
}
}
}
}Options table
| Option | Type | Description | Default |
|---|---|---|---|
hideOnHomePage | bool | Don't query this collection in home page recent posts section. | false (pages: true) |
disableIndexPage | bool | Redirects the /[collectionName] index page to /. | false (pages: true) |
showRelatedPosts | bool | Shows a grid of recent posts under posts in this collection. | true (pages: false) |
meta | bool | Show author, date, time to read, tags metadata on posts in this collection. Further configurable as an object. | true (pages: false) |
meta.author | bool | Set to false to hide author on posts in this collection. | true (pages: false) |
meta.timeToRead | bool | Set to false to hide time to read on posts in this collection. | true (pages: false) |
meta.date | bool | Set to false to hide date on posts in this collection. | true (pages: false) |
meta.tags | bool | Set to false to hide tags on posts in this collection. | true (pages: false) |
showBreadcrumbs | bool | Show breadcrumbs on posts in this collection. | true (pages: false) |
showTOC | bool | Shows Table Of Contents (h2 as parents + h3 as children). | false |
containerVariant | string | Width variant (theme.layout.[variant]) for container for posts in this collection. | post (pages: container) |
sidebarNav | object | Show left sidebar page navigation (via frontmatter.parent = id / frontmatter.id relationships you define.). | undefined |
sidebarNav.heading | string | sidebarNav Heading text. | undefined |
sidebarNav.width | number or string | pixel width of sidebar. | 280 |
Options JSON
Hint: collectionName comes from the sourceInstanceName which is defined by gatsby-source-filesystem's options.name.
By default page and post collections are set up, but you can add your own.
{
collections: {
[collectionName]: {
// hide this collection from 'recent posts' grid on home page
hideOnHomePage: false
// disable the /[collectionName]s index page
disableIndexPage: false
// shows a grid of recent posts under posts in this collection
showRelatedPosts: true
// show author/date metadata on posts in this collection
meta: true
// show breadcrumbs on posts in this collection
showBreadcrumbs: true
// shows Table Of Contents (h2 as parents + h3 as children)
showTOC: true
// width variant for container for posts in this collection.
containerVariant: "post",
// left sidebar page navigation (via frontmatter.parent = id / frontmatter.id relationships you define.)
sidebarNav: {
// sidebarNav Heading text
heading: "Pages",
// pixel width of sidebar (default: 280)
width: 320
},
},
},
}{
collections: {
[collectionName]: {
// hide this collection from 'recent posts' grid on home page
hideOnHomePage: false
// disable the /[collectionName]s index page
disableIndexPage: false
// shows a grid of recent posts under posts in this collection
showRelatedPosts: true
// show author/date metadata on posts in this collection
meta: true
// show breadcrumbs on posts in this collection
showBreadcrumbs: true
// shows Table Of Contents (h2 as parents + h3 as children)
showTOC: true
// width variant for container for posts in this collection.
containerVariant: "post",
// left sidebar page navigation (via frontmatter.parent = id / frontmatter.id relationships you define.)
sidebarNav: {
// sidebarNav Heading text
heading: "Pages",
// pixel width of sidebar (default: 280)
width: 320
},
},
},
}