Шаблон одной страницы из нескольких файлов уценки

Question

Как создать в Gatsby шаблон, который может извлекать содержимое из нескольких файлов уценки.

Вариант использования - это веб-страница, содержащая несколько разделов содержимого, где содержимое каждого раздела будет существовать в своем собственном файле уценки.

В основном я ищу ссылку на учебник.

Например:

Скажите, что у меня есть содержимое в следующих трех файлах;hero.md, feature-one.md и feature-two.md

Я хочу подключить содержимое этих трех файлов уценки к моей домашней странице следующим образом.

home.js template pseudoкод

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

Answer 1

Вот ссылка на учебник по Документам Гэтсби - Добавление страниц уценки

По сути, вы используете плагин gatsby-source-filesystem для предоставления path файлам *.md. Затем используйте graphQL запрос в шаблоне для get данных.

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;