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

详情请看：pug: command not found

二. 代码编辑器优化

1. sublime，可以在package control->install package中安装pug

2. 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 htmlhtml    head            title hello pug     body        h1 pug pug

使用命令：

pug -P -w index.pug

编译后的结果为：

    hello pug     # pug pug

1.类名和ID名

a.buttona(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.注释

1. 单行注释

// just some paragraphs

1. 非缓冲注释

//- will not output within markup

不会被编译到HTML

1. 块注释

第一种body  //    As much text as you want    can go here.第二种   

1. 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= nameul  +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('https://segmentfault.com/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. 1  1. 2  1. 3  1. 4

四.参考资料

1. jade-lang

2. Github·Pub

3. Scott 《带你学习Jade模板引擎》

关键字：jade, node, 模板引擎

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！