佈局

佈局是包覆在內容周圍的範本。它們讓你可以將範本的原始碼放在同一個地方,這樣就不必在每個頁面上重複導覽列和頁尾等內容。

佈局存在於 _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>
      &copy; 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>
      &copy; 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 }}