NodeJS 模板 -- jade

来源：互联网发布：文件管理程序软件编辑：程序博客网时间：2024/06/13 11:24

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}-.jsvar 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'}) 奇数

阅读全文

0 0