Panini
库一个平面文件编译器，为我们的原型模板提供支持。轻松创建具有一致布局的可重用部分的页面。
如果您曾经创建过静态网站，那么您可能会有五页共享相同的页眉和页脚。创建第一个页面，然后将公共元素复制并粘贴到下一个页面。但如果您现在需要对页眉进行更改，则需要在多个文件中进行更改。您也可以在活动中使用您的电子邮件来做到这一点！
Panini 是一个平面文件编译器，使用模板、页面和部分的概念，并由 Handlebars 模板语言提供支持，以简化创建静态原型的过程。
我们的 原型模板 使用 Panini 以及许多其他用于处理 Sass 和图像的工具，轻松创建经过优化的模板。已对其进行配置，以便利用以下所有功能，但是如果要了解如何配置库的具体内容，请访问 Panini GitHub 页面。
基础知识：模板和页面
模板是设计中每个页面共享的公共布局。有可能有多个模板，但通常您只需要一个模板，并且一个页面只能使用一个模板。在原型模板中，默认布局位于 src/layouts/default.html 下。
基本模板可能如下所示
<html>
<head>
<title>Definitely an Email!</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（代表“分发”）的独立文件夹中，其中还包括已处理的 CSS、JavaScript 和图像。此文件夹可以轻松上传到任何 ESP（电子邮件服务提供商）。
部分
部分是 Handlebars 的一个功能，允许您在页面或布局中的任何位置注入 HTML。当您需要在页面中重复某些代码块或防止单个文件因 HTML 而变得太混乱时，它们非常有用。
这是将主要分段划分为分块的布局文件的示例
<html>
<head>
<title>Definitely STILL an Email!</title>
</head>
<body>
{{> header}}
{{> 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 还包括一些自定义助手，您还可以添加自己的助手。
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
#unlesspage 与 #ifpage 相反，只有当当前页面不在参数中时，它才会显示其中的 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://html5zombo.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”，重新启动 npm，然后在模板中调用它。
// Example file src/helpers/bold.js
module.exports = function(options) {
// options.fn(this) = Handlebars content between {{#bold}} HERE {{/bold}}
var bolder = '<strong>' + options.fn(this) + '</strong>';
return bolder;
}然后在您的项目中调用自定义 {{#bold}} 助手
{{#bold}}ideas{{/bold}}自定义数据
可以将自定义数据添加到您的页面。然后可通过 Handlebars 将此数据插入 HTML 中。有两种将数据添加到项目的方法。
若只向特定页面添加变量，则将其作为 页首信息 块添加到页面 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
- toastPanini 会将此 YML 文件的内容加载为名为 {{ breakfast }} 的变量。由于它是一个数组，我们可以使用 Handlebars 的 {{#each}} 助手遍历它
<ul class="breakfast-items">
{{#each breakfast}}
<li>{{ this }}</li>
{{/each}}
</ul>此代码会打印三个 <li>，每个列表项一个。
教程
利用 Panini 保持 DRYPanini 提供大量内置的 Handlebars 帮助器，其中包括 repeat 帮助器或 Markdown 解析器，但在此课程中，我们将学习如何为 HTML 邮件创建自定义月/年帮助器。
