Question

如何在Gatsby中构建一个模板，该模板可以从多个markdown文件中提取内容。

用例是一个包含多个内容部分的网页，其中每个部分的内容将存在于其自己的markdown文件中。

主要是我在寻找教程的链接。

例如：

说我在以下三个文件中有内容； hero.md，feature-one.md和feature-two.md

我想按如下方式将这三个降价文件中的内容插入到我的主页中。

home.js模板伪代码

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

Answer 1

这是Gatsby Docs上的教程的链接-Adding Markdown Pages

基本上，您可以使用插件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;

来自多个markdown文件的单页模板

1 个答案: