title | layout |
---|---|
About |
page |
Example of how to set a separate template for markdown post and pages in Gatsby.
const path = require(`path`) | |
const { createFilePath } = require(`gatsby-source-filesystem`) | |
exports.createPages = ({ graphql, actions }) => { | |
const { createPage } = actions | |
return graphql( | |
` | |
{ | |
allMarkdownRemark( | |
sort: { fields: [frontmatter___date], order: DESC } | |
limit: 1000 | |
) { | |
edges { | |
node { | |
fields { | |
slug | |
} | |
frontmatter { | |
title | |
layout | |
} | |
} | |
} | |
} | |
} | |
` | |
).then(result => { | |
if (result.errors) { | |
throw result.errors | |
} | |
// Create blog posts pages. | |
const posts = result.data.allMarkdownRemark.edges | |
posts.forEach((post, index) => { | |
const previous = index === posts.length - 1 ? null : posts[index + 1].node | |
const next = index === 0 ? null : posts[index - 1].node | |
// Choose the blog or the page template | |
let template = "blog-post" | |
if (post.node.frontmatter.layout !== null) { | |
template = post.node.frontmatter.layout | |
} | |
template = path.resolve("./src/templates/" + template + ".js") | |
createPage({ | |
path: post.node.fields.slug, | |
component: template, | |
context: { | |
slug: post.node.fields.slug, | |
previous, | |
next, | |
}, | |
}) | |
}) | |
return null | |
}) | |
} | |
exports.onCreateNode = ({ node, actions, getNode }) => { | |
const { createNodeField } = actions | |
if (node.internal.type === `MarkdownRemark`) { | |
const value = createFilePath({ node, getNode }) | |
createNodeField({ | |
name: `slug`, | |
node, | |
value, | |
}) | |
} | |
} |
import React from 'react' | |
import Link from 'gatsby-link' | |
import get from 'lodash/get' | |
import Helmet from 'react-helmet' | |
import Bio from '../components/Bio' | |
import { rhythm } from '../utils/typography' | |
class BlogIndex extends React.Component { | |
render() { | |
const siteTitle = get(this, 'props.data.site.siteMetadata.title') | |
const posts = get(this, 'props.data.allMarkdownRemark.edges') | |
return ( | |
<div> | |
<Helmet title={siteTitle} /> | |
<Bio /> | |
{posts.map(({ node }) => { | |
const title = get(node, 'frontmatter.title') || node.fields.slug | |
return ( | |
<div key={node.fields.slug}> | |
<h3 | |
style={{ | |
marginBottom: rhythm(1 / 4), | |
}} | |
> | |
<Link style={{ boxShadow: 'none' }} to={node.fields.slug}> | |
{title} | |
</Link> | |
</h3> | |
<small>{node.frontmatter.date}</small> | |
<p dangerouslySetInnerHTML={{ __html: node.excerpt }} /> | |
</div> | |
) | |
})} | |
</div> | |
) | |
} | |
} | |
export default BlogIndex | |
export const pageQuery = graphql` | |
query IndexQuery { | |
site { | |
siteMetadata { | |
title | |
} | |
} | |
allMarkdownRemark( | |
sort: { fields: [frontmatter___date], order: DESC } | |
filter: { | |
id: { regex: "/posts/" } | |
} | |
) { | |
edges { | |
node { | |
excerpt | |
fields { | |
slug | |
} | |
frontmatter { | |
date(formatString: "DD MMMM, YYYY") | |
title | |
} | |
} | |
} | |
} | |
} | |
` |
import React from "react" | |
import { Link, graphql } from "gatsby" | |
import Layout from "../components/layout" | |
import SEO from "../components/seo" | |
import { rhythm, scale } from "../utils/typography" | |
class BlogPostTemplate extends React.Component { | |
render() { | |
const post = this.props.data.markdownRemark | |
const siteTitle = this.props.data.site.siteMetadata.title | |
const { markdownRemark: page } = this.props.data | |
const { previous, next } = this.props.pageContext | |
return ( | |
<Layout | |
location={this.props.location} | |
title={siteTitle} | |
header={post.frontmatter.title} | |
> | |
<SEO | |
title={post.frontmatter.title} | |
description={post.frontmatter.description || post.excerpt} | |
/> | |
<div dangerouslySetInnerHTML={{ __html: post.html }} /> | |
</Layout> | |
) | |
} | |
} | |
export default BlogPostTemplate | |
export const pageQuery = graphql` | |
query PagesBySlug($slug: String!) { | |
site { | |
siteMetadata { | |
title | |
author | |
} | |
} | |
markdownRemark(fields: { slug: { eq: $slug } }) { | |
id | |
excerpt(pruneLength: 160) | |
html | |
frontmatter { | |
title | |
date(formatString: "MMMM DD, YYYY") | |
description | |
} | |
} | |
} | |
` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment