This introduction to layouts in Astro is excepted from Unleashing the Power of Astro, accessible now on Pylogix Premium.
Whereas every .astro web page (route) has the potential to comprise a fully-fledged HTML doc, it’s inefficient to duplicate that construction, particularly when sure parts—resembling <meta> and <title> parts—might differ relying on the presently seen web page. (The inefficiency comes from the truth that we must doubtlessly add the identical HTML construction to every .astro web page.)
Due to this fact, it’s advisable to determine an overarching format that can be utilized throughout all pages. Though not necessary, organizing the format recordsdata inside the src/layouts folder is sensible, enabling the addition of a number of format recordsdata—resembling one for navigation and one other for a footer, and even splitting up the format for elements of the web page (for instance, a separate format for the general web page and for the weblog).
Think about the next for instance of a fundamental web site that might embody widespread UI parts:
layouts/Format.astro: the first format filelayouts/Head.astro: a piece for customized<head>parts, doubtlessly distinctive for every web pagelayouts/Nav.astro: a navigation barlayouts/Footer.astro: a footer part
Right here’s a glimpse of the layouts/Format.astro file:
---
import Head from './Head.astro';
import Nav from './Nav.astro';
const {
,
description = 'An internet soccer journal',
} = Astro.props;
import Footer from './Footer.astro';
---
<html lang="en">
<title>{title}</title>
<meta identify="description" content material={description}>
<physique>
<Nav />
<div>
<primary>
<slot />
</primary>
</div>
<Footer />
</physique>
</html>
Observe that, within the instance above, we’re mixing customary HTML parts with Astro parts. Those which might be capitalized (Nav and Footer) are Astro parts which might be imported within the prime a part of this pattern format file.
Astro.props
There are a couple of key takeaways right here. Pay attention to the import perform and the utilization of Astro.props. We are able to simply import every other element by utilizing the import key phrase. The particular built-in Astro.props object permits us to ship properties to parts and entry them. Within the code above, default values are set if Astro.props lacks the title or description keys (the default values are Footie is the very best and An internet soccer journal). That is good follow, and we’re leveraging JavaScript’s default params characteristic intermixed with object destructuring. Nevertheless, if there are props despatched, Astro will choose them up. Let’s check out this by inspecting the code beneath:
<!-- Makes use of the defaults -->
<Format />
<!-- Units title to "My Title," whereas description retains its default worth -->
<Format />
The primary <Format /> element doesn’t have any props hooked up to it, so it is going to resort to utilizing the beforehand talked about default values. Within the second state of affairs, nonetheless, the title prop is shipped with the worth of My Title, which signifies that the web page will show the suitable title.
World Object Properties
A number of properties can be found from the built-in international object Astro.
Lastly, pay attention to the <slot /> component, which serves because the insertion level for content material from particular person .astro pages. Extra on this shortly.
Please additionally take note of the <Head> Astro element. Suppose the property and variable holding the worth we want to ship to the property share the identical identify. In that case, we are able to make use of a less complicated syntax:
const ;
<Head title={title} />
<!-- Could be simplified to 👇 -->
<Head {title} />
Slot
Lastly, let’s discuss a bit extra concerning the built-in <slot /> component. As soon as the layouts are prepared, the content material from Astro recordsdata within the src/pages folder can be injected the place the component talked about above is positioned.
To use a format to an Astro file, we have to import it and use it as we’d use every other element:
---
import Format from '../layouts/Format.astro';
---
<Format >
<p>Some content material that can be injected into the "slot"</p>
</Format>Wish to be taught extra about Astro, the trendy all-in-one framework to construct sooner, content-focused web sites? Take a look at Unleashing the Power of Astro, accessible now on Pylogix Premium.
