访问当前页面的前沿信息-- Gatsby/React

Question

是否可以通过默认布局访问当前页的前端。

使用graphql，是否有根据页面的url筛选查询的选项？

.MDX锋前物

---
Title: 'About Us'
---

gatsby-config.js

{
    resolve: 'gatsby-plugin-mdx',
    options: {
        defaultLayouts: {
            pages: require.resolve('./src/layouts/default.js'),
        },
    },
}

default.js

<>
    <header>?? Insert MDX Title ??</header>
    <main></main>
    <footer></footer>
</>

Answer 1

即使您使用默认MDX模板从./src/pages/自动生成页面，仍然需要将以下内容添加到gatsby-config.js中的plugins部分

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages/`,
  }
}

现在，您可以使用pageContext.frontmatter访问前端，如文档中提到的那样：

import React from 'react'
import Layout from './layout'

export default ({ children, pageContext }) => {

  return (
    <Layout>
      <h1>{pageContext.frontmatter.title}</h1>
      <article>{children}</article>
    </Layout>
  )
}

Answer 2

是的有。一种方法是运行gatsby develop并对被运行的GraphiQL实例运行查询。我的.mdx文件中有标题，它可以通过allMdx和mdx模式获得。Gatsby文档这里解释了如何使用查询设置组件。

{
  allMdx {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
  mdx {
    frontmatter {
      title
    }
  }
}

Answer 3

MDX前端将与children一起自动传递到父上下文中。

{props.pageContext.frontmatter.Title}