Pug模板（一）

時間 2019-11-07

標籤 pug 模板简体版

原文原文鏈接

Pug原名不叫Pug，原來是大名鼎鼎的jade，後來因爲商標的緣由，改成Pug，哈巴狗。如下是官方解釋：html

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同樣。java

1. Pug安裝編譯的二三事

開始安裝以後git

npm install -g pug

運行一下代碼github

pug index.pug

結果顯示：web

bash: pug: command not found

找了網上不少內容和教程，大部分都是關於jade的，去Github看了一下官方的討論區，才知道npm

You need to install pug-cli. The CLI was separated from the core library as part of this release.

因此,成功解決問題bash

npm install -g pug-cli

詳情請看：pug: command not foundless

二. 代碼編輯器優化

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郵箱無償使用正版編輯器

三. 基礎語法知識

一段簡單的代碼ide

doctype html
html
    head
            title hello pug 
    body
        h1 pug pug

使用命令：

pug -P -w index.pug

編譯後的結果爲：

<!DOCTYPE html>
<html>
  <head>
    <title>hello pug </title>
  </head>
  <body>
    <h1>pug pug</h1>
  </body>
</html>

1.類名和ID名

a.button
a(class="button")

編譯後：

<a class="button"></a>
<a class="button"></a>

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 <strong>hey</strong>
    | dfas
    | dfas

或者

p
    | dfas <strong>hey</strong>
        strong hey man
    | dfas
    | dfas

4.註釋

a. 單行註釋

// just some paragraphs
<!-- just some paragraphs-->

b. 非緩衝註釋

//- will not output within markup

不會被編譯到HTML
c. 塊註釋

第一種
body
  //
    As much text as you want
    can go here.
第二種   
<body>
  <!--
  As much text as you want
  can go here.
  -->
</body>

d. IE註釋

<!--[if IE 8]><html class='ie8'><[endif]-->
<!--[if IE 9]><html class='ie9'><[endif]-->
<!--[if IE ]><html class='ie8'><[endif]-->

5.變量

-var Pug="hello world"
 title #{Pug}

轉義

-var htmlData='<strong>sdf</strong>'
p#{htmlData}
p!=htmlData

非轉義

-var htmlData='<strong>sdf</strong>'
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

編譯後

<p>hello everyone</p>

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

編譯後：

<!--若是節點裏面沒有內容，就加上-->
<div class="article">
    <h1>Hello world</h1>
    <p>No content provided</p>
</div>
<div class="article">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
</div>

4.Attributes

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

attributes已經轉義，因此應該使用！=避免二次轉義
編譯後:

<a href="/foo" class="btn">foo</a>

5.不肯定參數

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)

參數中要加入...，編譯後：

<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

四.參考資料

jade-lang
Github·Pub
Scott 《帶你學習Jade模板引擎》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。