Wintersmith入门基于Node。js的静态站点生成器

　　Wintersmith基于Node。js和npm的好处之一是安装过程非常简单。您必须执行以下命令来安装它（注意：sudo在Windows上不是必需的）：sudonpminstallgwintersmith
　　就是这样你可以走了！现在让我们创建一个新项目。创建站点
　　要使用Wintersmith创建新站点，请输入以下命令：wintersmithnew〔projectname〕
　　对于示例站点，我们将给项目命名为wintersmithsite。所以要执行的命令是：wintersmithnewwintersmithsite
　　它将生成一个具有给定项目名称的文件夹，其中包含一堆文件，我们可以修改这些文件以开始构建我们的网站。
　　如果我们查看生成的文件，我们会看到Wintersmith将配置、模板和插件放在根级别，而站点文件则放在名为contents的文件夹中。测试网站
　　要在本地服务器上运行项目，请更改目录并开始预览：cdwintersmithsitewintersmithpreview
　　默认情况下，本地服务器运行在8080端口，因此我们可以通过浏览http：localhost：8080。p我们可以使用该选项指定不同的端口。此外，默认情况下，服务器是详细的，并将向控制台输出详细的错误消息和加载的资源。服务器还有许多其他选项，我们可以通过输入命令来学习：wintersmithpreviewhelp
　　这些选项也可以在名为的站点配置文件中设置config。json，但目前，默认值应该可以正常工作。模板基础
　　Wintersmith默认使用Jade作为其模板语言。本教程将使用它，但如果您喜欢不同的模板语言，Wintersmith有很多可用的插件。
　　模板位于站点根目录的模板文件夹中。Jade是一种非常简洁的模板语言没有括号，没有结束标签和缩进很重要。让我们看一下如何使用Jade创建模板的一些基础知识。输出数据
　　Jade提供了多种从变量中输出数据的方式。构建站点模板时最常见的是将标记设置为等于变量的值。例如，以下示例fromtemplatesarticle。jade将文章的标题放置在开始和结束标记中。h2page。title
　　默认情况下，变量的内容在输出之前被转义。这意味着如果它包含HTML，标签将不会在输出中呈现，而是显示为纯文本。当我们需要它们不转义时，我们必须添加一个感叹号，如下例所示templatesarticle。jade：section。content！typogr（page。html）。typogrify（）
　　我们可以对属性做同样的事情。下面的示例templatespartialshomepagemiddle。jade创建一个标签，其href属性等于文章的URL。a（hrefarticle。url，classimagefeatured）
　　如果您对默认情况下在页面对象上提供哪些变量感到好奇，文档会列出它们。我应该注意，article上面的变量不是默认变量，而是循环的结果，我们将在后面讨论。
　　使用Jade输出变量的另一种方法是使用｛variableName｝。当我们这样做时，变量的内容被转义。我们的示例中没有这种方法的示例。
　　如果要输出非转义变量的内容，使用的语法是！｛variableName｝。例如，当我们输出帖子正文的内容时，我们会希望呈现其中的任何标签。一个例子来自templatespartialshomepagemiddle。jade：！｛typogr（article。intro）。typogrify（）｝
　　前一行代码前面的管道表示内容将显示为纯文本。npm模块
　　您可能想知道这些typogrify（）电话的全部内容。嗯，Wintersmith的好处之一是它支持使用npm模块。生成的站点包括三个：typogr（你在上面看到的）；Moment。js（要了解有关Moment的更多信息，您可以阅读文章使用Moment。js管理日期和时间）；和下划线。
　　让我们看看使用Moment。js格式化模板中的日期，如下例所示templatespartialshomepagemiddle。jade：pPostedmoment。utc（article。date）。format（MMMDD，YYYY）
　　Moment。js提供了比格式化更多的功能，所有这些都可以从我们的模板中获得。但是，我们不仅限于Moment。js，因为我们可以将任何npm模块添加到我们网站的require部分，并在我们的模板中使用该模块。config。jsonnpminstall包括
　　我们希望拆分模板以使它们更易于维护和重用。我们可以使用include来做到这一点。此代码templatesindex。jade包含该templatespartialsheader。jade文件（请注意，您不需要。jade文件扩展名）：include。partialsheader
　　Jade还支持继承，可用于创建类似的、单独的和可重用的模板代码块。如果您想了解有关继承的更多详细信息，请查看文档。条件句
　　在某些情况下，您可能希望根据特定条件显示模板的不同方面。这可以使用Jade中的条件来完成。Jade支持if，和elseif，这实际上是。elseunlessif
　　此示例templatespartialsheader。jade仅在我们不在页面上时显示横幅（我们网站中的每个帖子都是一个页面，因此这意味着仅在主页上显示它，index。html）：if！pagesection（idbanner）headerh2ExploretheLandofOoo。。。p。。。anditsmanykingdoms！
　　这个条件也可以写成unlesspage。
　　Jade还支持case语句块。如果您想了解更多信息，请参阅官方文档。循环播放
　　循环是我们在模板中会做的很多事情，无论我们是循环通过帖子还是数据。对于这样的需求，Jade支持each和while循环。
　　下面的示例templatespartialshomepagemiddle。jade使用each循环输出我们所有的字符数据。在主页的中间，我们显示每个字符及其图像、名称和描述。each循环遍历数组中的每个对象并将其分配给我们可以访问其属性的变量character。eachcharacterincontents。charactersp（class4u）section（classbox）span（classimagefeatured）img（srccharacter。metadata。image）headerh3character。metadata。namepcharacter。metadata。description
　　不幸的是，不支持向循环添加限制或偏移量。相反，我们可以通过组合变量和条件来做到这一点。在以下示例中，我们仅显示前两个帖子（类似于限制）。请记住，设置变量（i和articles）的行有一个前缀，表示它们将在编译期间在服务器上运行。这意味着在模板的输出中没有生成相应的代码。vari0vararticlesenv。helpers。getArticles（contents）；eacharticleinarticlesiifi3p（class6u）section（classbox）a（hrefarticle。url，classimagefeatured）img（srcarticle。metadata。banner）headerh3article。titlepPostedmoment。utc（article。date）。format（MMMDD，YYYY）！｛typogr（article。intro）。typogrify（）｝footerul（classactions）lia（hrefarticle。url，classbuttoniconfafiletext）ContinueReading
　　您会注意到我们使用env。helpers。getArticles（contents）；在contentsarticles文件夹中获取文章数组。据我所知，这没有得到很好的记录，但是这种方法来自分页器插件，可以在config。json。
　　本文的下一个示例和最后一个示例使用偏移量和限制进行复制，以在前两篇文章之后显示接下来的五篇文章：vari0vararticlesenv。helpers。getArticles（contents）；eacharticleinarticlesiif（i2）（i8）lispan（classdate）！moment。utc（article。date）。format（MMM）strongmoment。utc（article。date）。format（DD）h3a（hrefarticle。url）article。titleparticle。metadata。shortdesc结论
　　在本文中，我向您介绍了Wintersmith，如果您正在寻找基于Node。js的静态站点生成器，这是一个不错的选择。