佈局
佈局是包覆在內容周圍的範本。它們讓你可以將範本的原始碼放在同一個地方,這樣就不必在每個頁面上重複導覽列和頁尾等內容。
佈局存在於 _layouts
目錄中。慣例是有一個稱為 default.html
的基本範本,並視需要讓其他佈局 繼承 這個範本。
佈局目錄
Jekyll 會在網站的 source
根目錄或佈景主題的根目錄尋找 _layouts
目錄。
雖然你可以透過在設定檔中設定 layouts_dir
鍵來設定佈局所在目錄的名稱,但目錄本身應該位於網站的 source
目錄根目錄。
用法
第一步是將範本原始碼放入 default.html
中。 content
是特殊變數,其值是被包覆的貼文或頁面的渲染內容。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
</nav>
<h1>{{ page.title }}</h1>
<section>
{{ content }}
</section>
<footer>
© to me
</footer>
</body>
</html>
你可以完全存取來源的序言。在上面的範例中,page.title
來自頁面序言。
接下來,你需要在頁面序言中指定你正在使用的佈景。你也可以使用 序言預設值,讓你省去在每個頁面設定的麻煩。
---
title: My First Page
layout: default
---
This is the content of my page
此頁面的渲染輸出為
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
</nav>
<h1>My First Page</h1>
<section>
This is the content of my page
</section>
<footer>
© to me
</footer>
</body>
</html>
繼承
當你想要為網站上部分文件新增一些內容到現有佈景時,佈景繼承很有用。一個常見的範例是部落格文章,你可能希望文章顯示日期和作者,但其他方面都與你的基本佈景相同。
要達成此目的,你需要在序言中指定原始佈景來建立另一個佈景。例如,這個佈景會存在於 _layouts/post.html
---
layout: default
---
<p>{{ page.date }} - Written by {{ page.author }}</p>
{{ content }}
現在,文章可以使用這個佈景,而其他頁面則使用預設值。
變數
你可以在佈景中設定序言,唯一不同的是當你在 Liquid 中使用時,你需要使用 layout
變數,而不是 page
。例如
---
city: San Francisco
---
<p>{{ layout.city }}</p>
{{ content }}