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




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows7系统屏幕一直闪屏的解决教程

win7系统是一款使用体验非常棒的优秀体验!强大的稳定性确保了系统的流畅运行&#xff0c;但是最近有许多的win7小伙伴们反应自己遇到了屏幕一直闪屏的问题&#xff0c;windows7系统屏幕一直闪屏怎么解决?今天小编就为大家带来了windows7系统屏幕一直闪屏的解决教程&#xff0c…

Git Permission to fazhiyun86/Test.git denied to MarRoar

先说明问题。在我的电脑上有两个SSH key&#xff0c;也就是有两个GitHub账户。我们在GitHub账户里面配置好 SSH key 的时候&#xff0c;就可以向自己的GitHub账户的仓库里面push 代码。 我们先在第一个账户push 代码的时候会让输入 用户名和密码。当向另一个账户push 东西的时…

PP视频如何将默认缓存清晰度设置成超清

PP视频如何将默认缓存清晰度设置成超清呢?很多人都不会&#xff0c;下面小编来详细的讲解一下。 PP视频如何将默认缓存清晰度设置成超清 1、先打开手机&#xff0c;点击桌面上的PP视频。 PP视频如何将默认缓存清晰度设置成超清 2、然后点击右下角我的。 PP视频如何将默认…

ECharts 饼图 legend 样式修改

在移动端展示一个数据很多的饼图的时候&#xff0c;首先看一下效果。ECharts legend 配置项 1 legend 让它在右面竖着显示。 legend: {type: scroll,orient: vertical,show: true,right: 0,top: 20,bottom: 20,textStyle: {fontSize: 7},formatter: function (name) {return (n…

怎么设置火狐浏览器自动刷新 火狐浏览器自动刷新图文教程

火狐浏览器怎么设置自动刷新?火狐浏览器为用户提供最新的搜索、网址导航、新闻资讯、网络购物等服务。还有对用户的隐私保护&#xff0c;个性化设置、更快的上网速度等功能&#xff0c;火狐浏览器要怎么设置自动刷新呢&#xff0c;下面就给大家分享具体步骤。 1、首先打开火狐…

C3 粒子闪烁效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>闪烁</title><style>body {background-color: #000;}.bim-flash-circle {width: 10px;height: 10px;position: absolute;left: 50%;top: 5…

qq浏览器如何关闭广告推荐

浏览器对于用户的生活使用会带来非常大的帮助&#xff0c;让用户在需要搜索的时候更加的方便&#xff0c;但是一般页面都会出现一些广告推荐&#xff0c;很多用户都很不喜欢这些广告&#xff0c;那么用户要如何才能进行关闭呢?对这个服务感兴趣的用户就来一起看看是如何设置的…

ECharts 仪表盘的轴线宽度修改

今天修改仪表盘的轴线宽度&#xff0c; 配置项链接。修改的是下图中线框标注地方的宽度。 下面看一下配置项 option {tooltip : {formatter: "{a} <br/>{b} : {c}%"},toolbox: {feature: {restore: {},saveAsImage: {}}},series: [{name: 业务指标,type: gau…

edge浏览器字体模糊乱码怎么办

最近有用户反映在使用win10edge浏览器的时候出现了一堆乱码的现象&#xff0c;看又看不懂&#xff0c;那到底是字体的问题还是浏览器出现了问题呢?我们又该怎么解决该问题呢?下面小编就给大家介绍win10edge浏览器字体乱码解决教程。 edge浏览器字体设置 edge浏览器字体模糊乱…

CSS 让数字滑动显示

最近在做一个数据展示的页面&#xff0c;老板想要的效果是数字滑动的显示。 所以想了一下实现了老板想要的效果。代码如下。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>number</title><…

积米浏览器如何阻止弹窗

日常使用浏览器的时候&#xff0c;最烦人也最经常出现的情况也就是各种各样的弹窗广告了&#xff0c;就算当下立即点击关闭&#xff0c;但是不用多久弹窗还是会继续出现。其实&#xff0c;这样的情况点击关闭是没有用的&#xff0c;需要从浏览器设置里关闭。那么&#xff0c;积…

Status Code:200 OK (from disk cache)和304的区别,以及怎么禁止缓存

有时候缓存是 200 OK (from disk cache)有时候会是 304 ? 看运维是否移除了 Entity Tag。移除了&#xff0c;就总是 200 OK (from cache)。没有移除&#xff0c;就两者交替出现。 他们两个的区别是 200 OK (from disk cache) 是浏览器没有跟服务器确认&#xff0c; 就是它直接…

观察者模式和js自定义事件

事件是一种叫做观察者的设计模式,观察者模式由两类对象组成&#xff1a;主体和观察者。主体负责发布事件&#xff0c;同时观察者通过订阅这些事件来观察该主体。拿DOM来说&#xff0c;DOM就是主体&#xff0c;事件处理代码便是观察者。 下面是一个自定义事件&#xff0c; func…

windows7自带录制屏幕怎么用

现在还有许多用户使用的都是windows7旗舰版系统&#xff0c;有时候在使用时会需要用到屏幕录制。那我们要怎么操作呢?可能对于不是太熟悉电脑的朋友来讲&#xff0c;会比较困难。没关系&#xff0c;下面小编为大家分享的就是windows7自带录制屏幕怎么用的方法介绍啦。 window…

米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤

1、想要在米侠浏览器里添加脚本的话&#xff0c;用户们应该先点击页面下方的横杠按钮&#xff0c;打开功能列表找到“脚本”功能进行设置。 米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤 2、接下来通过脚本的功能弹窗&#xff0c;点击其中的“新增”选项&…

js 排序

冒泡排序 var dataStore [ 72 , 1 , 68 , 95 , 75 , 54 , 58 , 10 , 35 , 6 , 28 , 45 , 69 , 13 , 88 , 99 , 24 , 28 , 30 , 31 , 78 , 2 , 77 , 82 , 72 ];var t bubbleSort(dataStore);console.log(t);function bubbleSort(data) {var temp 0;for (var i 0; i < dat…

优酷视频如何意见反馈?优酷视频怎么意见反馈

01、 我们打开优酷视频APP。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 02、 在视频的首页&#xff0c;我们点击下方最右侧的那个“我的”。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 03、 我们接着在我的页面&#xff0c;选择下“意见反馈”。…

js 类型判断

说到js的类型判断很容易想到的是 typeof、instanceof等。 typeof 有个缺点就是引用类型的结果值都是object 所以就要说一下这些类型是怎么判断的。在说类型判断之前先介绍个东西 Object.prototype.toString 可以查看链接 翻译过来就是 当 toString 方法被调用的时候&#xf…

win11文件夹怎么放到文件栏

Windows11系统桌面相对于win10系统来看&#xff0c;具有很大的变化&#xff0c;其中关于文件的设置具有很大的改变。其中关于文件的文件栏放置和删除是不少网友们关注的问题&#xff0c;下面一起来看看了解一下吧! win11文件夹怎么放到文件栏 win11文件夹需要权限删除怎么办 …

cordova报错“No installed build tools found. Install the Android build tools version - ”

在cordova 里面添加一个安卓平台后&#xff0c;用android studio打开安装gradle后&#xff0c;然后开始构建项目&#xff0c;这个时候在控制台上会报错 这个时候看到对应的文件下报错信息。 然后我们打开这个文件后&#xff0c; 发现这个 if else 判断走了 else 里面的代码&a…