Wintersmith 基于 Node.js 和 npm 的好处之一是安装过程非常简单。您必须执行以下命令来安装它（注意：sudo在 Windows 上不是必需的）：

$ sudo npm install -g wintersmith

就是这样——你可以走了！现在让我们创建一个新项目。文章源自懂站帝-http://www.sfdkj.com/12801.html

创建站点

要使用 Wintersmith 创建新站点，请输入以下命令：文章源自懂站帝-http://www.sfdkj.com/12801.html

$ wintersmith new [project name]

对于示例站点，我们将给项目命名为“wintersmithsite”。所以要执行的命令是：文章源自懂站帝-http://www.sfdkj.com/12801.html

$ wintersmith new wintersmithsite

它将生成一个具有给定项目名称的文件夹，其中包含一堆文件，我们可以修改这些文件以开始构建我们的网站。文章源自懂站帝-http://www.sfdkj.com/12801.html

如果我们查看生成的文件，我们会看到 Wintersmith 将配置、模板和插件放在根级别，而站点文件则放在名为“contents”的文件夹中。文章源自懂站帝-http://www.sfdkj.com/12801.html

测试网站

要在本地服务器上运行项目，请更改目录并开始预览：文章源自懂站帝-http://www.sfdkj.com/12801.html

$ cd wintersmithsite
$ wintersmith preview

默认情况下，本地服务器运行在 8080 端口，因此我们可以通过浏览http://localhost:8080. -p我们可以使用该选项指定不同的端口。此外，默认情况下，服务器是详细的，并将向控制台输出详细的错误消息和加载的资源。服务器还有许多其他选项，我们可以通过输入命令来学习：文章源自懂站帝-http://www.sfdkj.com/12801.html

$ wintersmith preview -help

这些选项也可以在名为 的站点配置文件中设置config.json，但目前，默认值应该可以正常工作。文章源自懂站帝-http://www.sfdkj.com/12801.html

模板基础

Wintersmith 默认使用Jade作为其模板语言。本教程将使用它，但如果您喜欢不同的模板语言，Wintersmith 有很多可用的插件。文章源自懂站帝-http://www.sfdkj.com/12801.html

模板位于站点根目录的“模板”文件夹中。Jade 是一种非常简洁的模板语言——没有括号，没有结束标签和缩进很重要。让我们看一下如何使用 Jade 创建模板的一些基础知识。文章源自懂站帝-http://www.sfdkj.com/12801.html

输出数据

Jade 提供了多种从变量中输出数据的方式。构建站点模板时最常见的是将标记设置为等于变量的值。例如，以下示例 fromtemplates/article.jade将文章的标题放置在开始和结束<h2>标记中。文章源自懂站帝-http://www.sfdkj.com/12801.html

h2= page.title

默认情况下，变量的内容在输出之前被转义。这意味着如果它包含 HTML，标签将不会在输出中呈现，而是显示为纯文本。当我们需要它们不转义时，我们必须添加一个感叹号，如下例所示templates/article.jade：文章源自懂站帝-http://www.sfdkj.com/12801.html

section.content!= typogr(page.html).typogrify()

我们可以对属性做同样的事情。下面的示例 templates/partials/homepagemiddle.jade创建一个<a>标签，其href属性等于文章的 URL。文章源自懂站帝-http://www.sfdkj.com/12801.html

a(href= article.url, class="image featured")

如果您对默认情况下在页面对象上提供哪些变量感到好奇，文档会列出它们。我应该注意，article上面的变量不是默认变量，而是循环的结果，我们将在后面讨论。文章源自懂站帝-http://www.sfdkj.com/12801.html

使用 Jade 输出变量的另一种方法是使用#{ variableName }. 当我们这样做时，变量的内容被转义。我们的示例中没有这种方法的示例。文章源自懂站帝-http://www.sfdkj.com/12801.html

如果要输出非转义变量的内容，使用的语法是!{ variableName }. 例如，当我们输出帖子正文的内容时，我们会希望呈现其中的任何标签。一个例子来自 templates/partials/homepagemiddle.jade：文章源自懂站帝-http://www.sfdkj.com/12801.html

| !{ typogr(article.intro).typogrify() }

