Layouts
यह कंटेंट अभी तक आपकी भाषा में उपलब्ध नहीं है।
Layouts are Astro components used to provide a reusable UI structure, such as a page template.
We conventionally use the term “layout” for Astro components that provide common UI elements shared across pages such as headers, navigation bars, and footers. A typical Astro layout component provides Astro, Markdown or MDX pages with:
- a page shell (
<html>
,<head>
and<body>
tags) - a
<slot />
to specify where individual page content should be injected.
But, there is nothing special about a layout component! They can accept props and import and use other components like any other Astro component. They can include UI frameworks components and client-side scripts. They do not even have to provide a full page shell, and can instead be used as partial UI templates.
However, if a layout component does contain a page shell, its <html>
element must be the parent of all other elements in the component. All <style>
or <script>
elements must be enclosed by the <html>
tags.
Layout components are commonly placed in a src/layouts
directory in your project for organization, but this is not a requirement; you can choose to place them anywhere in your project. You can even colocate layout components alongside your pages by prefixing the layout names with _
.
Sample Layout
Section titled Sample LayoutUsing TypeScript with layouts
Section titled Using TypeScript with layoutsAny Astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props:
Markdown Layouts
Section titled Markdown LayoutsPage layouts are especially useful for individual Markdown pages which otherwise would not have any page formatting.
Astro provides a special layout
frontmatter property intended for individual .md
files located within src/pages/
using file-based routing to specify which .astro
component to use as the page layout. This component allows you to provide <head>
content like meta tags (e.g. <meta charset="utf-8">
) and styles for the Markdown page. By default, this specified component can automatically access data from the Markdown file.
This is not recognized as a special property when using content collections to query and render your content.
A typical layout for a Markdown page includes:
- The
frontmatter
prop to access the Markdown page’s frontmatter and other data. - A default
<slot />
to indicate where the page’s Markdown content should be rendered.
You can set a layout’s Props
type with the MarkdownLayoutProps
helper:
Markdown Layout Props
Section titled Markdown Layout PropsA Markdown layout will have access to the following information via Astro.props
:
file
- The absolute path of this file (e.g./home/user/projects/.../file.md
).url
- The URL of the page (e.g./en/guides/markdown-content
).frontmatter
- All frontmatter from the Markdown or MDX document.frontmatter.file
- The same as the top-levelfile
property.frontmatter.url
- The same as the top-levelurl
property.
headings
- A list of headings (h1 -> h6
) in the Markdown or MDX document with associated metadata. This list follows the type:{ depth: number; slug: string; text: string }[]
.rawContent()
- A function that returns the raw Markdown document as a string.compiledContent()
- An async function that returns the Markdown document compiled to an HTML string.
A Markdown layout will have access to all the Markdown file’s available properties from Astro.props
with two key differences:
-
Heading information (i.e.
h1 -> h6
elements) is available via theheadings
array, rather than agetHeadings()
function. -
file
andurl
are also available as nestedfrontmatter
properties (i.e.frontmatter.url
andfrontmatter.file
).
Importing Layouts Manually (MDX)
Section titled Importing Layouts Manually (MDX)You can also use the special Markdown layout property in the frontmatter of MDX files to pass frontmatter
and headings
props directly to a specified layout component in the same way.
To pass information to your MDX layout that does not (or cannot) exist in your frontmatter, you can instead import and use a <Layout />
component. This works like any other Astro component, and will not receive any props automatically. Pass it any necessary props directly:
Then, your values are available to you through Astro.props
in your layout, and your MDX content will be injected into the page where your <slot />
component is written:
When using any layout (either through the frontmatter layout
property or by importing a layout), you must include the <meta charset="utf-8">
tag in your layout as Astro will no longer add it automatically to your MDX page.
Nesting Layouts
Section titled Nesting LayoutsLayout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and combine layout components to create even more flexible, page templates. This pattern is useful when you want to share some code across multiple layouts.
For example, a BlogPostLayout.astro
layout component could style a post’s title, date and author. Then, a site-wide BaseLayout.astro
could handle the rest of your page template, like navigation, footers, SEO meta tags, global styles, and fonts. You can also pass props received from your post to another layout, just like any other nested component.