html jade文件,Jade模板

article/2025/3/16 23:48:36

Express框架里内嵌了Jade模板引擎。正好项目里也要用到,本篇整理了下Jade的相关用法。

安装与执行

标签和属性

多行文本

变量

语句

Mixin

模板

注释

过滤器

安装与执行

安装很简单:

npm install jade –global

安装后本地随便新建一个sample.jade文件,执行:

jade sample.jade

就能将其翻译成标准的sample.html源文件了。执行时可以带上参数,通过jade -h查看支持的命令参数:

e2a9cd3b7e56

常用的命令参数,比如-P(大写,命令参数是大小写敏感的)。Jade默认编译出来的html源文件里是没有缩进的,不便于开发。加上-P参数后,编译出来的html源文件里就有缩进了:

jade -P sample.jade

还有-w用来watch监视jade文件,每次改动保存后自动编译成html文件,省去手动执行命令的麻烦:

jade -P -w sample.jade

-O用来给jade文件传递对象或JSON文件,用以替换模板内的变量:

jade -P -w sample.jade -O sample.json

标签和属性

传统的HTML标签写尖括号很麻烦,Jade里可以省略尖括号,直接写标签名。标签间的嵌套关系用换行加空格来实现。紧接在标签名后加上.xx或#xx,就能给标签添加css类名和id。标签名后第一个空格后面的内容会被编译成标签内的文本内容。例如:

doctype html

html

head

body

h1.titleClass#titleID My First Jade Page

//编译出来的结果

My First Jade Page

是不是感觉写起来简单多了。因为css类名和id是最常用的标签属性,所以Jade简化了它俩的写法,可以紧接在标签名后面。但标签属性的正统写法应该是写入()括号内,多个属性用逗号隔开(css类名和id也可以写入()括号内):

a(href='http://www.jackzxl.net', target='_blank') 我的主页

//编译出来的结果

我的主页

HTML里最常用的标签就是div了,所以Jade提供了第二种简化写法,如果不写标签名默认就是div:

.divClass#divID 我是一个div

//编译出来的结果

我是一个div

多行文本

单行文本像上面这样接在标签名后的空格后面即可。多行文本有两种写法。第一种写法是在标签名后紧接一个.点。这样后面的内容会被Jade模板视作文本域而保留换行符。例如:

p.

第1行文本

第2行文本

第3行文本

第4行文本

//编译出来的结果

第1行文本

第2行文本

第3行文本

第4行文本

但由于是文本域,因此用这种写法的话,里面要嵌套标签时,只能写原生的HTML标签了:

p.

第1行文本

第2行文本

第3行文本

第4行文本

//编译出来的结果

第1行文本

第2行文本

第3行文本

第4行文本

多行文本的第二种写法是在每行前加上|竖线符。而且如果开发者觉得第一种写法里写原生HTML标签不爽,用这种写法,可以用Jade语法来嵌套标签。例如:

p

span 第1行文本

| 第2行文本

| 第3行文本

| 第4行文本

//编译出来的结果

第1行文本第2行文本

第3行文本

第4行文本

多行文本的写法不仅可用于p标签等,也常见于style和script标签,例如:

script.

console.log("open mind");

console.log("learning quick");

console.log("work hard");

变量

如果仅仅上面这些快速编写HTML的功能,那Jade也没必要存在了。各种编辑器都有插件可以实现这种快速编写的功能,例如sublime的Emmet插件。模板引擎的真正强大之处可以实现函数式的开发。先看变量。

变量声明很简单,前面加上-横杠。使用变量只要#{变量名}就行了。例如:

- var cs = 'UTF-8'

meta(charset='#{cs}')

//编译出来的结果

但注意用#{}输出的变量数据会执行HTML转码,例如:

- var alertData = ''

p #{alertData}

//编译出来的结果

原本想被执行的script脚本,被直接作为文本打印出来了。如果不想HTML转码,可以将#改成!叹号:

- var alertData = ''

p !{alertData}

//编译出来的结果

那如果页面就想输出#{}和!{}呢?可以前面加\反斜杠来让Jade引擎不编译变量:

p \#{alertData}

p \!{alertData}

//编译出来的结果

#{alertData}

!{alertData}

除了用#{}和!{}外,也可以在标签后面紧接=等号(不转义用!=)来输出变量。例如:

p= alertData

p!= alertData

效果和上面是一样的。这两种写法#{}和=等号输出的区别如下:

input(value='#{aaa}')

input(value=aaa)

//编译出来的结果

可以看出用#{}如果变量未定义,将会编译成undefined作为初始值。但用=等号来编译变量的话,如果变量未定义就忽略。

有了变量就能轻松实现前后端分离。数据保存在JSON文件里。前端用Jade模板制作页面,在需要显示数据处用变量来实现。例如sample.json文件里:

{

"charset": "UTF-8",

"title": "My First Jade Page"

}

sample.jade文件里:

doctype html

html

head

meta(charset='#{charset}')

body

h1.titleClass#titleID #{title}

执行命令:jade -P -w sample.jade -O sample.json后Jade文件里的变量被自动替换。编译出来的sample.html:

My First Jade Page

语句

Jade模板支持JavaScript语句:

if-else

unless

case-when

for-in

each-in

while

最常见的if-else:

- var author = 'Jack';

if author

p 作者:#{author}

else

p 无作者

//编译出来的结果

作者:Jack

Jade还支持unless语句,它是if-else的反向,写法都一样,用的不多就不举例了。

Jade里的case-when语句就是JavaScript里的switch-case语句(不知为何…):

- var authors = ['Jack', 'Bill'];

case authors[0]

when 'Jack'

p 作者是Jack

when 'Bill'

p 作者是Bill

default

p 无作者

//编译出来的结果

作者是Jack

循环遍历用for-in(注意上面的if-else,case-when语句前不用像变量那样加上-横杠,但for的前面要加上-横杠。如果漏写-横杠,会被解析为标签):

- var person = {name:'Jack', gender: 'Male'}

- for (var prop in person)

p= person[prop]

//编译出来的结果

Jack

Male

循环遍历也可以用each-in(each前的-横杠加不加均可):

- var employee = {name:'Jack', gender: 'male'}

- each value, key in person

p #{key}: #{value}

- var language = ['Java', 'JavaScript', 'C++']

ul

each item in language

li #{item}

//编译出来的结果

name: Jack

gender: male

  • Java
  • JavaScript
  • C++

循环遍历也可以用while(同样前面加不加-横杠均可):

- var n = 0

ul

while n < 4

li= n++

//编译出来的结果

  • 0
  • 1
  • 2
  • 3

Mixin

Mixin也不是个什么新的概念,例如sass里也用Mixin封装css代码,即能重用代码,而且维护简单。Jade也支持Mixin,可以理解为function,最简单的无参数的代码函数:

mixin sayHi

p Hi

+sayHi

//编译出来的结果

Hi

上面声明了一个mixin无参函数sayHi,调用时函数名前加上+加号。现在给mixin加上参数:

mixin personInfo(name, hobbies)

p #{name}'s hobbies:

ul.hobby

each hobby in hobbies

li= hobby

+personInfo('Jack', ['movie', 'music'])

//编译出来的结果

Jack's hobbies:

  • movie
  • music

函数内自然也可调用其他函数,例如上面两个函数嵌套起来。这些和普通JavaScript的函数表现一致,没啥好多介绍的:

mixin personInfo(name, hobbies)

+sayHi

p #{name}'s hobbies:

ul.hobby

each hobby in hobbies

li= hobby

+personInfo('Jack', ['movie', 'music'])

模板

mixin可以实现代码的复用。文件与文件间常用模板来实现代码复用。Jade用block和extends来实现模板的继承。block块就是定义一段HTML模块:

block scripts

script(src='jquery.js')

script(src='underscore.js')

script(src='backbone.js')

//编译出来的结果

