wps中wintersmith的使用(wps中wintersmith如何使用)

Wintersmith以Node.js为平台，以npm为平台，它有一个优点，就是安装过程十分简单当用户需要把计算机从一个应用程序下载到另一程序时，就可以用这个方法了。如果你不知道如何使用这两个文件的话，请记住下面这些命令。它们能帮助您完成这项任务你必须执行下列指令才能安装（注:sudo并非Windows中所需要）:

$sudonpminstall-g wintersmith. 

是的-就能去！现在，我们来创造新的项目

为了用Wintersmith建立一个新的网站，键入下面的命令:

$new wintersmith[projectname] NT 

对示例站点我们会赋予该项目的名称wintersmithsite通过分析和计算，可以得出这样一个结论:当系统运行时，Wintshell中所有进程都会产生相同或相近的结果。这是因为这些结果具有很强的相关性、可重复性和可重复性因此，应执行命令如下:

$wintersmithnew wintersmithsite. 

它会产生一个文件夹，里面有给定的项目名称，里面有一大堆文件，大家可以对它们进行修改来着手建设网站

如果看一下产生的文件就可以发现Wintersmith在根级别上放置了配置、模板以及插件，同时把站点文件放置在一个叫做contents的文件夹里

要运行本地服务器中的物品，修改目录，启动预览:

cdwintersmithsitewintersmithpreview.

默认本地服务器是在8080端口上运行的，所以大家可以浏览http://localhost:8080.·p我们可利用此选项来指定各种端口但是如果用户需要访问另外一个或多个网络中的其它站点时，则必须选择另一种类型的端口。这种方式通常会导致不一致的结果，而且还可能影响到整个系统的性能另外，预设服务器为细节，会输出细节错误消息到控制台，以及载入资源服务器有很多其它的选择。我们可透过输入指令学习:

PreparationofWintersmith-help

这些方案还可将config.json设置到被称为的站点配置文件上，但是当前，默认值应能够正常运行

Wintersmith预设以Jade为自己的模板语言这使得该程序具有很高的通用性和可重用性，并且能够方便地扩展到其他领域中去。但是，对于一些特定的应用而言，WPS仍然是一个不错的选择这个教程会用到，但是如果你喜欢各种模板语言的话，Wintersmith就会拥有许多可供利用的插件

Jade允许用户在任何时候都可以创建模板

在构造站点模板过程中，最为常用的方法就是把标记设成一个与变量相等的数值如下面的例子

fromtemplates.article.jade把文章题目置于开头与结尾的

h2=page.title

默认是变量内容先转义再输出但如果我们想表达出特定信息的话，则可以把它转换成HTML文档（图1），这样就能够避免转换过程中出现的歧义现象。这个转化是基于HTML来实现的这就意味着若其中含有HTML，则标签就不会以纯文本的形式呈现于输出上在我们要求他们不要转义的时候，就得加上感叹号。下面的例子是templates.article.jade

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

对于属性，我们也能做到这一点现举例如下

templates/partials/homepagemiddle.jade创建一个标签，其href属性等于文章的URL.

a(href=article.url，)

如果你好奇默认的页面对象中提供了什么变量，那么文档将罗列这些变量但是您是否想过这样做:当我们要使用一个新的应用时，就可以创建一个与之相关的函数来调用它

用Jade来输出变量还有一个办法就是用#{variableName}，在做这个工作时就会转义出变量内容在这篇文章里，我们将讨论如何应用这个方法来解决一个实际问题:用两个不同的语言输入到计算机上，然后计算出它们之间的相似度并进行比较。这是一个简单且容易实现的算法在我们的例子中，并不存在这样一个办法的例子

我们可以使用一个或多个非转义变量来表示用户输入到页面上的信息这样就可以让用户通过简单地输入关键词来表达自己的想法和观点了。在这篇文章中我们将探讨如何实现这种功能，并且展示一些实例来说明它们{variableName}。比如，在输出帖子正文中，我们想在帖子正文中显示任何一个标签其中之一源于

templates/partials/homepagemiddle.jade:

|! $typogr(article.intro).typogrify()GN

在上一行编码之前的管道指示内容会以纯文本形式呈现

您还可以访问一个类似于WintersmitH的网站，它提供了一个新功能:npm模块所产生的网站有3个:typogr（上图）、Moment.js（如果想知道关于Moment更多的内容，可以看文章用Moment.Js来管理日期、时间）、以及下划线等

我们先来看一下用Moment.js格式化模板的时间，下面举例说明

templates/partials/homepagemiddle.jade:

p="Posted"+moment.utc(article.date).format("MMMDD，YYYY")

