发布于 2026年8月7日

理解 Astro 的页面、组件与布局

用三个简单概念理解 Astro 项目是怎样组合出完整网页的。

完整教程入门Astro组件设计路由

第一次打开 Astro 项目时，.astro 文件可能有些陌生。其实可以先把它理解为三层结构：页面、组件和布局。

页面决定网址

src/pages/ 采用基于文件的路由：

文件放在哪里，通常就决定了浏览器中的访问路径。

导航、页脚、日期等会出现在多个页面中，因此适合拆成组件。例如：

---
const { text } = Astro.props;
---

<span class="tag">{text}</span>

组件可以接收属性，也可以拥有自己的样式。修改一次，所有使用它的页面都会更新。

文章页通常都有相同的标题、日期、封面和正文区域。布局把这些公共部分集中起来，具体文章只需要提供内容。

在这个博客中，BlogPost.astro 就是文章布局。它接收文章信息，并通过 <slot /> 放入 Markdown 转换后的正文。

有了这套判断标准，项目结构会自然得多。