Astro.js：如何让共享MDX页面布局组件识别调用来源文件夹

问题背景 #

• 网站包含foo、bar等部门文件夹，各文件夹内页面使用专属导航菜单
• 根目录有共享MDX页面（如about.mdx），被不同部门页面引入
• 需求：引入共享MDX的部门页面（如foo/about.astro）需要把自身所属文件夹信息传递给MDX的布局组件，以渲染对应导航

解决方案 #

方法一：通过MDX的getLayoutProps传递参数 #

保留MDX自身的布局配置，通过MDX内置函数将参数传递给布局。

1. 修改共享about.mdx，添加getLayoutProps函数传递props：

---
title: About page
layout: ~/layouts/MDXPageLayout.astro
---

export function getLayoutProps(props) {
  // 将父组件传来的folder参数传递给布局
  return { ...props, folder: props.folder };
}

We are ACME Industries.

2. 修改布局组件MDXPageLayout.astro，接收并使用folder参数：

---
// 从props中获取folder值，默认值设为root处理根目录调用的情况
const { folder = 'root' } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <header>
      <p>I was called from folder: {folder}</p>
      <!-- 根据folder渲染对应导航菜单 -->
      {folder === 'foo' && <nav><!-- foo专属导航 --></nav>}
      {folder === 'bar' && <nav><!-- bar专属导航 --></nav>}
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>

3. foo/about.astro代码保持不变：

---
import MDXPage from '../about.mdx';
---
<MDXPage folder="foo" />

方法二：直接在部门页面中使用布局组件 #

跳过MDX的布局配置，由部门页面直接控制布局和参数传递，逻辑更直观。

1. 修改共享about.mdx，移除frontmatter中的layout配置：

---
title: About page
---

We are ACME Industries.

2. 修改foo/about.astro，直接引入布局和MDX，传递folder参数给布局：

---
import MDXPage from '../about.mdx';
import MDXPageLayout from '~/layouts/MDXPageLayout.astro';
---
<MDXPageLayout folder="foo">
  <MDXPage />
</MDXPageLayout>

3. 布局组件MDXPageLayout.astro的修改同方法一，接收folder参数并渲染对应导航。

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