當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
NodeJS 模板 -- jade
生活随笔
收集整理的這篇文章主要介紹了
NodeJS 模板 -- jade
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jade 的安裝什么的就不說了，就說一下jade的一些語法。官網在這里
jade 是必須用自己的語法，她不可以和原生的html混合使用，當然ejs是可以的。
例子一
const jade = require('jade');var str = jade.render('html');console.log(str) 運行結果為 <html></html> 例子二，(讀取 .jade 文件，)
-.js
const jade = require('jade') const fs = require('fs')var str = jade.renderFile('./views/2.jade', {pretty: true})fs.writeFile('./build/1.html', str, function (err) {if (err) {console.log("寫入失敗")} else {console.log("寫入成功")} })-2.jade
htmlheadscript(src="a.js")link(href="a.css", rel="stylesheet")bodya(href="www.baidu.com") 百度div(style="width:200px; background:red")div(style= {width: '200px', height: '200px'})div(title = {width: '200px', height: '200px'})div.boxdiv#oDiv -build/1.html
<html><head><script src="a.js"></script><link href="a.css" rel="stylesheet"/></head><body><a href="www.baidu.com">百度</a><div style="width:200px; background:red"></div><div style="width:200px;height:200px"></div><div title="[object Object]"></div><div class="box"></div><div id="oDiv"></div></body> </html>
語法總結
1在前面加個'|' ，就表示的原樣輸出。
body|aaa // 輸出 <body>aaa </body>
2寫法 在標簽后面加個 '.',表示的意思是，比這個深的下一級都原樣輸出。
script.window.onload = function () {console.log("初始化完成")} // 輸出 <script>window.onload = function () {console.log("初始化完成")} </script>3 include
includescriptinclude a.js // 這樣就可以讀取
4 變量輸出, #{變量}
-.jade div 我的名字是 #{name} -.js var str = jade.renderFile('路徑', { pretty: true, name: 'Mar'}) //輸出 <div>我的名字是 Mar<div>有個簡單的寫法就是 span=name， 她就等于 #{name}
5 用橫杠可以表示是js 代碼
body-var a = 12;-var b = 4;div 結果是 #{a+b}
6 for 循環
body-for(var i = 0; i < arr.length; i++)div=arr[i] //輸出<body><div>aaa</div><div>bbb</div><div>ccc</div></body>
7 非轉義輸出 (比如像輸出某個標簽, ) div!=content
htmlheadbodydiv!=contentjs代碼為 var str = jade.renderFile('./views/2.jade', {pretty: true,content: '<p>標簽</p>' }) //輸出 <html><head></head><body><div><p>標簽</p></div></body> </html>
8 if else
htmlheadbody-var a = 12;-if(a%2 == 0)div(style={background: 'red'}) 偶數-elsediv(style={background: 'green'}) 奇數
總結
以上是生活随笔為你收集整理的NodeJS 模板 -- jade的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【数据科学】 推荐一个更高效的数据清洗方
- 下一篇： Spring事务配置实例