Gatsby：如何将数据从 frontmatter（Mdx 文件）插入到组件中

Question

我有一系列包含相同信息但位于不同站点的 .mdx 文件（例如：title="aswan"；title="rome" 等）。这些文件位于名为“元数据”的文件夹中。

我需要将 mdx 信息插入到构成站点主页 (index.js) 的组件 (OurSites.js) 中。

这是OurSites.js组件的内容：

import React from "react";
import styled from "styled-components";
import Card from "react-bootstrap/Card";
import { Container, Row, Col } from "react-bootstrap";
import Button from "react-bootstrap/Button";
import TitleR from "../Title/TitleR";
import Card1 from "../../metadata/1-home-page/images/1-card.jpg";
import Card2 from "../../metadata/1-home-page/images/2-card.jpg";

const Sites = () => {
  return (
    <Wrapper>
      <section className="section bottom-slant-gray">
        <Container>
          <TitleR title="our sites" />
          <Row xs={1} md={2}>
            <Col>
              <Card>
                <Card.Img variant="top" fluid={true} src={Card1} />
                <Card.Body>
                  <Card.Title>First Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/">
                      go to paths repository
                    </a>
                  </Button>
                  <Card.Text>
                    Collection and georeferencing on GIS platform of most of the
                    historical cartography of Egypt and plans of the main
                    temple/church/basilica complexes
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
            <Col>
              <Card>
                <Card.Img variant="top" src={Card2} />
                <Card.Body>
                  <Card.Title>Second Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/svp">
                      go to spv protocol
                    </a>
                  </Button>
                  <Card.Text>
                    Vectorization of geo-referenced plants on GIS platform using
                    a protocol (SPV) developed by PAThs team members
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <Row xs={1} md={2}>
            <Col>
              <Card>
                <Card.Img variant="top" fluid={true} src={Card1} />
                <Card.Body>
                  <Card.Title>First Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/">
                      go to paths repository
                    </a>
                  </Button>
                  <Card.Text>
                    Collection and georeferencing on GIS platform of most of the
                    historical cartography of Egypt and plans of the main
                    temple/church/basilica complexes
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
            <Col>
              <Card>
                <Card.Img variant="top" src={Card2} />
                <Card.Body>
                  <Card.Title>Second Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/svp">
                      go to spv protocol
                    </a>
                  </Button>
                  <Card.Text>
                    Vectorization of geo-referenced plants on GIS platform using
                    a protocol (SPV) developed by PAThs team members
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
          </Row>
          <Row xs={1} md={2}>
            <Col>
              <Card>
                <Card.Img variant="top" fluid={true} src={Card1} />
                <Card.Body>
                  <Card.Title>First Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/">
                      go to paths repository
                    </a>
                  </Button>
                  <Card.Text>
                    Collection and georeferencing on GIS platform of most of the
                    historical cartography of Egypt and plans of the main
                    temple/church/basilica complexes
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
            <Col>
              <Card>
                <Card.Img variant="top" src={Card2} />
                <Card.Body>
                  <Card.Title>Second Step</Card.Title>
                  <Button variant="primary">
                    <a href="https://docs.paths-erc.eu/data/svp">
                      go to spv protocol
                    </a>
                  </Button>
                  <Card.Text>
                    Vectorization of geo-referenced plants on GIS platform using
                    a protocol (SPV) developed by PAThs team members
                  </Card.Text>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </section>
    </Wrapper>
  );
};

