跳转到内容
Astro Astro

版面

版面 是一種特殊的 Astro component (EN)，其在建立可重複使用的頁面模板時是相當有用的。

版面 component 通常會用來為一個 .astro 或 .md 頁面提供一個 頁面殼層 （<html> 、 <head> 和 <body> 標籤）以及一個用來指定嵌入到頁面內容的 <slot />。

版面通常會為網頁提供一般 <head> 元素及一般 UI 元素，像是頁首、導覽列及頁尾。

版面 component 一般來說會放在一個 src/layouts 目錄在你的專案中。

版面例子

src/layouts/MySiteLayout.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>酷酷的 Astro 網站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">首頁</a>
      <a href="#">文章列表</a>
      <a href="#">聯絡我們</a>
    </nav>
    <article>
      <slot /> <!-- 你的內容會被嵌在這裡 -->
    </article>
  </body>
</html>
src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>我的網頁內容被包在一個版面裡！</p>
</MySiteLayout>

📚 了解更多關於 slots (EN) 的資訊。

Markdown 版面

網頁版面對 Markdown 檔案 (EN)特別有用。Markdown 檔案可以利用 frontmatter 最上面一個特殊的 layout 屬性來定義作為網頁版面的 .astro component。

src/pages/posts/post-1.md
---
layout: ../../layouts/BlogPostLayout.astro
title: 部落格文章
description: 我的第一個部落格文章！
---
這是一個用 Markdown 來寫的文章。

當一個 Markdown 檔引入了一個版面，它會傳入一個 frontmatter 屬性到包含所有 frontmatter 屬性及最終網頁HTML輸出的 .astro component 內。

src/layouts/BlogPostLayout.astro
---
const {frontmatter} = Astro.props;
---
<html>
   <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>文章作者： {frontmatter.author}</h2>
  <slot />
   <!-- ... -->
</html>

📚 在我們的 Markdown 指南 (EN)中了解更多關於 Astro 對 Markdown 的支援。

巢狀版面

版面 component 不需要包含所有網頁該有的 HTML 內容。你可以將你的版面分成更小的 component 然後重複使用這些 component 並建立出更有彈性、更強大的版面到你的專案中。

舉例來說，一個為部落格文章設計的一般版面會呈現出一個標題、日期及作者。一個 BlogPostLayout.astro 版面 component 會加入這些 UI 到網頁上，以形成一個更大、全面的版面來處理網頁剩下的部分。

src/layouts/BlogPostLayout.astro
---
import BaseLayout from './BaseLayout.astro'
const {frontmatter} = Astro.props;
---
<BaseLayout>
  <h1>{frontmatter.title}</h1>
  <h2>文章作者： {frontmatter.author}</h2>
  <slot />
</BaseLayout>