Pug

简介

Pug,原名 Jade, 是一个很流行的 HTML 模板引擎,后来由于 Jade 被注册为商标的原因,改名为 Pug,中文官网在这里。

安装和使用

npm install pug -g

如果需要使用命令行对 pug 模板进行编译,还需要安装 pug-cli

npm install pug-cli -g

Pug 和原来用过的 Smarty 模板、Ractive 模板类似,都是通过一个函数(Pug中是 pug.compile())将模板便以为 JavaScript 函数,函数中通过{}传入变量。最终编译结果就是 HTML 代码。

创建一个 hello.pug

div
  p Hello Pug

在命令行输入:

pug hello.pug -w

就会编译出 hello.html

<div>
  <p>Hello Pugp>
<div>

其中 -w 选项为监听模式,自动相应模板的改动并且实时编译

使用 pug --help 查看命令行帮助

看一些基本的用法:

# 编译 templates 文件夹下所有模板
$ pug templates

# 编译 foo 文件夹下和 bar 文件夹下的模板至 tmp 文件夹(绝对路径)
$ pug foo bar --out /tmp

# 编译 foo.pug 并美化 html 代码
$ pug foo.pug -P

在 webtorm 中配置 pug 的 watcher

Pug_第1张图片

关键点就是找到 pug.cmd 文件的全局位置:

C:\Users\xxxxx\AppData\Roaming\npm\pug.cmd

其中 xxxx 是用户名

这样在 pug 模板的同级目录下, websotrm就会自动编译一份 HTML

这样的缺点是代码的格式还需要手动调整,并且 pug 文件改变,HTML 格式又自动变回去了

在 Arguments 增加 -P 参数也同样可以美化代码

在线转换

html2jade 这个网站可以在线将 HTML 代码转换为 jade 代码

语法

基础

pug 模板中省略了 HTML 中的标签<>,并且使用缩进代表包含关系,标签后空格内容表示标签中内容

doctype  html
head
  meta(charset='utf-8')
  title Hello Pug
body
  div
    p Hello Pug

编译结果


<head>
  <meta charset="utf-8">
  <title>Hello Pugtitle>
head>
<body>
  <div>
    <p>Hello Pugp>
  div>
body>

标签

Pug知道那个元素自闭合的,当然如果想要手动添加,可以直接在标签后紧接一个 / 来声明此标签是自闭合的

label
  input(type="text")/

: 是一种省略写法,目的仅仅是节省空间

label: input(type="text")/

属性

HTML 标签中的属性用 () 包围起来,属性之间用 , 隔开,属性值用 ‘’包裹

a(href='//www.baidu.com', title='百度一下') 百度一下

编译后:

<a href="//www.baidu.com" title="百度一下">百度一下a>

文本

上面提到了,利用空格分割表示文本,多行文本需要在标签后加 ., 文本内容保持同样缩进

如果文本中还包含标签,则需要直接添加标签

p.
  line1
  line2
  line3 <strong>strongstrong>

编译后

<p>
  line1
  line2
  line3 <strong>strongstrong>
p>

这种情况一般适用于大段文字的例子,比如

你可能感兴趣的:(其他)