如何以最简洁方式从主布局访问静态页面的Gatsby Frontmatter标题？

嘿，这个问题其实挺常见的，有两种简单直接的实现方式，适配不同的使用场景：

方式一：页面组件直接传递（适合手动导入布局的场景） #

如果你的页面是手动导入布局组件并包裹内容的，直接把当前页面的Frontmatter作为props传给布局就好，这是最直观的方式：

1. 在你的页面组件（比如src/pages/about.js）里，从pageContext中取出Frontmatter的title：

import Layout from '../components/layout'

// 页面的GraphQL查询（如果有的话）
export const pageQuery = graphql`
  query AboutPageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default function About({ pageContext }) {
  // 取出Frontmatter的title，加个默认值避免空值
  const pageTitle = pageContext.frontmatter?.title || "默认标题"
  return <Layout pageTitle={pageTitle}>
    {/* 这里放你的页面内容 */}
    <h2>关于我们</h2>
    <p>这是关于页面的内容</p>
  </Layout>
}

2. 在主布局组件（比如src/components/layout.js）里接收这个pageTitle并使用：

export default function Layout({ pageTitle, children }) {
  return (
    <div className="layout-container">
      <header>
        {/* 直接使用传递过来的页面title */}
        <h1>{pageTitle}</h1>
      </header>
      <main>{children}</main>
    </div>
  )
}

方式二：全局布局包裹（适合所有页面自动应用布局的场景） #

如果想让所有页面自动套用布局，不用每个页面都手动传props，可以用Gatsby的wrapPageElement API，一次性配置全局生效：

1. 在gatsby-browser.js和gatsby-ssr.js中添加以下代码（两个文件都要加，确保客户端和服务端渲染一致）：

import Layout from './src/components/layout'

export const wrapPageElement = ({ element, props }) => {
  // 从props的pageContext中取出Frontmatter的title
  const pageTitle = props.pageContext.frontmatter?.title || "默认标题"
  // 把title和其他props传给布局，再包裹页面元素
  return <Layout pageTitle={pageTitle} {...props}>{element}</Layout>
}

2. 布局组件的写法和方式一一样，直接接收pageTitle即可：

export default function Layout({ pageTitle, children }) {
  return (
    <div className="layout-container">
      <header>
        <h1>{pageTitle}</h1>
      </header>
      <main>{children}</main>
    </div>
  )
}

关键提示 #

• 不管哪种方式，页面的Frontmatter都会自动注入到pageContext中（只要你用了Gatsby的文件系统路由或者markdown/mdx转换器），所以直接从pageContext.frontmatter里取就行。
• 记得加个默认值（比如|| "默认标题"），避免某些页面没设置title时出现空白。

内容的提问来源于stack exchange，提问作者cseelus