Single page template from multiple markdown files

user_2455857 0
Viewed 623

How can I construct a template in Gatsby that can pull content from multiple markdown files.

The use case is a webpage that contains multiple content sections where each section's content will exist in its own markdown file.

Mainly, I'm looking for a link to a tutorial.

For example:

Say I have content in the following three files; hero.md, feature-one.md, and feature-two.md

I want to plug the content from those three markdown files into my homepage as follows.

home.js template pseudo code

<div>{{ hero content }}</div>
<h2>Features</h2>
<card>{{feature-one content}}</card>
<card>{{feature-two content}}</card>
gatsby
1 Answers

Here is a link to the tutorial on the Gatsby Docs - Adding Markdown Pages

Basically, you use the plugin gatsby-source-filesystem to give path to the *.md files. Then use graphQL query in a template to get data.

import React from "react"
import { graphql } from "gatsby"

import Hero...

const MarkdownTemplate = ({ data }) => {
  const { markdownRemark } = data.markdownRemark
  const { frontmatter, heroContent } = markdownRemark
  return (
    <React.Fragment>
      <Hero heroContent={heroContent} /> 
      <div>
        <h1>{frontmatter.featureOne}</h1>
        <h2>{frontmatter.featureTwo}</h2>
      </div>
    </React.Fragment>
  );
};

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      heroContent
      frontmatter {
        featureOne
        featureOne
        path
      }
    }
  }
`;
export default MarkdownTemplate;
user_84505820
Related