pug使用手冊(cè)

---
title: pug使用手冊(cè)
date: 2018.06.17 22:38:00
updated: 2019-01-10 12:00:00
categories:
- web
tags:
- front end
- pug
---
目錄
正文
## 屬性
//表示屬性，用括號(hào)括
a(href='baidu.com') 百度 => <a href="baidu.com">百度</a>


//多個(gè)屬性，可分行寫
input(
  type='checkbox'
  name='agreement'
  checked
)
=> <input type="checkbox" name="agreement" checked="checked" />


//避免沖突，用引號(hào)括
div(class='div-class', (click)='play()')
=> <div class="div-class" (click)="play()"></div>

//是否轉(zhuǎn)義，用感嘆明
div(escaped="<code>") => <div escaped="&lt;code&gt;"></div>
div(unescaped!="<code>") => <div unescaped="<code>"></div>

//布爾屬性，默認(rèn)為真
input(type='checkbox' checked) 
=> <input type="checkbox" checked="checked" />

//樣式屬性，可為對(duì)象
a(style={color: 'red', background: 'green'})
=><a style="color:red;background:green;"></a>

//類名屬性，可字面量
a.button => <a class="button"></a>
//類名屬性，可為數(shù)組
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
=> <a class="bang foo bar baz bing"></a>

//編號(hào)屬性，可字面量
a#main-link => <a id="main-link"></a>
## 分支
//條件表示，使用case
- var friends = 10
case friends
  when 0
    p 您沒有朋友
  when 1
    p 您有一個(gè)朋友
  default
    p 您有 #{friends} 個(gè)朋友
=> <p>您有 10 個(gè)朋友</p>

//分支跳出，使用break
- var friends = 0
case friends
  when 0
    - break
  when 1
    p 您的朋友很少
  default
    p 您有 #{friends} 個(gè)朋友
=>
## 代碼
//是否輸出，否用連號(hào)
- for (var x = 0; x < 3; x++)
  li item
=>
<li>item</li>
<li>item</li>
<li>item</li>

//是否輸出，是用等號(hào)
p= '這個(gè)代碼被 <轉(zhuǎn)義> 了！'
=><p>這個(gè)代碼被 &lt;轉(zhuǎn)義&gt; 了！</p>

//是否轉(zhuǎn)義，否用感嘆
p!= '這段文字' + ' <strong>沒有</strong> 被轉(zhuǎn)義！'
=><p>這段文字 <strong>沒有</strong> 被轉(zhuǎn)義！</p>
## 注釋
//單行注釋，是用行級(jí)
// 一些內(nèi)容
=>
<!-- 一些內(nèi)容-->

//多行注釋，是用塊級(jí)
//
  給模板寫的注釋
  隨便寫多少字
  都沒關(guān)系。
=>
  <!--給模板寫的注釋
隨便寫多少字
都沒關(guān)系。-->

//是否輸出，否用連號(hào)
//- 一些內(nèi)容
=>


//條件注釋，使用原生
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
## 條件
//一般形式，可省括號(hào)
- var user = { description: 'foo bar baz' }
#user
  if user.description
    h2.green 描述
    p.description= user.description
=>
<div id="user">
  <h2 class="green">描述</h2>
  <p class="description">foo bar baz</p>
</div>


//反義條件，用感嘆號(hào)
if !user.isAnonymous
  p 您已經(jīng)以 #{user.name} 的身份登錄。
## 過濾
//渲染
$ npm install --save jstransformer-markdown-it

//行內(nèi)
p
  :markdown-it(inline) **加粗文字**
=>
<p><strong>加粗文字</strong></p>
//嵌套

//自定
options.filters = {
  'my-own-filter': function (text, options) {
    if (options.addStart) text = '始\n' + text;
    if (options.addEnd)   text = text + '\n終';
    return text;
  }
};
p
  :my-own-filter(addStart addEnd)
    過濾
    正文
=>
<p>
  始
  過濾
  正文
  終
</p>
## 包含
//引入內(nèi)容

//絕對(duì)路徑，開頭斜杠
include /root.pug

//無擴(kuò)展名，自動(dòng)加上

