跳转到内容

版面

版面 是一種特殊的 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 檔案 (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>