上面的块名就是scripts。定义好的block后,本文件内可以直接用block scripts来调用,这和mixin作用差不多,都能实现代码复用。但block真正的作用在于占位,供子文件继承,可以理解为传统OO语言里的虚函数。父文件里定义的block,子文件里用extends来继承并重写。

例如每个文件的页头都一样,就body里内容不一样,可以写一个header.jade:

doctype html

html

head

meta(charset='#{charset}')

block scripts

script(src='jquery.js')

script(src='underscore.js')

script(src='backbone.js')

body

block content

p please write content

每个页面的header都长这样。而body里定义了block content,这里block可以理解为一个占位符placeholder,需要继承它的文件重写block content。

根据业务需求写页面主体部分,例如sample.jade改成这样:

extends header

block content

h1.titleClass#titleID #{title}

a(href='http://www.jackzxl.net', target='_blank') 我的主页

……

在sample.jade里,开头用extends表明和header.jade的继承关系。然后根据业务重写header.jade里的block content。

执行jade -P -w sample.jade -O sample.json就能看到和之前一模一样的页面。引擎加载流程是:解析sample.jade,发现开头有extends,就去解析header.jade,将其编译成html。此时html里的body里是

please write content

。解析完header.jade就继续解析sample.jade,发现block content,于是会将定义在header.jade里的block content替换掉。最终输出的是正确的页面内容,而不是

please write content

(但如果你执行的是jade -P -w header.jade -O sample.json会发现body里内容为

please write content

)

除继承外还可以用include包含。Include会将内容无脑全拷贝进去。例如上面的sample.jade第一行extends header改成include header。编译出来的结果:

please write content

My First Jade Page

我的主页

可以看出与extends不同,include就是无脑将另一个文件里的内容直接拷贝进去,不像block + extends可以重写block。所以结果是错误的。

小细节注意:include包括extends如果省略后缀名,Jade默认该文件时.jade会进行编译。但如果另一个文件里写的是原生的html,需要写明后缀名为.html(例如include xx.html),明确告诉Jade不要编译。

注释

Jade里加上//就能添加注释,用双斜杠的注释会被输出到html源码里。例如:

//一行无意义的注释

//编译出来的结果

如果不想在html源码里输出注释,用//-,在双斜杠后加一横杠。例如:

//-一行无意义的注释,编译时直接跳过该行,不会被输出到HTML源码里

我们知道html里还可以写注释型的条件语句,常用于兼容IE。Jade里你同样可以写这些条件语句,例如将上面header.jade改成能识别IE89,应用不同的class:

doctype html

head

meta(charset='#{charset}')

block scripts

script(src='jquery.js')

script(src='underscore.js')

script(src='backbone.js')

body

block content

p please write content

上面因为有了条件语句,所以html标签用尖括号括了起来,因此最下面要手动加上来闭合标签。而且Jade是空格缩进敏感的,需要将原先的head和body包括里面内容,全往前缩进2个空格。

过滤器

Jade同样兼容其他模块,例如写博客爱用的markdown,写css爱用的less,还有coffeeScript等。只要npm安装好后,用:冒号+模块名就能声明使用这些模块,例如:

:markdown

...

:less

...

:coffee

...

以:markdown 为例,会把下面块里的文本交给markdown去进行处理。


http://chatgpt.dhexx.cn/article/g3ZDyW2y.shtml

相关文章

MDI Jade6的安装(含ocx控件的安装、PDF索引建立、修改注册表)

前言 关于介绍及安装jade的资料及教程&#xff0c;上小木虫、六维、百度等一搜一大堆&#xff0c;这里不再详细介绍及逐一列举。 这里只谈干货&#xff0c;里面很多问题需要仔细摸索解决&#xff0c;这里就一一说明了。 记住&#xff1a;不管是安装文件还是所需要的文件&…

Jade6安装及PDF卡片导入