const Wrapper = styled.section`
  a {
    color: rgb(130, 36, 51);
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    font-size: 0.8rem;
    line-height: 1rem;
    text-transform: uppercase;
    display: swap;
    text-decoration: none;
  }
  a:hover {
    color: rgb(130, 36, 51);
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    font-size: 0.8rem;
    line-height: 1rem;
    text-transform: uppercase;
    display: swap;
    text-decoration: none;
  }
  button {
    text-align: right;
    margin: 3% 0 3% 0;
    background: rgb(130, 36, 51, 0.2);
    border-color: rgb(130, 36, 51, 0.3);
  }
  button:hover {
    background: none;
    border-color: transparent;
  }
  section {
    padding: 4em 5;
    position: relative;
    z-index: 2;
  }
  .card {
    border: none;
  }
  .card-body {
    text-align: right;
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    line-height: 1.7rem;
    display: swap;
  }
  .card-title {
    font-weight: bolder;
    text-transform: uppercase;
  }
  .container {
    padding-bottom: 5%;
  }
  section {
    padding: 0;
    position: relative;
    z-index: 2;
  }
  .bottom-slant-gray {
    position: relative;
    padding-bottom: 10%;
    background-color: #f8f9fa;
  }
  .bottom-slant-gray:before {
    content: "";
    width: 100%;
    height: 240px;
    background: #f8f9fa;
    z-index: -1;
    top: 0px;
    background-color: #f8f9fa;
    left: 0;
    position: absolute;
    -webkit-transform: skewY(-6deg);
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
  }
  .row {
    padding-top: 3%;
  }
  .sites-img {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    height: 19rem;
    z-index: 1;
  }
  .sites-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, var(--clr-primary-5), #222);
    opacity: 0.85;
    transition: var(--transition);
  }
`;

export default Sites;

有文字的地方，比如CardText，我想插入mdx文件的内容

在 Graphql 上查询数据得到了这样的结果：

export const query = graphql`
  {
    allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
      nodes {
        id
        frontmatter {
          title
          status
          typology
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        excerpt
      }
    }
  }
`;

这是 index.js 页面的内容，其中还包含 OurSite.js 组件：

import * as React from "react";
import Layout from "../components/Layout";
import Slider from "../components/Slider";
import About from "../components/Home/About";
import Methods from "../components/Home/Methods";
import OurSites from "../components/Home/OurSites";
import { graphql } from "gatsby";

// markup
const IndexPage = () => {
  return (
    <Layout>
      <Slider />
      <About />
      <Methods />
      <OurSites />
    </Layout>
  );
};

export const query = graphql`
  {
    allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
      nodes {
        id
        frontmatter {
          title
          status
          typology
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        excerpt
      }
    }
  }
`;

export default IndexPage;

这是组件的样子：

Answer 1

您有两个选择：

使用page queries
使用static queries（useStaticQuery挂钩）

对于第一个选项，您的查询必须在一个页面上进行（因此得名），并且您需要将包含数据的道具向下钻取到每个所需的组件。因为你已经有了查询集，你只需要：

import * as React from "react";
import Layout from "../components/Layout";
import Slider from "../components/Slider";
import About from "../components/Home/About";
import Methods from "../components/Home/Methods";
import OurSites from "../components/Home/OurSites";
import { graphql } from "gatsby";

// markup
const IndexPage = ({ data }) => {
 console.log("your props.data is inside data: " data); 
 return (
    <Layout>
      <Slider />
      <About />
      <Methods />
      <OurSites sites={data.allMdx.nodes}/>
    </Layout>
  );
};

export const query = graphql`
  {
    allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
      nodes {
        id
        frontmatter {
          title
          status
          typology
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        excerpt
      }
    }
  }
`;

export default IndexPage;

您查询的数据（通过 GraphQL）在 props.data 中（解构为 data）。您可以通过 data.allMdx.nodes（这是一个数组）向下钻取站点的信息。因此，在您的 OurSites 组件中，您只需要获取 props (props.sites) 并循环遍历它们以动态显示您的数据。

使用 useStaticQuery 方法完全相同，但数据可以存储在其他地方（在自定义挂钩中或内部 OurSites 组件中）。

Gatsby：如何将数据从 frontmatter（Mdx 文件）插入到组件中

Gatsby: How to insert data from frontmatter (Mdx file) into a component

reactjs

graphql

gatsby

gatsby-plugin-mdx