pug的安裝與使用

dantezhao 發(fā)布于2019-08-02 11:09 / 2636人閱讀

摘要：說明原名不叫，是大名鼎鼎的，后來由于商標(biāo)的原因，改為，哈巴狗。其實只是換個名字，語法都與一樣。丑話說在前面，有它本身的缺點可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開發(fā)效率。本文將詳細(xì)介紹模板引擎。

說明 Pug原名不叫Pug，是大名鼎鼎的jade，后來由于商標(biāo)的原因，改為Pug，哈巴狗。其實只是換個名字，語法都與jade一樣。丑話說在前面，Pug有它本身的缺點——可移植性差，調(diào)試?yán)щy，性能并不出色，但使用它可以加快開發(fā)效率。本文將詳細(xì)介紹pug模板引擎。安裝

    1.sudo npm install jade -g
    2.sudo yarn global add jade

常用命令 普通編譯，會在同目錄下生成編譯后的 test.html 文件

 jade test.jade
    # --pretty | -P (大寫) 美化輸出的 html  使之帶有縮進(jìn)等
    jade -P test.jade
    # --out | -o   將編譯后的 html  輸出到指定文件夾
    jade -P test.jade --out ./output
    # --obj | -O   向 jade 模板中傳遞變量，需要傳遞一個 json 或者一個 json 文件的路徑
    jade -P --obj "{testName: "this is tetsName"}" test.jade
    jade -P -O ./config.json test.jade
    # --watch | -w 監(jiān)聽文件變化，自動重新編譯
    jade -P -w test.jade

標(biāo)簽

jade 中的標(biāo)簽不再含有 html 中的尖括號，直接寫標(biāo)簽名即可，無論單雙標(biāo)簽，只寫以這個標(biāo)簽名；

標(biāo)簽間嵌套關(guān)系使用縮進(jìn)加換行實現(xiàn)；

標(biāo)簽后第一個空格后邊的內(nèi)容會被編譯成標(biāo)簽內(nèi)的文本內(nèi)容

doctype html
html(lang="en")

   head
       title Document
   // 通過換行加縮進(jìn)實現(xiàn)標(biāo)簽嵌套
   body 
       p 標(biāo)簽后的文本
       // 通過 ‘:’ 實現(xiàn)行內(nèi)的嵌套 
       p: a 文本
       // 自定義的標(biāo)簽加上 ‘/’ 表示自閉和標(biāo)簽（html 默認(rèn)自閉和標(biāo)簽可以不用）
       foo/

屬性一般屬性要添加在緊挨標(biāo)簽的括號里() ，多個屬性用 , 隔開，() 內(nèi)實際上是一個 javascript 的環(huán)境，可以在這里進(jìn)行基礎(chǔ)的運算

 body 
        // ‘=’ 鏈接屬性和值，多個屬性用 ‘,’ 隔開
        p: a(href="www.baidu.com", target="_blank") 鏈接 
        // 屬性中可以做基礎(chǔ)的 javascript 計算
        p
            - var link = "www.baidu.com"
            a(href=link.toUpperCase()) 鏈接
        // 屬性多的時候可以換行，這個時候可以不用逗號分隔
        p: input(
            type="checkbox"
            name="chexkbox"
            checked=true
        ) 
        p(content="
") 偽代碼 ‘=’ 默認(rèn)是轉(zhuǎn)義的
        p(content!="
") 偽代碼 "!=" 表示不轉(zhuǎn)義

class 與 style 屬性

body
        // 使用 "." 鏈接標(biāo)簽和類名或者多個類名
        p.p-class.p-class-add 內(nèi)容
        // 也可以定義變量然后，將其通過普通方式傳入，可以傳入數(shù)組
        - var classes = ["p-class", "p-class-1", "p-class-2"];
        p(class=classes)
        // 多個 class 屬性，值會累加
        p.class-name(class="class-1", class=classes)
        // style 屬性的值可以是一個字符串也可以是一個樣式對象
        p(style={color: "red", background: "blue"})
        p(style="color: red;background: blue;")

文本

body 
        p 這是單行的文本
        p 這是多行文本
            | 使用‘|’區(qū)分多行文本
            | 注意同樣要使用縮進(jìn)
        div.
            "."用來標(biāo)記一塊文本
            可以是多行的，在這里可以
            寫 html 標(biāo)簽 
        script.
            // 在這里直接寫 javascript 代碼
            console.log("first line");
            console.log("second line");
            console.log("last line");

變量

-var 用于聲明變量

{variablesName} 用來使用變量，輸出的變量數(shù)據(jù)會被轉(zhuǎn)碼

{variablesName} 通用用來使用變量，但是輸出的變量數(shù)據(jù)不會被轉(zhuǎn)碼

tagName=variablesName 標(biāo)簽名等于變量名，與 #{variablesName}一樣，將轉(zhuǎn)碼后的變量值賦值為標(biāo)簽內(nèi)容，區(qū)別在于，如果變量未定義 #{} 會返回 undefined；= 會將其忽略

tagName!=variablesName 與 tagName=variablesName 類似，除了不轉(zhuǎn)義變量值

如果要輸出 #{} 或者 !{} 可以再其前面加上反斜杠 #{xxx} | !{xxx}

持續(xù)更新，希望支持。

云服務(wù)器 GPU云服務(wù)器 hbase的安裝與使用 mysql數(shù)據(jù)庫的安裝與使用 mysql安裝與使用 hadoop安裝與使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/52800.html

發(fā)表評論

登陸后可評論

0條評論

dantezhao

男|高級講師

我要關(guān)注我要私信

TA的文章

馬士兵MCA架構(gòu)師Java互聯(lián)網(wǎng)架構(gòu)師

閱讀 2200·2021-11-22 15:24
騰訊云100Gbps帶寬云服務(wù)器上線：CPU從1核到232核,覆蓋標(biāo)準(zhǔn)型SA3、標(biāo)準(zhǔn)型S6、內(nèi)存型M

閱讀 2560·2021-09-09 11:53
軟件測試35歲就到了瓶頸期、稍不注意就將遭到社會拋棄、如何自救已成難事...

閱讀 3117·2021-09-04 16:40
關(guān)于圣杯布局和雙飛翼布局

閱讀 1696·2019-08-30 15:52
css揭秘筆記——形狀

閱讀 3420·2019-08-29 13:47
補(bǔ)充：無法遠(yuǎn)程訪問server的一個問題openssh沒有配置好無法編輯文件vim沒有裝好

閱讀 2799·2019-08-26 17:40
微信小程序從入坑到放棄之坑八：textarea在蘋果手機(jī)中的大Bug

閱讀 1636·2019-08-26 13:24
【build your own xxx】實現(xiàn)你自己的bind函數(shù)

閱讀 2306·2019-08-26 12:01

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

pug的安裝與使用

相關(guān)文章