2020年是中国脱贫攻坚的收官之年&#xff0c;也是全面建成小康社会的关键一年。在这样一个具有标志性意义的年代&#xff0c;我觉得应该没有人像我一样还用着过渡版的Windows 8了。别问为什么不装Windows 10&#xff0c;因为电脑带不动&#xff0c;毕竟伴随我进行了十年的艰苦征…

Ubuntu系统重装Ubuntu系统

系统环境&#xff1a;Ubuntu18.04 目的&#xff1a;重装Ubuntu系统 步骤&#xff1a; 1. sudo usb-creator-gtk 2. 选择iso系统文件 Ubuntu 18.04.4.XXX.iso 3. 选择u盘&#xff0c;并选择Make Startup Disk 4. 制作完成后重启电脑&#xff0c;长按F12(联想笔记本&#xf…

【2021】重装ubuntu16.04系统

2021年3月3日19点47分 本人因为种种原因导致ubuntu16.04系统崩溃&#xff0c;现需要重装系统&#xff0c;故记录下这次重装ubuntu之旅。 原因&#xff1a;ubuntu16.04 - 检测到系统程序出现问题 一直在登录用户的界面&#xff0c;登录进去后再闪退出来&#xff0c;一直循环登…

重装Ubuntu系统及系列软件安装

重装Ubuntu系统及系列软件安装 【1】安装ubuntu20.04.03系统下载Ubuntu20.04.03系统更换系统apt的源 【2】CUDA和cudnn安装下载CUDA安装包并安装 【3】pycharm的安装【4】conda的安装【5】兼容Tf1和30显卡 【1】安装ubuntu20.04.03系统 下载Ubuntu20.04.03系统 【下载地址】h…

双系统重装Ubuntu

完全删除Ubuntu 1、右键此电脑-管理-磁盘管理&#xff0c;删除Ubuntu所在卷&#xff08;Ubuntu EFI分区无法删除&#xff09; 2、删除Ubuntu EFI分区 ①Win R 输入cmd打开终端&#xff0c;输入 diskpart 进入磁盘工具 ②输入 list disk 查看磁盘&#xff0c;输入 select d…

Windows重装Ubuntu系统

一&#xff0c;去官网下载Ubuntu镜像 二、下载镜像安装工具&#xff08;win32diskManger&#xff09; 下载之后完成安装 三、制作Ubuntu安装盘 打开win32diskManger 选择镜像文件&#xff0c;选择u盘&#xff0c;确认后写入&#xff0c;请备份好资料&#xff0c;写入后数据会格…

Ubuntu16.04重装系统

Ubuntu16.04重装系统 安装显卡驱动第一步 禁用nouveau第二步 下载驱动第三步 进入命令行模式&#xff0c;关闭lightdm第四步 安装显卡驱动第五步 查看Nivida 设置更新与源地址步骤 安装gnome桌面安装搜狗输入法安装谷歌浏览器安装Anaconda3安装Pycharm安装keras下载Cuda安装cuD…

装机(一) ubuntu server 系统安装图文教程

装机任务为Dell C4130服务器&#xff0c;安装ubuntu16.04系统&#xff0c;无图形界面。 第一步为了安装ubuntu系统我们需要先下载合适的系统&#xff0c;这里我们下载了ubuntu16.04LTS服务器版本&#xff0c;也就是server版本的系统。可以去官方网站下载http://www.ubuntu.org…

如何重装Ubuntu 系统

如果你弄坏了你的 Ubuntu 系统&#xff0c;并尝试了很多方法来修复&#xff0c;你最终放弃并采取简单的方法&#xff1a;重新安装 Ubuntu。 我们一直遇到这样一种情况&#xff0c;重新安装 Linux 似乎比找出问题并解决来得更好。排查 Linux 故障能教你很多&#xff0c;但你不会…

ubuntu重装系统

新的电脑主板带有UEFI功能&#xff0c;但是使用这个功能有很多问题。 1&#xff0c;系统稳定后不要再update了。 2&#xff0c;必须给UEFI分一个区&#xff0c;100M大小就够了&#xff0c;否则系统起不来 3&#xff0c;重装根分区&#xff0c;参照http://forum.ubuntu.org.c…

