布局
布局是特殊的 Astro 组件,可用于创建可重用的页面模板。
我们通常将“布局”用于提供共享页面的常用 UI 元素(如标题、导航栏和页脚)的 Astro 组件。典型的 Astro 布局组件为 Astro、Markdown 或 MDX 页面提供:
- 一个 页面外壳(
<html>
、<head>
和<body>
标签) - 一个
<slot />
来指定单个页面内容应该被注入的位置。
但是,布局组件没有什么特别的!它们可以像任何其他 Astro 组件一样接受 props和导入和使用其他组件。它们可以包含UI 框架组件和客户端脚本。它们甚至不必提供完整的页面外壳,而是可以用作部分 UI 模板。
然而,如果布局组件确实包含页面外壳,那么它的 <html>
元素必须是该组件中所有其他元素的父元素。所有 <style>
或 <script>
元素必须包含在 <html>
标签内。
布局组件通常放置在项目中的 src/layouts
目录中,但这不是必须的。你可以选择将它们放置在项目中的任何位置。你甚至可以通过在布局组件名称前面加上“_”将布局组件与页面放在同一个文件夹中。
示例布局
段落标题 示例布局在布局中使用 TypeScript
段落标题 在布局中使用 TypeScript任何 Astro 布局都可以通过提供 props 类型来引入类型安全和自动补全功能:
Markdown 布局
段落标题 Markdown 布局页面布局对于没有任何页面格式的 Markdown 页面尤为有用。
Astro 提供了一个特殊的 layout
frontmatter 属性,用于指定哪个 .astro
组件用作页面布局。默认情况下,这个指定的组件可以自动访问 Markdown 文件中的数据。
一个典型的 Markdown 页面布局包括:
- 一个
frontmatter
prop,用于访问 Markdown 页面的 frontmatter 和其他数据。 - 一个默认的
<slot />
,用于指定页面的 Markdown 内容应该被渲染的位置。
你可以使用 MarkdownLayoutProps
帮助程序设置布局的 Props
类型:
Markdown 布局的 Props
段落标题 Markdown 布局的 Props一个 Markdown 布局将通过 Astro.props
访问以下信息:
file
- 此文件的绝对路径(例如/home/user/projects/.../file.md
)。url
- 此页面的 URL(例如/zh-cn/guides/markdown-content
)。frontmatter
- Markdown 或 MDX 文档中所有的 frontmatter。frontmatter.file
- 与顶级file
属性相同。frontmatter.url
- 与顶级url
属性相同。
headings
- Markdown 或 MDX 文档中的标题(h1 -> h6
)列表及其相关元数据。此列表遵循类型:{ depth: number; slug: string; text: string }[]
。rawContent()
- 返回原始 Markdown 文档的字符串的函数。compiledContent()
- 返回 Markdown 文档编译为 HTML 字符串的函数。
Markdown 布局将通过 Astro.props
访问其文件的所有 可用属性,但有两点关键区别:
-
标题信息(即
h1 -> h6
元素)可通过headings
数组访问,而不是getHeadings()
函数。 -
file
和url
也作为嵌套的frontmatter
属性(即frontmatter.url
和frontmatter.file
)可用。
手动导入布局(MDX)
段落标题 手动导入布局(MDX)你也可以用同样的方式,使用 MDX 文件的 frontmatter 部分中特殊的 Markdown 布局属性,将 frontmatter
和 headings
props 直接传递给指定的布局组件。
要将 Frontmatter 中不存在(或无法存在)的信息传递到 MDX 布局,你可以导入并使用 <Layout />
组件。它和其他 Astro 组件一样,不会自动接收任何 props。直接传递任何必要的 props:
然后,你可以通过布局中的 Astro.props
访问你的值,而你的 MDX 内容将被注入到你的 <slot />
组件所在的页面中:
嵌套布局
段落标题 嵌套布局布局组件无需包含整个页面的 HTML。你可以将布局分解为更小的组件,然后重用这些组件以创建更灵活、更强大的布局。
例如,BlogPostLayout.astro
布局组件可以对文章的标题、日期和作者进行样式化。然后,BaseLayout.astro
可以处理页面模板的其余部分,例如导航和页脚。你还可以将从文章接收的 props 传递给另一个布局,就像任何其他嵌套组件一样。