摘要:說明原名不叫,是大名鼎鼎的,后來由于商標的原因,改為,哈巴狗。其實只是換個名字,語法都與一樣。丑話說在前面,有它本身的缺點可移植性差,調試困難,性能并不出色,但使用它可以加快開發效率。本文將詳細介紹模板引擎。
說明 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}
持續更新,希望支持。文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52800.html
摘要:小項目的內容基本就是維護訂單表,訂單狀態,用戶表等,小程序還要解決微信登錄,微信支付等等微信。后臺管理系統待施工,其實這部分和小程序差不多,改改直接用,出來往的服務一扔,就給甲方用了。 引言:最近一直在做一些小的小程序項目,小項目雖然小,但是前后端和管理系統都還是需要的。在甲方極低的預算下,人工又顯得極其緊張,所以我大概摸索出了一套能用盡量少的代碼,盡量減少單人工作量,又能實現實際需求...
摘要:標簽聲明轉載須經本人同意這篇博客就聊一聊如何用搭建的環境,以及拓展了下如何在搭建好的環境中使用以及,廢話不多說,直接進入主題。第三步補充,依賴擴展現在,我們搭建的環境并不支持,語法,我們需要再加工一下配置。 標簽:vue,webpack,jade,scss聲明:轉載須經本人同意這篇博客就聊一聊如何用webpack搭建vue2.0的環境,以及拓展了下如何在搭建好的環境中使用scss以及p...
摘要:一些與一起使用的流行模板引擎是和,應用程序生成器使用作為其默認值,但它也支持其他幾個。有關可與一起使用的模板引擎列表,請參閱模板引擎,另請參閱比較模板引擎等。,使用的模板引擎,例如,要使用模板引擎。 使用模板引擎 模板引擎使你可以在應用程序中使用靜態模板文件,在運行時,模板引擎用實際值替換模板文件中的變量,并將模板轉換為發送到客戶端的HTML文件,這種方法可以更輕松地設計HTML頁面。...
摘要:而框架中最常用的兩個視圖引擎是和。實際上這些上下文對象就是會在視圖中使用到的變量。其實視圖緩存并不是緩存視圖實際上它緩存的視圖路徑。根據默認視圖引擎將缺少拓展名的視圖文件補充完整。實際上存在由不同組織維護的兩個不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的內容大都是關于 Express 框...
閱讀 2131·2021-11-22 15:24
閱讀 2425·2021-09-09 11:53
閱讀 3046·2021-09-04 16:40
閱讀 1645·2019-08-30 15:52
閱讀 3365·2019-08-29 13:47
閱讀 2746·2019-08-26 17:40
閱讀 1552·2019-08-26 13:24
閱讀 2251·2019-08-26 12:01