从html到pug模板,html 模板 pug
Pug原名不叫Pug，原来是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。以下是官方解释：
it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project.
其实只是换个名字，语法都与jade一样。
1. Pug安装编译的二三事
开始安装之后
npm install -g pug
运行一下代码
pug index.pug
结果显示：
bash: pug: command not found
找了网上很多内容和教程，大部分都是关于jade的，去Github看了一下官方的讨论区，才知道
You need to install pug-cli. The CLI was separated from the core library as part of this release.
所以,成功解决问题
npm install -g pug-cli
二. 代码编辑器优化
sublime，可以在package control->install package中安装pug
webStrom，如果出现Invalid indentation,you can use tabs or spaces but not both错误，可以参考这篇文章[Jade报错：Invalid indentation,you can use tabs or spaces but not both问题
](http://blog.csdn.net/greenqin... PS:学生可以凭借edu邮箱免费使用正版
三. 基础语法知识
一段简单的代码
doctype html
html
head
title hello pug
body
h1 pug pug
使用命令：
pug -P -w index.pug
编译后的结果为：
hello pugpug pug
1.类名和ID名
a.button
a(class="button")
编译后：
ID类似
2.属性
属性可以使用()包裹起来,属性值之间用逗号隔开
比如
a(href="google.com",title="google")
3.文本内容
a(href="google.com",title="google") Hello World
多行文本内容
p.
asdfasdfa
asdfasd
adsfasd
asdfasdfa
或者
p
| dfas
| dfas
| dfas
文本含有标签
p
| dfas hey
| dfas
| dfas
或者
p
| dfas hey
strong hey man
| dfas
| dfas
4.注释
单行注释
// just some paragraphs
非缓冲注释
//- will not output within markup
不会被编译到HTML
块注释
第一种
body
//
As much text as you want
can go here.
第二种
IE注释
5.变量
-var Pug="hello world"
title #{Pug}
转义
-var htmlData='sdf'
p#{htmlData}
p!=htmlData
非转义
-var htmlData='sdf'
p !{htmlData}
p=htmlData
编译前的代码
p \#{htmlData}
p \!{htmlData}
没有的变量赋值
p=data;
是空值而不是undefined
6.流程代码
-var array=[1,2,3,4]
-for (var k in imooc)
p=array[k]
-each k in array
p:#{k}
-while
-var array=[1,2]
if array.length>2
p true
else
p false
unless 为false，才执行，用法与if类似
-var array=[1,2]
unless !istrue
p hello
switch的功能
-var name='java'
case name
when 'java': p Hi,java
case name
when 'pug': p Hi,pug
default
p Hi
7.mixins
1.重复的代码块
mixin sayHi
p hello everyone
+sayHi
编译后
hello everyone
2.传入参数
mixin pet(name)
li.pet= name
ul
+pet('cat')
3.blocks
mixin article(title)
.article
h1= title
if block //是否有包含内容
block
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
编译后：
Hello world
No content provided
Hello world
This is my
Amazing article
4.Attributes
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn")
attributes已经转义，所以应该使用！=避免二次转义
编译后:
foo
5.不确定参数
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list('my-list', 1, 2, 3, 4)
参数中要加入...，编译后：
- 1
- 2
- 3
- 4
四.参考资料
Scott 《带你学习Jade模板引擎》