Astro 布局
布局是什么
布局（Layout）是一个「套在页面外面的壳」，通常包含 <html>、<head>、导航栏、页脚等所有页面共有的部分，业务页面只需写自己的正文，通过插槽塞进布局里。
创建一个基础布局
---
// src/layouts/BaseLayout.astro
import '../styles/global.css';
const { title, description = '' } = Astro.props; // 通过 Astro.props 接收页面传入的 title、description
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
</head>
<body>
<nav>
<a href="/">首页</a>
<a href="/blog">博客</a>
</nav>
<main class="container">
<slot /> <!-- 页面正文会渲染到这里 -->
</main>
<footer>© 2026 我的站点</footer>
</body>
</html>页面使用布局
---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="首页" description="欢迎来到我的 Astro 站点">
<h1>你好，Astro</h1>
<p>这一节内容由页面提供，外壳由布局提供。</p>
</BaseLayout>页面剩下的工作就是填正文，导航、页脚都不用重复写。
布局也可以嵌套
复杂站点可以再套一层，比如 BaseLayout 管整体外壳，PostLayout 管文章专属样式（标题、日期、目录）。
---
// src/layouts/PostLayout.astro
import BaseLayout from './BaseLayout.astro';
const { title, date } = Astro.props; // 通过 Astro.props 接收文章页传入的数据
---
<BaseLayout title={title}>
<article>
<h1>{title}</h1>
<time>{date}</time>
<slot />
</article>
</BaseLayout>通过 Props 控制布局
布局能接收任意 Props，用来切换行为，例如是否显示侧边栏。
---
const { title, showSidebar = false } = Astro.props; // 通过 props 控制是否显示侧边栏
---
<BaseLayout title={title}>
<div class={showSidebar ? 'with-sidebar' : ''}>
<slot />
</div>
</BaseLayout>