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 和图像。此文件夹可以轻松上传到任何 Web 服务器或 Notable 的托管原型服务。

部分

部分是 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 中。

页面变量

页面有一些内置变量，可以在页面模板本身内部或与页面一起使用的布局或部分中使用。

页面

打印当前页面的名称，不带其原始文件扩展名。在下面的示例中，如果页面是 index.html，则 {{page}} 将变为 index。

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

根目录

在文件路径之前使用 {{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 还包含一些自定义助手，您也可以添加自己的助手。

如果相等

如果两个值相等，则显示助手内的 HTML。

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

如果页面

仅在特定页面上显示助手内的 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}}

除非页面

与 #ifpage 相反，#unlesspage 仅在当前页面*不在*参数中时才显示其中的 HTML。

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

重复

将其内部的内容重复 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 中。有两种方法可以将数据添加到项目中。

要仅将变量添加到特定页面，请将其作为 Front Matter 块添加到页面 HTML 的顶部。假设以下内容位于 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>，文件中的每个项目对应一个。