Gatsby MDX V4默认布局失效及自定义模板方案咨询

完全可以通过创建默认模板组件，让MDX文件作为子组件嵌入，解决页眉页脚缺失的问题。以下是具体实现步骤：

1. 封装通用布局组件 #

先把页眉、页脚和通用样式封装成一个布局容器，比如src/components/layout.js：

import React from 'react'
import Header from './header'
import Footer from './footer'
import './layout.css'

export default function Layout({ children }) {
  return (
    <div className="layout-container">
      <Header />
      <main className="content-area">{children}</main>
      <Footer />
    </div>
  )
}

这个组件会作为所有页面的外层容器，children就是要嵌入的MDX内容。

2. 静态页面：手动创建模板包裹MDX #

如果是首页这类固定页面，直接在src/pages下创建对应js文件，比如index.js，导入MDX文件和布局组件：

import React from 'react'
import Layout from '../components/layout'
import HomeContent from './home.mdx'

export default function HomePage() {
  return (
    <Layout>
      <HomeContent />
    </Layout>
  )
}

访问首页时，home.mdx的内容就会被布局组件包裹，自动带上页眉页脚。

3. 动态页面：用Gatsby API批量生成 #

如果有大量MDX页面（比如博客文章），可以用gatsby-node.js的createPages API自动生成带布局的页面：

第一步：配置gatsby-node.js #

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions

  // 查询所有MDX文件
  const mdxFiles = await graphql(`
    query {
      allMdx {
        nodes {
          id
          frontmatter {
            slug # 假设每个MDX的frontmatter里有slug字段作为页面路径
          }
        }
      }
    }
  `)

  // 为每个MDX生成页面
  mdxFiles.data.allMdx.nodes.forEach(node => {
    createPage({
      path: node.frontmatter.slug || '/',
      component: require.resolve('./src/templates/mdx-template.js'),
      context: { id: node.id },
    })
  })
}

第二步：创建通用MDX模板 #

在src/templates/mdx-template.js里，用MDXRenderer渲染MDX内容并包裹布局：

import React from 'react'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import Layout from '../components/layout'

export default function MdxTemplate({ data }) {
  const { mdx } = data
  return (
    <Layout>
      <h1>{mdx.frontmatter.title}</h1>
      <MDXRenderer>{mdx.body}</MDXRenderer>
    </Layout>
  )
}

// 查询MDX内容的GraphQL语句
export const query = graphql`
  query($id: String!) {
    mdx(id: { eq: $id }) {
      body
      frontmatter {
        title
      }
    }
  }
`

4. 确认gatsby-plugin-mdx配置 #

升级后记得移除gatsby-config.js里gatsby-plugin-mdx的defaultLayout配置，保持基础配置即可：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        // 其他必要配置，比如remark插件等
      },
    },
  ],
}

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