pug的安裝與使用

jeyhan 發布于2019-08-29 16:17 / 1598人閱讀

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

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

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

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

 jade test.jade
    # --pretty | -P (大寫) 美化輸出的 html  使之帶有縮進等
    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 監聽文件變化，自動重新編譯
    jade -P -w test.jade

標簽

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

標簽間嵌套關系使用縮進加換行實現；

標簽后第一個空格后邊的內容會被編譯成標簽內的文本內容

doctype html
html(lang="en")

   head
       title Document
   // 通過換行加縮進實現標簽嵌套
   body 
       p 標簽后的文本
       // 通過 ‘:’ 實現行內的嵌套 
       p: a 文本
       // 自定義的標簽加上 ‘/’ 表示自閉和標簽（html 默認自閉和標簽可以不用）
       foo/

屬性 一般屬性要添加在緊挨標簽的括號里() ，多個屬性用 , 隔開，() 內實際上是一個 javascript 的環境，可以在這里進行基礎的運算

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

class 與 style 屬性

body
        // 使用 "." 鏈接標簽和類名或者多個類名
        p.p-class.p-class-add 內容
        // 也可以定義變量然后，將其通過普通方式傳入，可以傳入數組
        - 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 這是多行文本
            | 使用‘|’區分多行文本
            | 注意同樣要使用縮進
        div.
            "."用來標記一塊文本
            可以是多行的，在這里可以
            寫 html 標簽 
        script.
            // 在這里直接寫 javascript 代碼
            console.log("first line");
            console.log("second line");
            console.log("last line");

變量

-var 用于聲明變量

{variablesName} 用來使用變量，輸出的變量數據會被轉碼

{variablesName} 通用用來使用變量，但是輸出的變量數據不會被轉碼

tagName=variablesName 標簽名等于變量名，與 #{variablesName}一樣，將轉碼后的變量值賦值為標簽內容，區別在于，如果變量未定義 #{} 會返回 undefined；= 會將其忽略

tagName!=variablesName 與 tagName=variablesName 類似，除了不轉義變量值

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

持續更新，希望支持。

GPU云服務器云服務器 hbase的安裝與使用 mysql數據庫的安裝與使用 mysql安裝與使用 hadoop安裝與使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113646.html

pug的安裝與使用

摘要：說明原名不叫，是大名鼎鼎的，后來由于商標的原因，改為，哈巴狗。其實只是換個名字，語法都與一樣。丑話說在前面，有它本身的缺點可移植性差，調試困難，性能并不出色，但使用它可以加快開發效率。本文將詳細介紹模板引擎。說明 Pug原名不叫Pug，是大名鼎鼎的jade，后來由于商標的原因，改為Pug，哈巴狗。其實只是換個名字，語法都與jade一樣。丑話說在前面，Pug有它本身的缺點——可移植性...

dantezhao 2019-08-02 11:09 評論0 收藏0
【開發經驗】使用Wepy與Bmob新sdk快速開發小程序

摘要：小項目的內容基本就是維護訂單表，訂單狀態，用戶表等，小程序還要解決微信登錄，微信支付等等微信。后臺管理系統待施工，其實這部分和小程序差不多，改改直接用，出來往的服務一扔，就給甲方用了。引言：最近一直在做一些小的小程序項目，小項目雖然小，但是前后端和管理系統都還是需要的。在甲方極低的預算下，人工又顯得極其緊張，所以我大概摸索出了一套能用盡量少的代碼，盡量減少單人工作量，又能實現實際需求...

hikui 2019-08-23 12:10 評論0 收藏0
vue+webpack+scss+jade(pug)的環境搭建

摘要：標簽聲明轉載須經本人同意這篇博客就聊一聊如何用搭建的環境，以及拓展了下如何在搭建好的環境中使用以及，廢話不多說，直接進入主題。第三步補充，依賴擴展現在，我們搭建的環境并不支持，語法，我們需要再加工一下配置。標簽：vue,webpack,jade,scss聲明：轉載須經本人同意這篇博客就聊一聊如何用webpack搭建vue2.0的環境，以及拓展了下如何在搭建好的環境中使用scss以及p...

GraphQuery 2019-08-01 15:59 評論0 收藏0
Express 文檔（使用模板引擎）

摘要：一些與一起使用的流行模板引擎是和，應用程序生成器使用作為其默認值，但它也支持其他幾個。有關可與一起使用的模板引擎列表，請參閱模板引擎，另請參閱比較模板引擎等。，使用的模板引擎，例如，要使用模板引擎。使用模板引擎模板引擎使你可以在應用程序中使用靜態模板文件，在運行時，模板引擎用實際值替換模板文件中的變量，并將模板轉換為發送到客戶端的HTML文件，這種方法可以更輕松地設計HTML頁面。...

gxyz 2019-08-23 14:21 評論0 收藏0
Express 實戰（七）：視圖與模板：Pug 和 EJS

摘要：而框架中最常用的兩個視圖引擎是和。實際上這些上下文對象就是會在視圖中使用到的變量。其實視圖緩存并不是緩存視圖實際上它緩存的視圖路徑。根據默認視圖引擎將缺少拓展名的視圖文件補充完整。實際上存在由不同組織維護的兩個不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的內容大都是關于 Express 框...

wmui 2019-08-20 18:54 評論0 收藏0