在React MDX Markdown文件中引用前置内容。

Question

我已经用mdx设置好了一个使用next.js的markdown博客：https://mdxjs.com/。

我希望能够在mdx文件中引用frontmatter部分的数据。类似于这样的：

// my-file.mdx
---
title: "My blog post title"

# {title} // should be replaced by the frontmatter title

现在，这并不起作用。它没有使用正文中找到的标题（即My blog post title）替换{title}。我想知道是否有一种方法可以做到这一点，如果有，应该怎么做？

谢谢。

- Moshe

---

你也曾经想过这个问题吗？@Moshe，你找到答案了吗？ - deadbyte

Answer 1

请查看Docusaurus文档页面上的可用导出项。对于您的示例，title可以作为<p>{contentTitle}</p>使用。对于更具体的键，您可以使用类似以下内容的内容：

<p>{Object.entries(frontMatter).find(frontmatter => frontmatter[0] === 'description')}</p>

在此示例中检索描述。（将html <p>标签替换为适当的标签。）

- s-santillan

---

你链接的页面说frontMatter是全局可用的。因此，要使用数据，实际上要容易得多。 <p>{frontMatter.<property>}</p> - Anders Swanson

Answer 2

我正在使用Next.js 13的MDX，并花了太多时间寻找一种复杂的解决方案来访问MDX中的frontmatter，比如使用remark-mdx-frontmatter，就像https://mdxjs.com/guides/frontmatter/中所述。但是，如果你在Next 13中使用gray-matter来处理frontmatter，那么frontmatter对象将默认暴露给MDX的markdown正文。所以，如果你的MDX有这样的frontmatter：

---
date: 'September 9, 2023'
---

你可以通过MDX主体访问它：

{frontmatter.date}

- VanAlbert