pug模板引擎（下）

2018-10-23 · 大约 1500 个字 · 预计 8 分钟读完

逻辑语法

以下是关于模板逻辑的语法。

用 - 开始一段不直接进行输出的代码。

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

生成后

1
2
3
<li>item</li>
<li>item</li>
<li>item</li>

用=开始一段带有输出的代码，它应该是可以被求值的一个 JavaScript 表达式。为安全起见，它将被 HTML 转义。

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

生成后

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

用 != 开始一段不转义的，带有输出的代码。这将不会做任何转义，所以用于执行用户的输入将会不安全。

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

生成后

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

2018-10-22 · 大约 600 个字 · 预计 3 分钟读完

1
sudo npm install pug

但命令行提示 pug 命令未找到，接下来安装 pug-cli,注意一定要全局安装，否则无法正常编译。

1
sudo npm install pug-cli -g

查看版本

1
2
3
>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

新建文件命名为index.pug

1
2
3
4
html
    head
        title dp2px
    body

在命令行输入

1
2
>>> $ pug index.pug 
rendered index.html

你会发现在同目录生成了一个 index.html 文件，内容如下

1
<html><head><title>dp2px</title></head><body></body></html>

接下来我们使用pug -w实现自动编译。

1
>>> $ pug index.pug -w

我使用的 VS Code,你可以让你的编辑器左右两边显示，方便实时查看。