每星期撷取新一代，最盛行的软件设计科学知识与新一代金融行业态势，期望我们能全屏帕西基，喔全力支持，下跪关注，点赞，回帖。

Pug（从前称作 Jade）是两个预CPU，它精简了撰写 HTML 的各项任务。它还加进了大批机能，比如第一类、前提、循环式、混和和模版。能说，该句法写作出来要整洁得多，因此在处置大批 HTML（特别是 Bootstrap、Foundation 等架构）时能或者说节省成本。

让他们看一看许多 Pug 句法并将其与常规性 HTML 展开较为。

// index.pug doctype html html(lang=en) head title Pug demo body h1 Welcome to Pug Life div.container p Im a p that needs to be contained!

特别注意他们须要采用缩进去冗余他们的 HTML。因此缺乏完结条码！

这是国际标准的 HTML 输入：

Pug demo

Welcome to Pug Life

相对而言，他们的 pug 标识符要简约得多。除此之外，假如他们的标识符任何人严重错误，编译器会放出严重错误——这有利于避免严重错误。

因此让他们已经开始吧！

怎样加装长瓣

特别注意：您须要加装 NodeJS！假如您还没加装，请竭尽全力加装。

要加装 pug，请从终端产品运转下列指示：

npm install -g pug-cli

他们采用全局加装，-g因为他们须要从终端产品访问 Pug 指示。

现在在他们的根目录中，创建两个名为index.pug.

让他们测试一下！将下列文本加进到他们的文件中，如下所示：

// file: index.pug doctype html

并让他们采用下列指示将其编译为 HTML：

pug index.pug

他们现在应该index.html在根目录中看到他们生成的。它当然会转换为 HTML，如下所示：

// file: index.html

在处置较大的项目时，您可能期望采用更具体的编译指示，比如：

pug -w ./-o ./html -P

该-w标志将监视他们的 pug 文件的更改，并在每次保存时自动重新编译。./将监视当前目录中的所有内容。-o ./html将输入文件夹设置为 html。-P将使他们的 HTML 源标识符打印得很漂亮，带有缩进、换行等。

特别注意：执行此指示后，请保持终端产品运转以竭尽全力自动编译！

基础科学知识

让他们已经开始了解基本的 HTML 结构。在您的index.pug.

doctype html html head body h1#title Lets get pugging! p Im a paragraph p. Im a multi-line paragraph! And this is the second line. p.para. This paragraph has class!.firstDiv A div with a class.#secondDiv A div with an id.

特别注意缩进的采用！确保您标记您的子元素。

当你保存并打开时，index.html.你会看到像这样生成的完整 HTML。

Lets get pugging!

Im a paragraph

Im a multi-line paragraph! And this is the second line.

This paragraph has class!

属性

让他们看一下在 pug 中设置属性的许多句法。

doctype html html head //- Invisible comment.//Visible comment. script(src=”script.js”) link(rel=stylesheet, href=css/main.css) body a(href=”https://google.com”) google.com img(src=”https://google.com/logo.png” alt=”google logo”) input(type=”password” name =”inputpass”) input(type=checkbox checked) input(type=checkbox checked=true) input(type=checkbox checked=false)//Inline styles a(href=”your-link”, style={color:”Red”,”font-size”:”24px”}) Im a link!

他们的 HTML 将生成如下：