Layouts in Astro

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.

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

<code class="language-astro">---
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';
---



  </code>
  <title>{title}</title>
  <meta content="{description}" name="description">


  <nav></nav>
  <main>
    <slot></slot>
  </main>
  <footer></footer>

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!