Home >Web Front-end >JS Tutorial >Layouts in Astro

Layouts in Astro

William Shakespeare
William ShakespeareOriginal
2025-02-08 11:17:091030browse

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:

<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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn