Nodejs学习Jade模板引擎学习1
博客专区 > webphp 的博客 > 博客详情
Nodejs学习Jade模板引擎学习1
webphp 发表于5个月前
Nodejs学习Jade模板引擎学习1
  • 发表于 5个月前
  • 阅读 13
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

最近在学习nodejs的时候,用到了express发现模板里有jade的模板,今天第一天学习,把学习笔记分享一下,从实际意义上来说,Jade是为了提高前端开发人员的效率而产生的。Jade中,空格、换行、缩进都是有意义的,由这些决定了标签和内容的嵌套关系。典型地,在HTML中,开始标签+内容+结束标签的模式,被改造成开始标签+空格+内容的模式,

如:

HTML

<span class="myclass">text content</span>

Jade

span.myclass text content

其中,.myclass和text中间的空格不能省略,省略则无法进行解析。

嵌套关系则由缩进决定,如:

HTML

<div><p>text content</p></div>

Jade

div
p
text content

div
p text content

类和ID则直接跟在标签后面,如:

div.aClass.bClass.#idOfDiv

注释支持单行//进行注释。还有更多语法上的说明,可以在使用时参考此处。

作为模板语言,Jade支持文件的包含include和扩展extends的,分别说明:include比较符合正常思维,什么地方缺某部分包含进来即可;extend则使用先给
出整体,再替换局部的模式。

include的例子:

//- index.jade
doctype html
html
include ./public/header.jade
body
h1 include demo
p content
include ./public/footer.jade

extends的例子

//- base.jade
doctype html
html
head
block title
title Default Title
body
block content
//- index.jade
extends ./public/base.jade

//- 进行替换
block title
title New Title

block content
h1 extends demo
p content

今天就学了怎么多,反续在分享自己的学习笔记

标签: jade nodejs
共有 人打赏支持
粉丝 2
博文 89
码字总数 90487
×
webphp
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: