MDX(v3.0.0-alpha.11)

Eleventy 简称	文件扩展名	npm 包
`mdx`	`.mdx`	`@mdx-js/mdx`

相关语言：Markdown、JSX、Custom
虽然 Markdown 文件作为 Liquid 进行预处理，但 MDX 文件不会被任何其他模板语法预处理。

MDX 需要 ESM。这意味着您的项目 package.json 必须包含 "type": "module" 或您的配置文件必须使用 .mjs 文件扩展名，例如 eleventy.config.mjs。

配置

以下配置将读取 *.mdx 文件，完全兼容前置内容（在 .mdx 文件中！）！GitHub #3760。

eleventy.config.js

import {pathToFileURL} from "node:url";
import {evaluate} from "@mdx-js/mdx";
import {renderToStaticMarkup} from "react-dom/server";
import * as runtime from "react/jsx-runtime";

export default function(eleventyConfig) {
eleventyConfig.addExtension("mdx", {
compile: async (str, inputPath) => {
const { default: mdxContent } = await evaluate(str, {
...runtime,
baseUrl: pathToFileURL(inputPath)
});

    		return async function(data) {
    			let res = await mdxContent(data);
    			return renderToStaticMarkup(res);
    		}
    	}
    });

};

现在运行 Eleventy 并告诉它处理 mdx 文件：

npx @11ty/eleventy --formats=mdx

或者，您可以将 eleventyConfig.addTemplateFormats("mdx") 添加到您的配置文件中。

示例

sample.mdx

## key: World

export function Exclaim(props) {
return <>{props.target}!!!</>
}

# Hello from <Exclaim target={props.key} />

以上内容被渲染为 <h1>Hello, World!!!</h1>。

更多信息请阅读什么是 MDX？文档。

替代配置：使用 MDX 加载器

MDX 还提供了一个 Node.js 加载器（npm 上的 @mdx-js/node-loader）。这种方法可能稍微快一些，但不会包含对 .mdx 文件中前置内容的支持。

eleventy.config.js

import {register} from 'node:module';
import {renderToStaticMarkup} from 'react-dom/server'

register('@mdx-js/node-loader', import.meta.url);

export default function(eleventyConfig) {
eleventyConfig.addExtension("mdx", {
key: "11ty.js",
compile: () => {
return async function(data) {
let content = await this.defaultRenderer(data);
return renderToStaticMarkup(content);
};
}
});
};

社区贡献

eleventy-plugin-mdx