[ad_1]
This introduction to layouts in Astro is excepted from Unleashing the Energy of Astro, accessible now on SitePoint Premium.
Whereas every .astro web page (route) has the potential to include a fully-fledged HTML doc, it’s inefficient to duplicate that construction, particularly when sure components—resembling <meta> and <title> components—might range relying on the at the moment considered web page. (The inefficiency comes from the truth that we must doubtlessly add the identical HTML construction to every .astro web page.)
Subsequently, it’s advisable to ascertain an overarching structure that can be utilized throughout all pages. Though not necessary, organizing the structure information inside the src/layouts folder is sensible, enabling the addition of a number of structure information—resembling one for navigation and one other for a footer, and even splitting up the structure for elements of the web page (for instance, a separate structure for the general web page and for the weblog).
Think about the next for example of a fundamental web site that might embody frequent UI components:
layouts/Format.astro: the first structure filelayouts/Head.astro: a bit for customized<head>components, 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 {
title="Footie is the very best",
description = 'An internet soccer journal',
} = Astro.props;
import Footer from './Footer.astro';
---
<html lang="en">
<title>{title}</title>
<meta title="description" content material={description}>
<physique>
<Nav />
<div>
<essential>
<slot />
</essential>
</div>
<Footer />
</physique>
</html>
Notice that, within the instance above, we’re mixing normal HTML components with Astro elements. Those which might be capitalized (Nav and Footer) are Astro elements which might be imported within the prime a part of this pattern structure file.
Astro.props
There are a number of key takeaways right here. Be aware of the import operate and the utilization of Astro.props. We will simply import some other part by utilizing the import key phrase. The particular built-in Astro.props object permits us to ship properties to elements 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. Nonetheless, if there are props despatched, Astro will decide them up. Let’s check out this by analyzing the code beneath:
<!-- Makes use of the defaults -->
<Format />
<!-- Units title to "My Title," whereas description retains its default worth -->
<Format title="My Title" />
The primary <Format /> part doesn’t have any props connected to it, so it can 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 world 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 part. Suppose the property and variable holding the worth we want to ship to the property share the identical title. In that case, we are able to make use of a less complicated syntax:
const title="my title";
<Head title={title} />
<!-- Will be simplified to 👇 -->
<Head {title} />
Slot
Lastly, let’s speak a bit extra concerning the built-in <slot /> component. As soon as the layouts are prepared, the content material from Astro information within the src/pages folder can be injected the place the component talked about above is positioned.
To use a structure to an Astro file, we have to import it and use it as we’d use some other part:
---
import Format from '../layouts/Format.astro';
---
<Format title="Welcome">
<p>Some content material that can be injected into the "slot"</p>
</Format>Need 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 Energy of Astro, accessible now on SitePoint Premium.
[ad_2]