Panini

一個平面檔案編譯器，可支援我們的原型範本。輕鬆建立具有相容配置和可重複使用部分的頁面。

如果您曾經建立過靜態網站，您可能會有五個頁面都共用相同的標題和頁尾。您建立第一個頁面，然後將共用元素複製貼上到下一個頁面。但現在，如果您需要變更標題，則必須在多個檔案中進行變更。

Panini 是一個平面檔案編譯器，它使用範本、頁面和部分的概念（由 Handlebars 範本語言支援）來簡化建立靜態原型的流程。

我們的原型範本使用 Panini，以及許多其他處理 Sass、JavaScript 和影像的工具，讓建立靜態原型變得容易。它已經設定好使用以下所有功能，但如果您想了解如何設定函式庫的具體資訊，請前往 Panini GitHub 頁面。

基礎：範本和頁面

範本是設計中每個頁面共用的共用配置。可以有多個範本，但通常您只需要一個，而且一個頁面只能使用一個範本。在原型範本中，預設配置位於 src/layouts/default.html 中。

以下是基本範本可能的外觀

<html>
  <head>
    <title>Definitely a Website!</title>
  </head>
  <body>
    <header class="header"><!-- ... --></header>
    {{> body}}
    <footer class="footer"><!-- ... --></footer>
  </body>
</html>

HTML 中間是一點 Handlebars 程式碼：{{> body}}。這是當 Panini 執行時，您編寫的網頁會注入的地方，最後會提供給您一系列完整的 HTML 檔案。

網頁組成您的版面的內部。這些檔案只會有設計的中間部分，因為版面已經涵蓋了頂部和底部。原型範本包含一個空白頁面，讓您開始使用，在 src/pages/index.html 下。

一個基本網頁可能像這樣

<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus eligendi, reiciendis corporis quam facere quaerat qui, aspernatur molestiae velit, vero ea quisquam laborum corrupti repudiandae totam, at aliquam esse.</p>

請注意，沒有 <html> 或 <body> 標籤，也沒有標頭或頁尾。當 Panini 組合您的網頁時，這段程式碼會注入到 {{> body}} 宣告中。

在原型範本中，這些完成的檔案會編譯到一個名為 dist（「distribution」的縮寫）的獨立資料夾中，其中也包含您處理過的 CSS、JavaScript 和圖片。這個資料夾可以輕鬆上傳到任何網路伺服器，或 Notable 的 Hosted Prototypes 服務。

部分

部分是 Handlebars 的功能，讓您可以在網頁或版面的任何地方注入 HTML。當您需要在網頁中重複某些程式碼區塊，或讓個別檔案不會因為 HTML 而過於雜亂時，它們非常有用。

以下是將其關鍵部分分為部分的版面檔案範例

<html>
  <head>
    <title>Definitely STILL a Website!</title>
  </head>
  <body>
    {{> header}}
    {{> navigation}}
    {{> body}}
    {{> footer}}
  </body>
</html>

{{> }} 語法告訴 Handlebars 尋找具有該名稱的 HTML 檔案，並在那個地方注入它。在此範例中，我們有稱為 header.html、navigation.html 和 footer.html 的檔案。在原型範本中，這些檔案都存在於 src/partials 中。

網頁變數

網頁有幾個內建變數，可以在網頁範本本身中，或與網頁一起使用的版面或部分中使用。

page

列印目前網頁的名稱，不含其原始檔案副檔名。在以下範例中，如果網頁是 index.html，{{page}} 會變成 index。

<p>You are here: {{page}}</p>

root

在檔案路徑之前使用 {{root}}，以確保無論目前網頁在什麼資料夾中，它都能正常運作。

例如，如果目前網頁在您網站的根目錄或子資料夾中，則外部 CSS 檔案的路徑將需要不同。

以下是您如何使用 <link> 標籤的方式

<link rel="stylesheet" href="{{root}}assets/css/app.css">

如果網頁是 index.html，路徑會像這樣

<link rel="stylesheet" href="assets/css/app.css">

如果頁面是 folder/page.html，路徑會像這樣

<link rel="stylesheet" href="../assets/css/app.css">

../ 僅會新增到子資料夾中的頁面，這樣 CSS 才能正確載入。

幫手

幫手是特殊函式，用於處理頁面上的內容。除了 Handlebars 內建的幫手，Panini 還包含一些自訂幫手，而且你可以新增自己的幫手。

ifequal

如果兩個值相等，則顯示幫手內的 HTML。

{{#ifequal foo bar}}
  <p>foo and bar are equal</p>
{{else}}
  <p>foo and bar are not equal</p>  
{{/ifequal}}

ifpage

僅在特定頁面上顯示幫手內的 HTML。在以下範例中，幫手內的 HTML 僅會顯示在 index.html 頁面上。

{{#ifpage 'index'}}
  <p>This is definitely the Index page.</p>
{{/ifpage}}

你也可以檢查多個頁面。如果清單中的任何名稱與目前頁面相符，則會顯示 HTML。

{{#ifpage 'index' 'about'}}
  <p>This is definitely either the Index or About page.</p>
{{/ifpage}}

unlesspage

#ifpage 的相反，#unlesspage 僅會在目前頁面不在參數中時顯示其內的 HTML。

{{#unlesspage 'index'}}
  <p>This is definitely <em>not</em> the Index page.</p>
{{/unlesspage}}

repeat

重複其內的內容 n 次。在原型中使用這個功能可以輕鬆列印大量重複的 HTML。

<ul>
  {{#repeat 5}}
  <li>Five hundred ninety-nine US dollars</li>
  {{/repeat}}
</ul>

markdown

將 Markdown 轉換為 HTML。

{{#markdown}}
# Heading 1
Lorem ipsum [dolor sit amet](https://example.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
{{/markdown}}

自訂幫手

如果你沒有看到適當的幫手，你可以自行撰寫。將 JavaScript 檔案新增到 'src/helpers'，將 helpers: 'src/helpers' 新增到 gulpfile.babel.js 中的 Panini 程序，重新啟動 npm，然後在範本中呼叫它。

// Example file src/helpers/bold.js
module.exports = function(options) {
  // options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
  var bolder = '<strong>' + options.fn(this) + '</strong>';
  return bolder;
}

// Example  gulpfile.babel.js
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

然後在你的專案中呼叫你的自訂 {{#bold}} 幫手

{{#bold}}ideas{{/bold}}

自訂資料

可以將自訂資料新增到你的頁面。然後，這些資料可以透過 Handlebars 插入到你的 HTML 中。有兩種方式可以將資料新增到專案中。

若要僅將變數新增到特定頁面，請將它新增到頁面 HTML 的頂端，作為 Front Matter 區塊。假設以下內容在 src/pages/index.html 內。

---
title: Page Title
description: Lorem ipsum.
---

<!-- The rest of your HTML is down here. -->

現在，您可以將這些變數的值插入 index.html 頁面或 default.html 版面。若要插入變數，請將變數名稱用雙大括號括起來，如下所示

<h1>{{ title }}</h1>

您也可以透過建立外部 JSON 或 YML 檔案，並將其新增至專案中的 src/data 資料夾，來在全域新增變數。我們來建立一個名為 breakfast.yml 的檔案

- eggs
- bacon
- toast

Panini 會將此 YML 檔案的內容載入，作為一個名為 {{ breakfast }} 的變數。由於它是一個陣列，我們可以使用 Handlebars 的 {{#each}} 輔助函式來迴圈它

<ul class="breakfast-items">
  {{#each breakfast}}
    <li>{{ this }}</li>
  {{/each}}
</ul>

此程式碼將印出三個 <li>，每個對應檔案中的其中一項。