前一行代码前面的管道表示内容将显示为纯文本。文章源自懂站帝-http://www.sfdkj.com/12801.html

npm 模块

您可能想知道这些typogrify()电话的全部内容。嗯，Wintersmith 的好处之一是它支持使用 npm 模块。生成的站点包括三个：typogr（你在上面看到的）；Moment.js（要了解有关 Moment 的更多信息，您可以阅读文章使用 Moment.js 管理日期和时间）；和下划线。文章源自懂站帝-http://www.sfdkj.com/12801.html

让我们看看使用 Moment.js 格式化模板中的日期，如下例所示 templates/partials/homepagemiddle.jade：文章源自懂站帝-http://www.sfdkj.com/12801.html

p= "Posted " + moment.utc(article.date).format('MMM DD, YYYY')

Moment.js 提供了比格式化更多的功能，所有这些都可以从我们的模板中获得。但是，我们不仅限于 Moment.js，因为我们可以将任何 npm 模块添加到我们网站的require部分，并在我们的模板中使用该模块。config.jsonnpm install文章源自懂站帝-http://www.sfdkj.com/12801.html

包括

我们希望拆分模板以使它们更易于维护和重用。我们可以使用include来做到这一点。此代码templates/index.jade包含该 templates/partials/header.jade文件（请注意，您不需要 .jade 文件扩展名）：

include ./partials/header

Jade 还支持继承，可用于创建类似的、单独的和可重用的模板代码块。如果您想了解有关继承的更多详细信息，请查看文档。

条件句

在某些情况下，您可能希望根据特定条件显示模板的不同方面。这可以使用Jade 中的条件来完成。Jade 支持if,和else if,这实际上是.elseunlessif

此示例 templates/partials/header.jade仅在我们不在页面上时显示横幅（我们网站中的每个帖子都是一个页面，因此这意味着仅在主页上显示它，index.html）：

if !page
section(id="banner")
header
h2 Explore the Land of Ooo...
p ...and its many kingdoms!

这个条件也可以写成unless page。

Jade 还支持case语句块。如果您想了解更多信息，请参阅官方文档。

循环播放

循环是我们在模板中会做的很多事情，无论我们是循环通过帖子还是数据。对于这样的需求，Jade 支持each和while循环。

下面的示例 templates/partials/homepagemiddle.jade使用each循环输出我们所有的字符数据。在主页的中间，我们显示每个字符及其图像、名称和描述。each循环遍历数组中的每个对象并将其分配给我们可以访问其属性的变量character。

each character in contents.characters
div(class="4u")
section(class="box")
span(class="image featured")
img(src= character.metadata.image)
header
h3= character.metadata.name
p= character.metadata.description

不幸的是，不支持向循环添加限制或偏移量。相反，我们可以通过组合变量和条件来做到这一点。在以下示例中，我们仅显示前两个帖子（类似于限制）。请记住，设置变量 (i和articles) 的行有一个前缀-，表示它们将在编译期间在服务器上运行。这意味着在模板的输出中没有生成相应的代码。

- var i=0
- var articles = env.helpers.getArticles(contents);
each article in articles
- i++
if i<3
div(class="6u")
section(class="box")
a(href= article.url, class="image featured")
img(src= article.metadata.banner)
header
h3= article.title
p= "Posted " + moment.utc(article.date).format('MMM DD, YYYY')
| !{ typogr(article.intro).typogrify() }
footer
ul(class="actions")
li
a(href= article.url, class="button icon fa-file-text") Continue Reading

您会注意到我们使用env.helpers.getArticles(contents);在 contents/articles 文件夹中获取文章数组。据我所知，这没有得到很好的记录，但是这种方法来自分页器插件，可以在config.json.

本文的下一个示例和最后一个示例使用偏移量和限制进行复制，以在前两篇文章之后显示接下来的五篇文章：

- var i=0
- var articles = env.helpers.getArticles(contents);
each article in articles
-i++
if (i>2) && (i<8)
li
span(class="date")
!=moment.utc(article.date).format('MMM')
strong= moment.utc(article.date).format('DD')
h3
a(href=article.url)= article.title
p= article.metadata.shortdesc

结论

在本文中，我向您介绍了 Wintersmith，如果您正在寻找基于 Node.js 的静态站点生成器，这是一个不错的选择。