2018-10-23日

19 分钟读完 (大约 2776 个字)

pug模板引擎（下）

逻辑语法

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

JavaScript代码

不输出的代码

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

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= '这个代码被 <转义> 了！'


<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日

Hexo

12 分钟读完 (大约 1816 个字)

pug模板引擎(上)

安装

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

生成HTML

新建文件命名为index.pug

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,你可以让你的编辑器左右两边显示，方便实时查看。

pug