Jade——變體的HTML

時間 2019-11-16

標籤 jade 變體 html 欄目 Node.js 简体版

原文原文鏈接

什麼是jade？

jade是一個模板引擎，是變體的HTML。javascript

模板引擎就是一個庫，用來解釋素具渲染視圖的框架，也能夠叫作HTML的預處理語言。css

jade是Node.js的一個模板引擎，他的語法借鑑了Haml（一個叫作Ham的人寫的html的簡寫語言）html

有2個很好的學習資源：前端

naltatis：http://naltatis.github.io/jade-syntax-docs/java

官方文檔：http://jade-lang.com/node

naltatis，一個在線編輯jade模板的工具，只需在左邊寫jade，右邊就會自動解析成HTML，強烈推薦jquery

很方便！！！git

Jade 中省略了大量的尖括號，給個人感受就是簡潔和高效。這裏不會討論各類模板引擎的優劣，技術和工具的好壞向來都是不死不休的僞命題，仍是花更多的時間來創造有價值的東西更有意思。github

test.jademarkdown

p hello jade

　　其上的 jade 模板會被解析成對應的html

<p>hello jade</p>

Jade的特色是語法簡潔、簡單易學、支持嵌入代碼、支持多重繼承。經過本文的學習，你將能快速掌握Jade的基本用法及一些小技巧。

相對於HTML，Jade中的元素（Element）標記（Tag）沒有用「<>」包圍，其屬性（Attribute）是用「()」括起來的。

另外，你可能已經注意到了，Jade的元素沒有相對應的「開始標記」和「結束標記」。Jade是用「縮進」來描述元素的從屬關係（與Python的語法類似）。

若你使用過HBuilder，你會發現jade的語法很是的親切，由於他使用#代替id，使用.代替類型，和HBuilder的快速生成html標籤的操做同樣，很方便啊！

DOCTYPE

HTML本質上是XML，在HTML文件的起始位置需定義doctype。

doctype html --> <!DOCTYPE html>

變量

傳給jade模板的數據成爲locals，輸出變量使用#{變量名}，或者=等號

demo2.jade

h1=title
p=body

locals

{"title": "jade is very good.","body":"this is a test demo2"}

輸出

<h1>jade is very good.</h1>
<p>this is a test demo2</p>

屬性

屬性緊跟在標籤的名字後，用括號括起來，格式是name=value，多個屬性之間用，（逗號）隔開。

文本

經過符號 | 能夠輸出原始文本

if語句

如何在jade模板上加業務邏輯

if res.length==10
    h1= title+"標題"
else
    h1=res.join(',')

除了if以外，還有unless，他表示不或者！

case語句

each和for語句

JavaScript

如何寫前端js代碼

script(type='text/javascript').
  $(document).ready(function () {
    alert('前端代碼');
  })

引用前端的js文件

script(src='/javascripts/jquery-1.10.2.js')

CSS

如何寫前端css代碼

style.
      html,body{
        background-color: #00B7FF;
        margin:0;
        padding:0;
        border:0;
      }

　　引入css樣式文件和樣式

 link(rel='stylesheet', href='/stylesheets/style.css')

註釋

單行註釋和 JavaScript 裏是同樣的，經過 // 來開始，而且必須單獨一行：

// just some paragraphs
p foo
p bar

渲染爲：

<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>

函數mixin

可重用的 jade 塊 (Mixins)

模板包含 (Includes)

你可使用 Includes 在模板中包含其餘模板的內容。就像 PHP 裏的 include 同樣。

index.jade

doctype html
html
  include includes/head
body
  h1 個人網站
  p 歡迎來到個人網站。
  include includes/foot

includes/head.jade

head
  title 個人網站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

includes/foot.jade

#footer
  p Copyright (c) foobar

調用 index.jade 的結果：

<!doctype html>
<html>
  <head>
    <title>個人網站</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>個人網站</h1>
    <p>歡迎來到個人網站。</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

模板引用 (Extends)

經過 Extends 能夠引用外部的 jade 塊，感受比 include 要好用

layout.jade

doctype html
html
  head
    title 個人網站
    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
    link(type="text/css",rel="stylesheet",href="/css/style.css")
    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
  body
    block content

article.jade

//- extends 拓展調用 layout.jade
extends ../layout
block content
  h1 文章列表
  p 朴槿惠:"歲月號"船長等人棄船行爲等同於殺人
  p 普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲
  p 世界最大兔子重45斤長逾1米 1年吃2萬元食物

res.render(‘article’) 的結果：

<html>
  <head>
    <title>個人網站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <link type="text/css" rel="stylesheet" href="/css/style.css"></head>
    <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>文章列表</h1>
    <p>朴槿惠:"歲月號"船長等人棄船行爲等同於殺人</p>
    <p>普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲</p>
    <p>世界最大兔子重45斤長逾1米 1年吃2萬元食物</p>
  </body>
</html>

Jade支持繼承，即一個Jade模板繼承自另外一個Jade模板：

在上例中，layout.jade 文件是父模板，index.jade 是子模板，它繼承自 layout.jade。

在父模板中，用關鍵字「block」定義可在子模板中替換的塊，每一個「block」有一個名字，在子模板中，一樣用關鍵字「block」跟上該名字定義需在該「block」中填充的內容。

Jade支持多重繼承，即子模板也能夠是其它模板的父模板。

在模板中調用其餘語言

:markdown
  # Markdown 標題
  這裏使用的是 MarkDown 格式
script
  :coffee
    console.log '這裏是 coffee script'

結果：

<h1>Markdown 標題</h1>
<p>這裏使用的是 MarkDown 格式</p>
<script>console.log('這裏是 coffee script')</script>

未完待續！！！

參考文章：

jade中文社區：http://www.nooong.com/docs/jade_chinese.htm

CNode技術社區：https://cnodejs.org/topic/5368adc5cf738dd6090060f2

naltatis：http://naltatis.github.io/jade-syntax-docs/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。