Pug教程-从入门到入坟

概要

Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。

安装

pug可以通过npm获得：

npm install pug -g
npm install pug-cli -g

命令行

将pug格式转化为HTML的时候输入命令pug -P xxx.pug

自动更新 pug -P -w xxx.pug

有自定义目录的需求，则需要设置-o参数

结构语法

属性

• 基本

a(href='baidu.com') 百度

转化为

<a href="baidu.com">百度</a>

• 多行

input(
  type='checkbox'
  name='agreement'
  checked
)

转化为

<input type="checkbox" name="agreement" checked="checked" />

• 括号引起来

div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

转化为

<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>

分支条件

• case

- var friends = 10
case friends
  when 0
    p 您没有朋友
  when 1
    p 您有一个朋友
  default
    p 您有 #{friends} 个朋友

转化为

<p>您有 10 个朋友</p>

代码

• 不输出代码

- for (var x = 0; x < 3; x++)
  li item

-
  var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

转化为

<li>item</li>
<li>item</li>
<li>item</li>

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

• 转义输出

p= '这个代码被 <转义> 了！'

转化为

<p>这个代码被 &lt;转义&gt; 了！</p>

• 不转义输出

p!= '这段文字' + ' <strong>没有</strong> 被转义！'

转化为

<p>这段文字 <strong>没有</strong> 被转义！</p>

注释

单行注释: // 一些内容 或者 <!-- 一些内容-->
块注释: 	//-
		    给模板写的注释
		    随便写多少字
		    都没关系。	 
条件注释: <!--[if IE 8]>
		    

条件

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

转化为

<div id="user">
  <h2 class="green">描述</h2>
  <p class="description">foo bar baz</p>
</div>

包含

include includes/head.pug
include style.css

迭代

each 和 while

ul
  each val in [1, 2, 3, 4, 5]
    li= val

- var n = 0;
ul
  while n < 4
    li= n++**

转化为

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Mixin

//- 定义
mixin list
  ul
    li foo
    li bar
    li baz
//- 使用
+list
+list

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p 没有提供任何内容。

+article('Hello world')

+article('Hello world')
  p 这是我
  p 随便写的文章

转化为

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>没有提供任何内容。</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>这是我</p>
    <p>随便写的文章</p>
  </div>
</div>

参考文档：https://www.pugjs.cn/api/getting-started.html