与格式化相比，Moment.js所提供的特性更加丰富，而这一切均可在我们模板上实现如果我们能很方便地把自己设计好的网页上传到网络中去，就会使我们的工作事半功倍。在此，我向大家介绍如何用PHP语言来创建一个简单易用的web页面模板但我们并不局限于Moment.js.因为我们能把任何一个npm模块加入到我们站点require的一部分并且把这个模块用于我们的模板

希望通过对模板的拆分，使得模板更加容易维护与复用我们用include就能实现这个目标通过这种方法，每个组件都是一个独立的对象并且只需要对其进行简单地操作就能够实现整个系统。最后我们在实验中验证了本文所提出算法的正确性和可行性这个代码templates.index.jade中就含有这个

templates-partials-header.jade（注:你并不需要。jade是文件的扩展名

include./partials/header

Jade也支持继承，可用来创建相似，独立，复用模板代码块在Jade看来，"继承"是一个非常有用的概念，它能够帮助用户快速地开发出适合他们自己的应用程序，并使其具有可移植性。在这里我们将提供一些关于继承的知识如要知道关于继承方面的更多细节，请参阅文件

有些时候，你可能会想按照具体的条件来展示模板中不同的部分这可在Jade上利用条件Jade赞成if，而else的if，其实也一样jade的扩展应用。Jade允许用户对屏幕上所有元素进行选择（例如颜色），并能将其组合到指定区域内。因此，这种技术可用于许多场合。但是有一些问题需要解决

这个例子

templates.partials.header.jade只有当我们没有网页时才会展示横幅（我们站点上的每一个贴子就是一个网页，所以这就意味着只有主页才会展示横幅。index.html:

if!page="banner")headerh2ExploretheLandofOoo...p...anditsmanykingdoms!

此条件亦可写为unlesspage

Jade和case语句块间的关系也是如此我们希望通过这些建议能够帮助读者提高写作水平。我们期待着能有更多的朋友加入到这个行列中去！欢迎大家踊跃参与讨论。也请大家把自己的想法告诉我们吧！我们可以把它应用到其他领域中去，比如:网站的更新和维护、网页的优化等方面，这些都需要大量的信息来支撑，而这些信息往往都来自于用户提交给我们的各种官方文档

针对这一要求，Jade既支持each循环，也支持while循环

现举例如下

templates，partials，homepagemiddle，jade，利用each循环，将我们的字符数据全部导出我们把一个页面分成多个部分，每一部分都有相应的类以及与之对应的表结构。通过这些表来控制页面上不同元素之间的相互关系，从而达到网页布局的目的在首页正中，我们展示了每一个字符，以及他们的形象，姓名，说明each循环往复地遍历数组的每一个对象，并且把它们赋值到我们能够访问它们的属性（character）上

eachcharacterincontents.charactersdiv()section()span()img( src=character.metadata.image)headerh3=character.metadata.namep=character.metadata.description

很遗憾，没有支持在循环中加入约束和偏移量在一些情况下，当使用一个组合变量时，可以将条件和约束分开考虑这一点下面的例子只展示了前面的2个帖子（类似限制）记住设置变量的行（i与articles之间）具有前缀--指示编译时他们会在服务器中运行如果这些页面被执行，那么所有的数据就会自动地被存储到内存数据库中。然后，当需要时，用户可从其客户端下载该信息以进行应用开发。但这不是最终结果这表示模板输出时不产生对应代码

-vari=0-vararticles=env.helpers.getArticles(contents)；eacharticleinarticles-i++ifi3div()section()a(href=article.url，)img( src=article.metadata.banner)headerh3=article.titlep="Posted"+moment.utc(article.date).format("MMMDD，YYYY")|!{typogr(article.intro).typogrify()}footerul()lia(href=article.url，)ContinueReading

你会发现，我们用env.helpers.getArticles；contents/articles文件夹下的文章数组然后将它们与正文一起保存在文本文件上。如果有一个文档是用文本来表示的，则可以直接从这些文本文件里提取出所需信息。这是一种非常有效的方式就我所知，它还未被很好地记录下来，但该方法从分页器插件中获取，并可用于config.json中

文中下一实例及上一实例采用了偏移量及限制来再现，以便在前面2篇文章后展示后面5篇文章:

-vari=0-vararticles=env.helpers.getArticles(contents)；eacharticleinarticles-i++if(i2)&；&；(i8)lispan()!=moment.utc(article.date).format("MMM")strong=moment.utc(article.date).format("DD")h3a(href=article.url)=article.titlep=article.metadata.shortdesc

在这篇文章里我给大家介绍Wintersmith.如果你是以Node.js为平台来搜索静态站点生成器的话这是个很好的疡