node前端模板引擎Jade之标签的基本写法
1、文档声明
我们在开始写一个 html 页面的时候，首先要写上 DOCTYPE 文档声明的，现在通常情况下我们都是采用 HTML5 的文档声明方式，那么在 jade 里面我们应该怎么写呢？
在 jade 里面编写文档声明有2种方式：
- 我们可以直接在 jade 文件里面写 doctype html 即可
- jade 为我们提供了一个简单的写法，(不过好像 jade 在升级之后的新版本中不推荐使用此方法了 -_-||| )
当然，jade 还默认支持其他类型的文档声明，只需要使用 doctype 跟上下面的选项即可。jade 默认支持的有:
var doctypes = exports.doctypes = {
'5': '<!DOCTYPE html>',
'xml': '<?xml version="1.0" encoding="utf-8" ?>',
'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};
doctype 对大小写是不敏感的, 所以下面两个是一样的效果:
doctype Default doctype default
例如：如果我们要想写 XHTML 1.0 Strict 文档声明，则可以这样写：
doctype strict
编译结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2、标签
jade 中的标签的写法非常的简单，就是一个单词。
doctype html html head title body
以上代码会被编译成:
<!DOCTYPE html> <html> <head> <title></title> </head> <body></body> </html>
jade 是以严格的缩进来区分标签的开始和结束的，默认为2个空格表示缩进。
如果我们要写一个标签并且带有内容，比如说要写一个标题，我们只需要在标签单词后面加一个空格，然后跟上内容即可。
h1 this is a title. p this is a paragraph.
编译结果为：
<h1>this is a title.</h1>
<p>this is a paragraph.</p>
有的时候，我们会需要输出一些特殊排版格式的文本或者是为了提高代码的阅读性，需要显示出如下的效果：
<p>
1. 001
2. 002
3. 003
4. 004
</p>
那么我们在 jade 中应该怎么写呢，这里 jade 给我们提供了两种方式，第一种是在每一行前面加上一个 | 和空格：
p | 1. 001 | 2. 002 | 3. 003 | 4. 004
第二种方法是：在标签名后面紧跟一个 . 号。则此标签下面的内容会被 jade 解析为一个代码段：
p. 1. 001 2. 002 3. 003 4. 004
这下有的同学就傻傻分不清了，这两种方式到底有什么区别呢？这里我们就不得不说到标签混排，如果我们有这样一个需求，在上面的代码中 1 的后面需要加一个 strong 标签。
首先我们说第一种情况下，我们的写法：
p | 1. 001 strong aaa | 2. 002 | 3. 003 | 4. 004
如果是第二种写法的话，我们就需要这样写：
p. 1. 001 <strong>aaa</strong> 2. 002 3. 003 4. 004
编译结果如下：
<p>
1. 001
<strong>aaa</strong>
2. 002
3. 003
4. 004
</p>
3、标签的属性和属性值
h1 p 等等这些标签，我们通常都会给他们写上id & class属性的，那么这在 jade 中应该怎么写呢？和 zen coding 的语法一样，我们只需要这样写：
h1#id.class this is a title. p#j-text.text this is a paragraph.
编译结果为：
<h1 id="id" class="class">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>
等等，那我要是想添加多个 class 怎么办呢？这样办：
h1#id.class1.class2.class3 this is a title. p#j-text.text this is a paragraph.
编译结果为：
<h1 id="id" class="class1 class2 class3">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>
什么？写 div 写烦了？那就不写咯。
#id.class #id.class1.class2 this is a div without tags.
编译结果为：
<div id="id" class="class"></div>
<div id="id" class="class1 class2">this is a div without tags.</div>
这里要说明一下，在 jade 的语法里面，只有 div 标签能够省略不写.
说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。
比如上面的 id 和 class 的写法我们就可以改写成：
h1(id="id", class="class") this is a title. p(id="j-text", class="text") this is a paragraph.
结果是一样的：
<h1 id="id" class="class">this is a title.</h1>
<p id="j-text" class="text">this is a paragraph.</p>
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
编译结果为：
<a herf="/index.html" title="this is a link." target="_blank" data-uid="1000">index.html</a>
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选")
编译结果为：
<input type="checkbox" name="all" checked="checked" value="全选"/>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Node.js+jade抓取博客所有文章生成静态html文件的实例
这篇文章,我们就把上文中采集到的所有文章列表的信息整理一下,开始采集文章并且生成静态html文件了.先看下我的采集效果,我的博客目前77篇文章,1分钟不到就全部采集生成完毕了,这里我截了部分的图片,文件名用文章的id生成的,生成的文章,我写了一个简单的静态模板,所有的文章都是根据这个模板生成的. 项目结构: 好了,接下来,我们就来讲解下,这篇文章主要实现的功能: 1,抓取文章,主要抓取文章的标题,内容,超链接,文章id(用于生成静态html文件) 2,根据jade模板生成html文件 一.抓取文
-
详解Node.js模板引擎Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且你只需要你写开始标签--注意:不需要加"<>".因为Jade会帮我们渲染闭合和开始标签.例如: body div h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近. div footer © Pandora 上面的Jad
-
node前端开发模板引擎Jade的入门
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.为了使用户界面与业务数据(内容)分离,就产生了『模板引擎』这个概念. 说的简单点,模板引擎就是一个字符串中有几个变量待定,通过模板引擎函数把数据动态的塞进去. 今天我们就来聊一聊 Jade 的使用方法和语法说明.Jade官网:jade-lang.com/ Jade 命令行工具
-
vue 使用Jade模板写html,stylus写css的方法
日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的步骤和提高了效率. 安装包 // 安装jade包 npm install jade jade-loader --save-dev // 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装 npm install stylus stylus-loader --save-dev 配置文件 // webpack.base.
-
基于Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade的命令行用法 一.在项目目录下新建index.jade文件 inde.jade代码: doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade 1,标签按照html的缩进格式写 2,标签的属性可以采用圆括号 3,如果标签有
-
基于模板引擎Jade的应用(详解)
有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!) 例子: js: const jade = require('jade'); console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))
-
node+express+jade制作简单网站指南
1.建立工程文件夹:my_jade 2.下载express和jade包到本地.我个人不喜欢下载成全局的,我喜欢下到工程文件夹中去. 3.建立相关的文件夹和文件. index.js: style.css gys.jade代码: index.jade: layout.jade app.js 运行app.js:node app.js; 在浏览器中预览: 在看一个不使用页面布局的例子: 修改index.js 修改app.js 运行app.js在浏览器中预览: 单击提交 会触发ajax. .本文就先到这里
-
Nodejs express框架一个工程中同时使用ejs模版和jade模版
在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使用两个模版的工作 1.consolidate.js cd 到项目目录: npm install consolidate --save 打开项目的app.js(也许你的叫其他名字) 把app.js的形如下面的代码片段 app.set('view engine', 'jade'); 改为 var eng
-
Node.js 使用jade模板引擎的示例
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal
-
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
接着这篇文章Node.js+jade抓取博客所有文章生成静态html文件的实例继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件. 那么我选择的数据库是mongodb,为什么用这个数据库,因为这个数据库是基于集合,数据的操作基本是json,与dom模块cheerio具有非常大的亲和力,cheerio处理过滤出来的数据,可以直接插入mongodb,不需要经过任何的处理,非常的便捷,当然跟node.js的亲和力那就不用说了,更重要的是,性能很棒.这