` 内容提供自定义样式： -```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}" +```astro title="src/components/Blockquote.astro" --- -import { Content, components } from '../content.mdx'; -import Heading from '../Heading.astro'; +const props = Astro.props; --- - -+ + “ +``` +将你的自定义组件导入 `.mdx`文件，然后将标准 HTML 元素映射到自定义组件的 `components` 对象以导出： + +```mdx title="src/blog/posts/post-1.mdx" +import Blockquote from '../components/Blockquote.astro'; +export const components = {blockquote: Blockquote} + +> 这个引用将是自定义引用块组件。 +``` +访问 [MDX 网站](https://mdxjs.com/table-of-components/)，了解可以覆盖为自定义组件的 HTML 元素的完整列表。 + :::note -在 MDX 文件中定义并导出的自定义组件必须通过 `components` 属性导入并传递回 `+ ` 组件。 +在 MDX 文件中定义并导出的自定义组件必须始终先被导入，然后通过 `components` 属性传回给 ` ` 组件。 ::: -#### 将自定义组件分配给 HTML 元素 +#### 将 `components` 传给 MDX 内容 -使用 MDX，你可以将 Markdown 语法映射到自定义组件，而不是它们的标准 HTML 元素。这允许你以标准的 Markdown 语法编写，但是将特殊的组件样式应用于所选的元素。 +在使用 ` ` 组件渲染导入的 MDX 内容时（包括使用内容集合渲染 MDX 条目），可以通过 `components` 属性传入自定义组件。这些组件必须先被导入，才能使 ` ` 组件可用。 -将自定义组件导入 `.mdx`文件，然后将标准 HTML 元素映射到自定义组件的 `components` 对象以导出： +`components` 对象将 HTML 元素名称（`h1`、`h2`、`blockquote` 等）映射到你的自定义组件。你也可以使用扩展运算符（...）[包含从 MDX 文件本身导出的所有组件](#将自定义组件分配给-html-元素)，这些组件也必须作为 `components` 从你的 MDX 文件中导入。 -```mdx title="src/blog/posts/post-1.mdx" -import Blockquote from '../components/Blockquote.astro'; -export const components = {blockquote: Blockquote} +如果你直接从单个文件导入 MDX 在 Astro 组件中使用，请同时导入 `Content` 组件以及你 MDX 文件中导出的任何组件。 -> 这个引用将是自定义引用块组件。 +```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}" {2} +--- +import { Content, components } from '../content.mdx'; +import Heading from '../Heading.astro'; +--- + + ``` -```astro title="src/components/Blockquote.astro" +如果你的 MDX 文件是内容集合中的一条条目，则使用来自 `astro:content` 的 `render()` 函数来访问 ` ` 组件。 + +下面的示例通过 `components` 属性向 ` ` 组件传入一个自定义标题，以取代所有 ` ` HTML 元素： + + +```astro title="src/pages/blog/post-1.astro" ins="components={{ h1: CustomHeading }}" --- -const props = Astro.props; +import { getEntry, render } from 'astro:content'; +import CustomHeading from '../../components/CustomHeading.astro'; +const entry = await getEntry('blog', 'post-1'); +const { Content } = await render(entry); --- -
- “ -+- ``` -访问 [MDX 网站](https://mdxjs.com/table-of-components/)，了解可以覆盖为自定义组件的 HTML 元素的完整列表。 ## 配置 @@ -379,7 +399,7 @@ export default defineConfig({ 以前称为 `customComponentNames`。 -`optimize` 的一个可选属性，用于防止 MDX 优化器处理某些元素名称，例如通过 components 属性传递给导入的 MDX 内容的[自定义组件](/zh-cn/guides/integrations-guide/mdx/#使用导入的-mdx-自定义组件)。 +`optimize` 的一个可选属性，用于防止 MDX 优化器处理某些元素名称，例如通过 components 属性传递给导入的 MDX 内容的[自定义组件](/zh-cn/guides/integrations-guide/mdx/#将-components-传给-mdx-内容)。 你需要将这些组件从优化中排除，因为优化器会急切地将内容转换为静态字符串，这将破坏需要动态呈现的自定义组件。 diff --git a/src/content/docs/zh-cn/reference/directives-reference.mdx b/src/content/docs/zh-cn/reference/directives-reference.mdx index 979e8e5e6594b..9598c9cff38be 100644 --- a/src/content/docs/zh-cn/reference/directives-reference.mdx +++ b/src/content/docs/zh-cn/reference/directives-reference.mdx @@ -115,7 +115,7 @@ import api from '../db/api.js'; 默认情况下，UI 框架组件不会在客户端激活。如果没有 `client:*` 指令，它的 HTML 将被渲染到页面上，而无需 JavaScript。 -客户端指令只能用于直接引入到 `.astro` 组件中的 UI 框架组件。 使用 [动态标签](/zh-cn/reference/astro-syntax/#动态标签) 和 [通过 `components` prop 传递的自定义组件](/zh-cn/guides/integrations-guide/mdx/#使用导入的-mdx-自定义组件) 时，不支持 Hydration 指令。 +客户端指令只能用于直接引入到 `.astro` 组件中的 UI 框架组件。 使用 [动态标签](/zh-cn/reference/astro-syntax/#动态标签) 和 [通过 `components` prop 传递的自定义组件](/zh-cn/guides/integrations-guide/mdx/#将-components-传给-mdx-内容) 时，不支持 Hydration 指令。 ### `client:load`