Windows还是Ubuntu重装系统,不用愁,傻瓜式安装

程序猿&#xff1a;妹子电脑装系统不用愁&#xff01;Windows还是Ubuntu都搞定&#xff01; 重装系统是不是很麻烦&#xff1f;是不是很烦重装系统&#xff0c;什么windows&#xff0c;什么Ubuntu&#xff08;linux),看上去就麻烦&#xff0c;那么小编今天就给你科普一下这些重…

【ubuntu重装系统后的软件配置_memo】

重装系统后系统环境恢复 备份安装系统常用的一些debvscode 更改sourcespip加速爬长城的家伙式儿安装ROS安装cmake安装git安装zsh顺便开个ssh提升幸福感的映射配置neovimplugins字体插件遇到的问题 锁键盘/鼠标小玩意儿 备份 实验时不起眼的图顺手写的脚本忘记从哪儿下载的资源…

Ubuntu系统重装 -- 制作启动盘、装机过程问题、环境配置

这篇文章是我为了记录第一次重装 Ubuntu 系统&#xff0c;也是对 Ubuntu 开发环境配置的一次总结。 Windows 系统的重装很简单&#xff0c;用 老毛桃 做一个 WinPE盘 然后下载 win10 镜像&#xff0c;启动,之后傻瓜式操作就可以&#xff0c;剩下的无非就是激活 Windows 等问题…

Ubuntu20.04系统重装

仍然采取用系统盘的方式重装&#xff0c;本次采用直接在系统盘中再次分区的方式 1、插入系统盘&#xff0c;点击电脑重启&#xff0c;出现图标的时候&#xff0c;按F1、F2、F10、F11键&#xff0c;进入Bios模式&#xff0c;选择第三列&#xff0c;进入内存盘&#xff0c;并且选…

【史上最全】重装ubuntu20.04系统基本环境配置

最近新买电脑重装ubuntu玩深度学习&#xff0c;踩了两天坑总结处下列流程 一、重装系统&#xff08;U盘方式&#xff09; ubuntu20.04镜像文件下载地址: Ubuntu 20.04.4 Desktop (64-bit) 在ubuntu官网下载.iso镜像文件&#xff0c;然后使用UltralSO软件制作系统启动盘&…

Ubuntu快速重装教程!拯救你的系统!

目录 1、删除旧分区 1.1删除除EFI分区外的Ubuntu分区 1.2删除EFI分区 2、安装Ubuntu 首先抱抱点进这个标题的小伙伴&#xff0c;你们一定是饱受现在系统的折磨才选择重装的。 &#xff08;答主也经历过&#xff0c;项目竞标的前两天系统崩溃&#xff0c;只能重装&#xf…

Ubuntu20.04重装系统过程(多图,含保存文件+卸载旧系统+安装新系统)

我又来了......隔一段时间重装一下&#xff0c;哭了。 重装三部曲&#xff1a; 确定已有的配置&#xff08;硬件和软件&#xff09;和需要保存的文件&#xff1b; 卸载linux系统&#xff1b; 重新安装linux系统。 一、查看电脑硬件信息 1. 查看磁盘信息df命令&#xff08;仅…

视锥frustum

视锥指的是一个实体形状&#xff0c;看起来像是一个顶部被平行于地基切除的金字塔。这就是一个透视相机渲染时能看到区域的形状。下面的思考实验有助于解释这个情况的成因。想象拿着一根直棍子&#xff08;比如扫帚把手或者铅笔&#xff09;的一端对着相机并拍照。如果棍子正对…

View Frustum Culling

作者:i_dovelemon 来源:CSDN 日期:2014 / 10 / 28 主题:View Frustum&#xff0c; Culling 引言 在前面的一篇文章获取View Frustum的6个面中讲述了如何根据View-Proj矩阵来获取View Frustum在世界坐标系中的6个平面。研究过场景管理的同学就会知道&#xff0c;在将图元数据…