Pug的使用
Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。
是一种通过缩进(表示标签间的嵌套关系)的方式来编写代码的过程,在编译的过程中,不需要考虑标签是否闭合的问题。可以加快写代码速度,也为代码复用提供了便捷。
1. 标签
在默认情况下,在每行文本的开头(或者紧跟白字符的部分)书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系,这样可以构建一个 HTML 代码的树状结构。
ul
li Item A
li Item B
li Item C
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
块展开
为了节省空间, Pug 为嵌套标签提供了一种内联式语法。
a: img
<a><img/></a>
自闭合标签
诸如 img
, meta
, 和 link
之类的标签都是自动闭合的(除非您使用 XML 类型的 doctype)。 您也可以通过在标签后加上 /
来明确声明此标签是自闭合的,但请您仅在明确清楚这是在做什么的情况下使用。
foo/
foo(bar='baz')/
<foo/>
<foo bar="baz" />
2. 属性
标签属性和 HTML 语法非常相似,但它们的值就是普通的 JavaScript 表达式。您可以用逗号作为属性分隔符,不过不加逗号也是允许的。
a(href='baidu.com') 百度
a(class='button' href='baidu.com') 百度
a(class='button', href='baidu.com') 百度
上述代码相当于
<a href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
类可以使用 .classname
语法来定义
ID 可以使用 #idname
语法来定义
如果您的属性名称中含有某些奇怪的字符,并且可能会与 JavaScri