node04
1、模板引擎
用于渲染页面
介绍jade或ejs
jade:侵入式,与原生html/css不共存,使用缩进代表层级
模板后缀.jade
ejs:则非侵入式的
2、jade
1)简单使用:
//代码
const jade = require('jade') let str=jade.renderFile('./template/a.jade') console.log(str) //模板
//模板部分
html
head
style
script
body
div
ul
li
li
li
div
2)语法:根据缩进,确定层级
在jade模板内书写属性,例如为script标签新增src属性
script(src="a.js")
div(style="width:200px;height:150px")
上述内容也可以使用json表示,但只有style标签允许
同理,class可以使用数组进行表示
div(class=['a','b'])
div(style={"width:200px;height:150px"})
若有多个属性需要设置,则使用逗号分隔:

const jade = require('jade')
const fs=require('fs')
let str=jade.renderFile('./template/a.jade')
fs.writeFile('./result.html',str,function(err){
if(err){
console.log('failed')
}else{
console.log('ok')
}
})
console.log(str)
若要书写内容,则在标签后空一格写内容即可,但是后面的内容不可换行
简写:
div.app
div#app
如果一定要以对象的方式为元素书写属性的话,可以:
div&attributes({各属性})
使用attribute显式说明
jade自动区分单双标签,所有的自定义标签均识别为双标签
但是有时候会出现我们的内容被jade识别为自定义标签的情况
我们在内容之前加|,即可按内容输出,如:
|abc
也可以解决上面大段js代码换行后的内容报错问题
或者使用.
表示.后的所有次及内容都原样输出
或者通过外链引入,使用Include即可:
在jade中使用变量:
//使用
const jade = require('jade') console.log(jade.renderFile('./template/a.jade',{pretty:true,name:'小智'}))//进行自动格式化 //模板
html
head
body
div 我的名字是:#{name} #{variable}:使用变量的格式,里面同样可以放表达式
同时,我们队class和style属性有灵活的书写方式:
const jade = require('jade') console.log(jade.renderFile('./template/a.jade', {
pretty: true,
json:{width:'200px',height:'400px',display:'block'},
arr:['aaa','bbb']
}))
与html不同的是,jade允许你设置多个class标签,编译时它将自动为你合并
在jade内定义和使用变量,使用-
html
head
body
-var a=12
-var b=5 //不会输出到模板上
div 结果是:#{a+b}
html
head
body
-var a=12
-var b=5
span #{a}
span=b 上下两个写法等价
jade的循环语法:
html
head
body
-for(var i=0;i<arr.length;i++)
div=arr[i]
jade解析输出html标签,为了防止用户在输入时进行注入式攻击,它将不会编译html标签
const jade = require('jade') console.log(jade.renderFile('./template/a.jade', {
pretty: true,
content:'<h2>你好呀金合欢花<h2>'
}))
jade分支语法:
if:
html
head
body
-var a=12
-if(a>10)
div 偶数
-else
div 奇数
switch:使用case-when代替switch关键字
html
head
body
-var a=12
case a
when 0
div a
when 1
div b
when 12
div c
default
div d
注意,前面的给了-前缀注明这是代码时,不中断的前提下
后面的js代码不用加-
一个比较完整的实例:
const jade = require('jade')
const fs=require('fs') let str=jade.renderFile('./template/a.jade',{
pretty:true
})
fs.writeFile('./result.html',str,function(err){
if(err){
console.log('failed!')
}else{
console.log('ok')
}
})
doctype
html
head
meta(charset="utf-8")
title 测试页面
style.
div{
width:100px;
height:400px;
border:1px solid red
}
body
-var a=0
while a++<12
if a%4==0&&a!=0
h1 #{a}
else
h2 #{a}
node04的更多相关文章
- 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针。 例如,链表1->2->3->3->4->4->5 处理后为 1->2->5
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- spark HA 安装配置和使用(spark1.2-cdh5.3)
安装环境如下: 操作系统:CentOs 6.6 Hadoop 版本:CDH-5.3.0 Spark 版本:1.2 集群5个节点 node01~05 node01~03 为worker. node04. ...
- yarn.resourcemanager.ha.id设置
resourcemanager启动报错,其中一个启动成功,另一个启动报8088端口被成功启动的rm占用 2016-11-18 17:08:49,478 INFO org.apache.zookeepe ...
- nodemanager启动失败
yarn启动报错: 2016-11-16 16:12:44,304 INFO org.apache.hadoop.metrics2.impl.MetricsSystemImpl: Stopping N ...
- 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空)
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- ansible安装(批量执行命令
rpm安装 下载epl源 : Download the latest epel-release rpm from:http://dl.fedoraproject.org/pub/epel/6/x86 ...
- namenode无法启动(namenode格式化失败)
格式化namenode root@node04 bin]# sudo -u hdfs hdfs namenode –format 16/11/14 10:56:51 INFO namenode.Nam ...
- hive 未初始化元数据库报错
启动hive-metastore和hive-server2 用beeline连接hive报错 [root@node04 hive]# beeline Beeline version 0.13.1-cd ...
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
随机推荐
- Win10蓝屏的一些解决办法
请仔细回想这个错误是什么时候出现的: 第一次发生时你对系统做了哪些操作: 发生时正在进行什么操作: 从这些信息中找出可能的原因: 从而选择相应解决方案并尝试排除. 0x0000000A:IRQL_NO ...
- SQL报错盲注
嗯哼,这几天篮球比赛,天天训练,学习都耽搁了,DDCTF做了一会心态就爆炸了,蓝瘦,明天再打一场,希望能赢呢,打完就疯狂继续学习了.今天抽空又做了一些基本的SQL注入题目,墨者学院的一道报错注入的题目 ...
- Python简单基础小程序
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
- Django-CSRF,AJAX,FORM
内容总览1.CSRF相关1>CSRF源码分析2>ajax的实现(ajax的实例(异步计算,参数测试,上传))3>ajax通过csrf的校验 2.FORM组件1>基本使用2> ...
- webpack 打包报错:One CLI for webpack must be installed. These are recommended choices, delivered as separate packages
webpack 打包报错: One CLI for webpack must be installed. These are recommended choices, delivered as sep ...
- Freemarker网页静态化
Freemarker的jar包 创建整合spring的配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...
- nginx实现https的配置文件
server { listen ; server_name testplatform.itegou.com; proxy_set_header X-Forwarded-Host $host; prox ...
- java - day006 - 构造方法
构造方法 新建对象是,执行的一个特殊方法 new 类名(); 这个小括号就是构造方法 Java 类中,必须有构造方法,如果自己不定义, 编译器会自动生成默认构造方法 new 关键字是新建对象用的, ...
- unity iOS本地代码总结(一)
1. 项目能直接运行了,但是代码的实际数据流动任然会有问题. 2. unity的代码能这么简单的被调用简直是奇迹一样,不需要大的改动就能够使用. 3. 目前需要注意的问题就是,unity的内容还太少, ...
- java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'
今天在跑项目时遇到java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'报错,自己也是摸索了很久,一 ...