Layouts in Astro-JS Tutorial-php.cn

Layouts in Astro

William Shakespeare

Release： 2025-02-08 11:17:09

Original

944 people have browsed it

This Astro layout tutorial excerpt, from Unleashing the Power of Astro (available on SitePoint Premium), demonstrates efficient website structuring. While each Astro page can contain a complete HTML document, redundancy is avoided by using layouts. This is particularly beneficial for elements like <meta> and <title></title> tags, which often vary per page.

Organizing layout files within the src/layouts folder is recommended for scalability. Multiple layouts can be created—for example, separate layouts for navigation, footers, or even different page sections.

A sample website structure might include:

layouts/Layout.astro: The main layout file.
layouts/Head.astro: Handles page-specific content.
layouts/Nav.astro: The navigation bar.
layouts/Footer.astro: The footer.

Layouts in Astro

The layouts/Layout.astro file might look like this:

---
import Head from './Head.astro';
import Nav from './Nav.astro';
const { title = 'Footie is the best', description = 'An online football magazine' } = Astro.props;
import Footer from './Footer.astro';
---

<html lang="en">
<head>
  <Head />
  <title>{title}</title>
  <meta content="{description}" name="description">
</head>
<body>
  <Nav />
  <main>
    <slot />
  </main>
  <Footer />
</body>
</html>

Copy after login

This approach promotes cleaner, more maintainable code by centralizing common elements and allowing for easy customization per page.

The above is the detailed content of Layouts in Astro. For more information, please follow other related articles on the PHP Chinese website!