Working with Layouts

Layouts in Astro help you create consistent page structures across your website. They’re special components that wrap your page content and provide common elements like headers, footers, and navigation.

What are Layouts?

Layouts are Astro components that define the overall structure of your pages. They typically include:

HTML document structure (<html>, <head>, <body>)
Common UI elements (header, footer, navigation)
Styling and meta information
Slots for page-specific content

Creating a Basic Layout

Here’s an example of a simple layout component:

---
// src/layouts/Layout.astro
export interface Props {
  title: string;
  description?: string;
}
 
const { title, description = "My awesome website" } = Astro.props;
---
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content={description} />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>
    
    <main>
      <slot />
    </main>
    
    <footer>
      <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Using Slots

The <slot /> element is where the page content will be inserted. You can also use named slots for more complex layouts:

<!-- Layout with named slots -->
<div class="page">
  <aside>
    <slot name="sidebar" />
  </aside>
  
  <main>
    <slot /> <!-- Default slot -->
  </main>
</div>

Using Layouts in Pages

To use a layout in your pages, import it and wrap your content:

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---
 
<Layout title="Home Page" description="Welcome to my website">
  <h1>Welcome to My Website</h1>
  <p>This is the home page content.</p>
</Layout>

Nested Layouts

You can create specialized layouts that extend base layouts:

---
// src/layouts/BlogLayout.astro
import Layout from './Layout.astro';
 
export interface Props {
  title: string;
  publishDate: Date;
  author: string;
}
 
const { title, publishDate, author } = Astro.props;
---
 
<Layout title={title}>
  <article>
    <header>
      <h1>{title}</h1>
      <p>By {author} on {publishDate.toLocaleDateString()}</p>
    </header>
    
    <div class="content">
      <slot />
    </div>
  </article>
</Layout>

Layout Best Practices

Keep layouts focused: Each layout should serve a specific purpose
Use props for customization: Make layouts flexible with props
Include essential meta tags: SEO and accessibility are important
Consider performance: Only include necessary CSS and JavaScript
Plan your slot structure: Think about how content will be organized

Common Layout Patterns

Blog Layout

<Layout title={frontmatter.title}>
  <article>
    <header>
      <h1>{frontmatter.title}</h1>
      <time>{frontmatter.date}</time>
    </header>
    <slot />
  </article>
</Layout>

Dashboard Layout

<Layout title="Dashboard">
  <div class="dashboard">
    <nav class="sidebar">
      <slot name="sidebar" />
    </nav>
    <main class="content">
      <slot />
    </main>
  </div>
</Layout>

Layouts are essential for maintaining consistency and reducing code duplication in your Astro projects. They provide the foundation for your website’s structure and user experience.

搜索

掌握 Astro 布局系统