Skip to navigation

Frontmatter

本指南探讨如何在 MDX 中支持 YAML frontmatter。 MDX 支持标准 Markdown 语法 (CommonMark)。 这意味着默认情况下不支持 frontmatter。

MDX 提供了 Frontmatter 的强大且动态的替代方案,即 ESM (import/export)。 这些导出:

example.mdx
export const name = 'World'
export const title = 'Hi, ' + name + '!'

# {title}

可以像这样使用:

example.js
import * as Post from './example.mdx' // Assumes an integration is used to compile MDX -> JS.

console.log(Post.title) // Prints 'Hi, World!'

不过,你可能更喜欢 frontmatter,因为它允许你定义可以在编译之前从文件系统中提取的数据。 假设我们的 MDX 和 frontmatter 看起来像这样:

example.mdx
---
title: Hi, World!
---

# Hi, World!

然后无需编译或评估元数据就可以像这样访问:

example.js
import {read} from 'to-vfile'
import {matter} from 'vfile-matter'

const file = await read('example.mdx')
matter(file)

console.log(file.data.matter)

我们的编译器 @mdx-js/mdx 默认情况下不理解 YAML frontmatter,但可以通过使用注释插件 remark-frontmatter 来启用它:

example.js
import fs from 'node:fs/promises'
import {compile} from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'

const file = await compile(await fs.readFile('example.mdx'), {
  remarkPlugins: [remarkFrontmatter]
})

console.log(file)

现在是 “works”。 frontmatter 不会像 Markdown 一样渲染。 但嵌入在 frontmatter 中的数据无法从 MDX 内部获得。 如果我们也想要那样怎么办? 就像这样:

example.mdx
---
title: Hi, World!
---

# {title}

这正是 remark 插件 remark-mdx-frontmatter 的作用。

该插件与所有备注插件一样,可以作为 remarkPluginsProcessorOptions 传递。 有关插件的更多信息可在 § 扩展 MDX 中找到

MDX 中文网 - 粤ICP备13048890号