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"})

若有多个属性需要设置,则使用逗号分隔:

link(href="a.css",rel="stylesheet")
将文件写入到新文件中:
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
  head
  body
    div(style=json)
    div(class=arr)
 
 

与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>'
}))
html
  head
  body
    div!=content
 
 
 

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. 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针。 例如,链表1->2->3->3->4->4->5 处理后为 1->2->5

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  2. spark HA 安装配置和使用(spark1.2-cdh5.3)

    安装环境如下: 操作系统:CentOs 6.6 Hadoop 版本:CDH-5.3.0 Spark 版本:1.2 集群5个节点 node01~05 node01~03 为worker. node04. ...

  3. yarn.resourcemanager.ha.id设置

    resourcemanager启动报错,其中一个启动成功,另一个启动报8088端口被成功启动的rm占用 2016-11-18 17:08:49,478 INFO org.apache.zookeepe ...

  4. nodemanager启动失败

    yarn启动报错: 2016-11-16 16:12:44,304 INFO org.apache.hadoop.metrics2.impl.MetricsSystemImpl: Stopping N ...

  5. 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空)

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  6. ansible安装(批量执行命令

    rpm安装 下载epl源 :  Download the latest epel-release rpm from:http://dl.fedoraproject.org/pub/epel/6/x86 ...

  7. namenode无法启动(namenode格式化失败)

    格式化namenode root@node04 bin]# sudo -u hdfs hdfs namenode –format 16/11/14 10:56:51 INFO namenode.Nam ...

  8. hive 未初始化元数据库报错

    启动hive-metastore和hive-server2 用beeline连接hive报错 [root@node04 hive]# beeline Beeline version 0.13.1-cd ...

  9. Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记

    公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...

随机推荐

  1. Win10蓝屏的一些解决办法

    请仔细回想这个错误是什么时候出现的: 第一次发生时你对系统做了哪些操作: 发生时正在进行什么操作: 从这些信息中找出可能的原因: 从而选择相应解决方案并尝试排除. 0x0000000A:IRQL_NO ...

  2. SQL报错盲注

    嗯哼,这几天篮球比赛,天天训练,学习都耽搁了,DDCTF做了一会心态就爆炸了,蓝瘦,明天再打一场,希望能赢呢,打完就疯狂继续学习了.今天抽空又做了一些基本的SQL注入题目,墨者学院的一道报错注入的题目 ...

  3. 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, ...

  4. Django-CSRF,AJAX,FORM

    内容总览1.CSRF相关1>CSRF源码分析2>ajax的实现(ajax的实例(异步计算,参数测试,上传))3>ajax通过csrf的校验 2.FORM组件1>基本使用2> ...

  5. 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 ...

  6. Freemarker网页静态化

    Freemarker的jar包 创建整合spring的配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...

  7. nginx实现https的配置文件

    server { listen ; server_name testplatform.itegou.com; proxy_set_header X-Forwarded-Host $host; prox ...

  8. java - day006 - 构造方法

    构造方法 新建对象是,执行的一个特殊方法 new 类名(); 这个小括号就是构造方法 Java 类中,必须有构造方法,如果自己不定义, 编译器会自动生成默认构造方法 new 关键字是新建对象用的,   ...

  9. unity iOS本地代码总结(一)

    1. 项目能直接运行了,但是代码的实际数据流动任然会有问题. 2. unity的代码能这么简单的被调用简直是奇迹一样,不需要大的改动就能够使用. 3. 目前需要注意的问题就是,unity的内容还太少, ...

  10. java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'

    今天在跑项目时遇到java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'报错,自己也是摸索了很久,一 ...