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, 模板引擎

版权声明

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

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部