//非其語言，當(dāng)純文本
//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 我的網(wǎng)站
    p 歡迎來到我這簡陋得不能再簡陋的網(wǎng)站。
    script
      include script.js
/* style.css */
h1 {
  color: red;
}
// script.js
console.log('真了不起！');

=>
## 繼承
//- layout.pug
html
  head
    title 我的站點(diǎn) - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些頁腳的內(nèi)容



//繼承模板，用擴(kuò)展詞
//- page-a.pug
extends layout.pug

//其代碼塊，子可覆蓋
block scripts
  script(src='/jquery.js')
  script(src='/pets.js')
block content
  h1= title
  - var pets = ['貓', '狗']
  each petName in pets
    include pet.pug
//- pet.pug
p= petName

//其代碼塊，可添加新
//- sub-layout.pug
extends layout.pug

block content
  .sidebar
    block sidebar
      p 什么都沒有
  .primary
    block primary
      p 什么都沒有

//添代碼塊，可在頭部
block prepend head
  script(src='/vendor/three.css')
  script(src='/game.css')

//添代碼塊，可在尾部
block append content
  script(src='/vendor/three.js')
  script(src='/game.js')

//熟添代碼，省關(guān)鍵字
append content
  script(src='/vendor/three.js')
  script(src='/game.js')
## 嵌入
/************字符****************/
//語法形式，用井大括
- var author = "enlore";
p #{author} 筆下源于真情的創(chuàng)作。
=>
<p>enlore 筆下源于真情的創(chuàng)作。</p>

//輸入標(biāo)識(shí)，用反斜杠
p Escaping works with \#{interpolation}
=>
<p>Escaping works with #{interpolation}</p>

//是否轉(zhuǎn)義，否用感嘆
- var riskyBusiness = "<em>我希望通過外籍教師 Peter 找一位英語筆友。</em>";
.quote
  p 李華：!{riskyBusiness}

=>
<div class="quote">
  <p>李華：<em>我希望通過外籍教師 Peter 找一位英語筆友。</em></p>
</div>

/************標(biāo)簽****************/
//語法形式，用井中括
p.
  使用帶屬性的嵌入標(biāo)簽的例子：
  #[q(lang="es") ?Hola Mundo!]
=>
<p>使用帶屬性的嵌入標(biāo)簽的例子：
  <q lang="es">?Hola Mundo!</q>
</p>
## 迭代
## 混合
## 純文
//行內(nèi)純文，標(biāo)簽加空
p 這是一段純潔的<em>文本</em>內(nèi)容.
=>
<p>這是一段純潔的<em>文本</em>內(nèi)容.</p>

//原始內(nèi)容，左尖括頭
<html>
body
  p 縮進(jìn) body 標(biāo)簽沒有意義，
  p 因?yàn)?HTML 本身對(duì)空格不敏感。
</html>
=>
<html>

<body>
  <p>縮進(jìn) body 標(biāo)簽沒有意義，</p>
  <p>因?yàn)?HTML 本身對(duì)空格不敏感。</p>
</body>

</html>

//管道純文，用豎直線
p
  | 管道符號(hào)總是在最開頭，
  | 不算前面的縮進(jìn)。
=>
<p>管道符號(hào)總是在最開頭， 不算前面的縮進(jìn)。
</p>

//標(biāo)簽純文，點(diǎn)號(hào)緊跟
script.
  if (usingPug)
    console.log('這是明智的選擇。')
  else
    console.log('請(qǐng)用 Pug。')
=>
<script>
  if (usingPug)
    console.log('這是明智的選擇。')
  else
    console.log('請(qǐng)用 Pug。')
</script>

//空格控制，推薦方案
## 標(biāo)簽
//表現(xiàn)標(biāo)示，前面為空
ul
  li Item A
  li Item B
  li Item C
=>
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

//嵌套關(guān)系，冒號(hào)內(nèi)聯(lián)
a: img
=>
<a><img/></a>

//是否閉合，用正斜杠
foo(bar='baz')/
=>
<foo bar="baz" />

//是否閉合，可自動(dòng)閉
img
=>
<img/>
## 參考

官方文檔-英文
官方文檔-中文

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容