Pug学习笔记

安装
概要
API参考文档
语法

安装

npm install pug

概要

pug.compile() 会把Pug代码编译成一个JavaScript函数, 并且这个函数带有一个参数.

编译出来的函数可以重复使用, 可以传入不同的数据.

// template.pug
p #{name}的 Pug 代码！

const pug = require('pug');

// 编译这份代码
const compiledFunction = pug.compileFile('template.pug');

// 渲染一组数据
console.log(compiledFunction({
  name: '李莉'
}));
// "<p>李莉的 Pug 代码！</p>"

// 渲染另外一组数据
console.log(compiledFunction({
  name: '张伟'
}));
// "<p>张伟的 Pug 代码！</p>"

Pug提供了 pug.render() 系列函数, 它们把编译和渲染两个步骤合二为一.

const pug = require('pug');

// 编译并使用一组数据渲染 template.pug
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy 的 Pug 代码！</p>"

API参考文档

https://pugjs.org/zh-cn/api/reference.html

语法

属性

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

// 相当于

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

还能使用表达式:

//- 已登录
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

// 相当于

<body class="authed"></body>

在属性中使用变量

var btnType = 'info'
var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

// 两种写法都相当于

类的字面值

类可以使用 .classname 语法来定义:

a.button

//  相当于

<a class="button"></a>

div 较常用, 可以直接写成:

.content

//  相当于

<div class="content"></div>

ID的字面值

ID可以使用 $idname 语法来定义:

a#main-link

// 相当于

<a id="main-link"></a>

同样, 由于 div 太常见, 所以可以直接写成:

#content

//  相当于

<div id="content"></div>

分支

https://pugjs.org/zh-cn/language/case.html

代码

用 = 开始一段带有输出的代码, 它将被HTML转义:

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

// 或者

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

// 相当于

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

!= 表示开始一段不转义的, 带有输出的代码.

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

// 相当于

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

推荐使用带转义的输出.

条件

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

include 允许我们把其他文件的内容插入进来.

index.pug

doctype html
html
  include includes/head.pug
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug

includes/head.pug

head
  title 我的网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

includes/foot.pug

footer#footer
  p Copyright (c) foobar

相当于:

<!DOCTYPE html>
<html>

<head>
  <title>我的网站</title>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/app.js"></script>
</head>

<body>
  <h1>我的网站</h1>
  <p>欢迎来到我这简陋得不能再简陋的网站。</p>
  <footer id="footer">
    <p>Copyright (c) foobar</p>
  </footer>
</body>

</html>

包含纯文本

如果被包含的不是Pug文件, 那只会当做文本内容来引入.

index.pug

doctype html
html
  head
    style
      include style.css
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    script
      include script.js

style.css

h1 {
  color: red;
}

script.js

console.log('真了不起！');

相当于:

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

<body>
  <h1>我的网站</h1>
  <p>欢迎来到我这简陋得不能再简陋的网站。</p>
  <script>
    console.log('真了不起！');
  </script>
</body>

</html>

模板继承(block, extends)

Pug支持使用 block 和 extends 关键字进行模板的继承.

layout.pug

html
  head
    title 我的站点 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些页脚的内容

现在, 使用 extends 扩展该布局, 然后对于那些要重写的 block, 我们只要重新定义, 就能覆盖父模板里的"父块".

extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['猫', '狗']
  each petName in pets
    include pet.pug

pet.pug

p= petName

由于没有重写 foot 块, 因此依然会输出"一些页脚的内容".

嵌入

#{} 中间的值会被求值.

Pinvon's Blog

Pug学习笔记

Table of Contents

安装

概要

API参考文档

语法

属性

在属性中使用变量

类的字面值

ID的字面值

分支

代码

条件

include

包含纯文本

模板继承(block, extends)

嵌入

Comments