網頁模板pug基本語法

該博客首發於www.litreily.top

Pug – robust, elegant, feature rich template engine for Node.js

pug原名jade,因版權問題改名爲pug,即哈巴狗。與hexo默認模塊ejs同樣，pug也是一個模板引擎，可用於快速的網站開發，固然也能夠用於靜態博客網站的設計。本站點現時所用主題manupassant也使用了pug。

本文針對Hexo中使用pug的狀況爲例，說明其基本語法。

安裝

# common install
npm install pug

# install for hexo blog
npm install hexo-renderer-pug --save
複製代碼

語法

pug不一樣於html，前者不須要標籤的開和閉，如html的<p>Demo</p>，在pug使用p Demo便可。

縮進

pug對空格敏感，有點相似python對製表符tab敏感。pug使用空格做爲縮進符，固然用soft tab也可行。同一級標籤需保證左對齊。

div
    p Hello, world!
    p Hello, pug.
複製代碼

渲染結果以下：

<div>
    <p>Hellow, world!</p>
    <p>Hello, pug.</p>
</div>
複製代碼

註釋

pug使用//-或//對代碼進行註釋，前者註釋內容不出如今渲染後的html文件中，後者反之。

//- html中不包含此行
// html中會包含此行
複製代碼

屬性

pug將標籤屬性存放於括號()內，多個屬性之間以逗號或空格分隔。此外，對於標籤的id和class，pug使用#緊跟標籤id,使用.緊跟標籤class，能夠同時設置多個class。

h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")
複製代碼

↓

<h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">
複製代碼

包含

爲了方便代碼複用，pug提供了include包含功能，如下代碼會將_partial目錄下的head.pug文件內容包含到當前調用的位置。有點C/C++中內聯函數的意思。

doctype html
html(lang='en')
    include _partial/head.pug
複製代碼

繼承

下面是一個簡單的base模板，經過block定義了頁面頭部head和內容body。塊block有點相似C/C++的抽象函數，須要在繼承者中完成定義，填充具體內容。

//- base.pug
html
    head
        block title
    body
        block content
複製代碼

如下文件使用extends繼承以上模板，經過block覆蓋或替換原有塊block。固然，繼承者也能夠在原有基礎上繼續擴展。

//- index.pug
extends base.pug

block title
    title "Test title"

block content
    h1 Hello world!
    block article
複製代碼

定義變量

pug中經過- var name = value的形式定義變量

- var intData = 100
- var boolData = false
- var stringData = 'Test'
p.int= intData
p.bool= boolData
p.stringData= stringData
複製代碼

需注意的是，在引用變量時，須要在引用位置加上=號，不然會默認將變量名當成普通字符串使用。

若是想要將變量與其它字符串常量或是變量鏈接在一塊兒，就不能用等號了，而是應該用#{}，該符號會對大括號內的變量進行求值和轉義，最終獲得渲染輸出的內容。

- var girl = 'Lily'
- var boy = 'Jack'
p #{girl} is so beautiful!
p And #{boy} is handsome.
複製代碼

條件結構

pug的條件語句與其它語言相似，均是以下這般：

- var A = {value: 'Test'}
- var B = true
if A.value
    p= A.value
else if B
    p= B
else
    p nothing
複製代碼

迭代

pug中使用each和while實現循環迭代，each能夠返回當前所在項的索引值，默認從0開始計數。

//- each
ol
    each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
        li= item

//- get index of each
- var week = ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
ol
    each item, index in week
        li= index + ':' + item
複製代碼

↓

<ol>
  <li>Sun</li>
  <li>Mon</li>
  <li>Tus</li>
  <li>Wen</li>
  <li>Thu</li>
  <li>Fri</li>
  <li>Sat</li>
</ol>
<ol>
  <li>0:Sun</li>
  <li>1:Mon</li>
  <li>2:Tus</li>
  <li>3:Wen</li>
  <li>4:Thu</li>
  <li>5:Fri</li>
  <li>6:Sat</li>
</ol>
複製代碼

while調用方式以下：

//- while
- var day = 1
ul
    while day < 7
        li= day++
複製代碼

Minix

mixin名曰混入，相似其它編程語言中的函數，也是爲了代碼複用，可帶參數或不帶參數，定義方式以下：

mixin menu-item(href, name)
    li
        span.dot ●
        a(href=href)= name
複製代碼

其中，menu-item爲調用時所用名稱，可認爲是函數名，href及name是參數。同上定義變量所說，a(href=href)= name中第二個=是爲了將後面的name看成參數來處理，而不是看成字符串"name"來處理。

調用mixin定義的代碼塊，需經過+號緊跟mixin名稱及參數:

+menu-item('/Archives','Archives')
+menu-item('/About','About')
複製代碼

mixin之因此稱爲混入，是由於其語法不侷限於函數調用，在mixin可使用塊block

mixin print(post)
    if block
        block
    else
        p= post

+print("no block")
+print("")
    div.box
        p this is the content of block
複製代碼

↓

<p>no block</p>
<div class="box"><p>this is the content of block</p></div>
複製代碼

JavaScript

注意如下pug語句中第一行的.號。

script(type='text/javascript').
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')
複製代碼

↓

<script type='text/javascript'>
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')
</script>
複製代碼

對於簡單腳本，使用pug尚可，複雜的仍是單獨寫到.js文件中，而後經過pug引用方便一些，引用方式以下：

script(type='text/javascript', src='/path/to/js')

//- with hexo function url_for
script(type='text/javascript', src=url_for(theme.js) + '/ready.js')
複製代碼

hexo 相關

在hexo主題中使用pug時，能夠經過使用hexo提供的全局變量config，theme來分別調用博客根目錄下_config.yml文件中的參數以及主題根目錄下_config.yml文件中的參數。

//- blog config
p= config.description

//- theme config
p= theme.title
複製代碼

固然，pug中能夠直接使用hexo提供的其它全局變量及輔助函數，使用方法詳見hexo的文檔

示例

//- head.pug
head
    meta(http-equiv='content-type', content='text/html; charset=utf-8')
    meta(content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', name='viewport')
    meta(content='yes', name='apple-mobile-web-app-capable')
    meta(content='black-translucent', name='apple-mobile-web-app-status-bar-style')
    meta(content='telephone=no', name='format-detection')
    meta(name='description', content=config.description)
    block title
    link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/style.css' + '?v=' + theme.version)
    link(rel='Shortcut Icon', type='image/x-icon', href=url_for('favicon.png'))
    script(type='text/javascript', src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js')
    block more
複製代碼

//- base.pug
doctype html
html(lang='en')
    include _partial/head.pug
    block more
        link(rel='stylesheet', type='text/css', href=url_for(theme.plugins) + '/prettify/doxy.css')
        script(type='text/javascript', src=url_for(theme.js) + '/ready.js' + '?v=' + theme.version, async)
    
    //- body
    body: #container.box
        .h-wrapper
            include _partial/nav-menu.pug
        // article content
        block content

        include _partial/footer.pug
複製代碼

其中:

• theme.*爲主題配置文件_config.yml中的參數
• url_for爲hexo提供的用於查找資源路徑的函數

總結

pug提供了包含，繼承，Mixin等多種方式用於代碼複用，語法簡潔易懂，除了初學時需花費一些時間學習各類標點符號的含義外，其它倒也沒有太大困難。

固然啦，pug還有許多其它特性，但就我目前使用狀況而言，以上這些便已足夠。

參考

• pugjs.org/zh-cn/api/g…
• hexo.io/zh-cn/docs/