jade学习

jade安装?

nodeJs中输入以下命令

sudu npm install jade -g
jade -h

jade工具

jade语法

标签

以p标签为例

p

会转换为:

<p></p>

jade能自动识别自闭和标签:

input

会转换为:

<input/>

文本

标签中添加文本

p 欢迎加入wandoujia-fe

会转换为:

<p>欢迎加入wandoujia-fe</p>

标签中嵌套标签

直接跟写html一样就行

p Welcome to wandoujia fe, we want <b>you</b>

会转换为:

<p>Welcome to wandoujia fe, we want <b>you</b></p>

标签中有大段的块内容

方式一:在标签后面添加 .

比如一段js代码,注意是script后面有一个.

script.
    console.log(‘Welcome to join wandoujia-fe‘)
    console.log(‘We want you‘)

会转换为:

<script>
    console.log(‘Welcome to join wandoujia-fe‘)
    console.log(‘We want you‘)
</script>

方式二:每段前面添加|

script
    | console.log(‘Welcome to join wandoujia-fe‘)
    | console.log(‘We want you‘)

会转换为:

<script>
    console.log(‘Welcome to join wandoujia-fe‘)
    console.log(‘We want you‘)
</script>

属性

以 ()来分割属性

a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘

会转换为:

<a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>

注释

单行注释

// changed by yc-team

会转换为:

<!-- changed by yc-team -->

多行注释

body
  //
      p 测试代码by yaochun

会转换为:

<body>
<!--p 测试代码by yaochun
-->
</body>

不输出的注释

在单行注释上加一个短横线 -

//- 这段注释不会输出
p 文本测试by yaochun

会转换为:

<p>文本测试by yaochun</p>

注意: 很多文档里面提到的条件注释已经不再支持

doctype

添加一个doctype只需要doctype,然后再跟一个可选的值,默认是html

doctype html

会转换为:

<!DOCTYPE html>

注意!!!这种简写的方式已经被抛弃了~

可选值还有:

  • xml
  • transitional
  • srict
  • frameset
  • 1.1
  • basic
  • mobile

设置id或class

标签后面跟上#id,.classname,如果没有标签则使用默认标签div

#content
p#info
a.btn

会转换为:

<div id="content"></div>
<p id="info"></p>
<a class="btn"></a>

1个id和多个class

连着写即可

a#download-btn.btn.blue-btn

会转换为:

<a id="download-btn" class="btn blue-btn"></a>

代码

不会被缓冲代码

    - for (var i = 0; i < 3; i++)
    li wandoujia-fe

会转换为:

<li>wandoujia-fe</li>
<li>wandoujia-fe</li>
<li>wandoujia-fe</li>

被缓冲代码

    p= ‘Welcome to wandoujia fe, we want you‘

会转换为:

<p>Welcome to wandoujia fe, we want you</p>

这里注意一下 =默认会转义内容

p= ‘Welcome to wandoujia fe, we want <b>you</b>‘

会转换为:

<p>Welcome to wandoujia fe, we want &lt;b&gt;you&lt;/b&gt;</p>

如果不想被转义的,在=前面添加!

p!= ‘Welcome to wandoujia fe, we want <b>you</b>‘

会转换为:

<p>Welcome to wandoujia fe, we want <b>you</b></p>

使用变量

    - var name = ‘yaochun‘
    p my name is #{name}

会转换为:

<p>my name is yaochun</p>

如果要输出 #{},那就得使用/来转义

- var name = ‘yaochun‘
p my name is \#{name}

会转换为:

<p>my name is #{name}</p>

变量中的特殊字符会被转义,如:

- var name = ‘<script></script>‘
| #{name}

会转换为:

&lt;script&gt;&lt;/script&gt;

如要得到不转义的,用!替换#来调用

    - var name = ‘<script></script>‘
    | !{name}

会转换为:

<script></script>

|其实就是管道,一般也可以定义一段文本

循环

语法结构:

each VAL[,KEY] in OBJ
  • VAL是值
  • KEY是键,可选
  • OBJ是对象,array or object

数组实例

    - var jobs = ["fe", "wandoujia", "beijing", "We want you"]
    each job in jobs
        li= job

会转换为:

<li>fe</li>
<li>wandoujia</li>
<li>beijing</li>
<li>We want you</li>

对象实例

- var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
each val,key in jobs
    li #{key} : #{val}

会转换为:

<li>catagory : fe</li>
<li>company : wandoujia</li>
<li>local : beijing</li>

Case

case主要的作用和js里面的switch一样

方式一 本文推荐的方式

- var apples = 1
case apples
    when 0
        p you have no apples
    when 1
        p you have an apple
    default
        p you have #{apples} apples

会转换为:

<p>you have an apple</p>

方式二

- var apples = 1
    case apples
      when 0: p you have no apples
       when 1: p you have an apple
      default: p you have #{apples} apples

方式三

有些时候,确实有需求合并一些when的情况

- var apples = 1
  case apples
    when 0
     when 1
       p you have few apples
    default
       p you have #{apples} apples

当apples这个值为0或者1的时候会转换为:

<p>you have few apples</p>

过滤器

支持markdown

注意:必须是已经安装 markdown-js 或者 node-discount

:markdown
    我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至zhangyaochun@wandoujia.com

会转换为:

<p>我们来自豌豆荚前端,欢迎有志之士加盟,简历发送至[email protected]</p>

Mixins

无参数的mixin

mixin join
  ul
    li 我们需要一帮人
    li 喜欢前端
    li 了解前端
    li 愿意在前端不断学习奋斗的
    li 你是吗?
    li 快来加入我们把

+join()

会转换为:

<ul>
    <li>我们需要一帮人</li>
    <li>喜欢前端</li>
    <li>了解前端</li>
    <li>愿意在前端不断学习奋斗的</li>
    <li>你是吗?</li>
    <li>快来加入我们把</li>
</ul>

有参数的mixin

mixin join(company)
  ul
    li 我们 #{company} 需要一帮人
    li 喜欢前端
    li 了解前端
    li 愿意在前端不断学习奋斗的
    li 你是吗?
    li 快来加入我们 #{company} 把

+join(‘wandoujia‘)

会转换为:

<ul>
    <li>我们 wandoujia 需要一帮人</li>
    <li>喜欢前端</li>
    <li>了解前端</li>
    <li>愿意在前端不断学习奋斗的</li>
    <li>你是吗?</li>
    <li>快来加入我们 wandoujia 把</li>
</ul>

minxin中支持block

mixin join(company)
  ul
    li 我们需要一帮人
    li 喜欢前端
    li 了解前端
    li 愿意在前端不断学习奋斗的
    if block
      block
    else
      li 你是吗?
      li 快来加入我们把

+join(‘wandoujia‘)
  li 我们这有神马?
  li 我们这个有一帮能折腾的老师阿姨
  li 我们这有美丽的阿姨
  li 我们每周都有技术交流
  li 我们这可以用很多开源的新技术

会转换为:

<ul>
    <li>我们需要一帮人</li>
    <li>喜欢前端</li>
    <li>了解前端</li>
    <li>愿意在前端不断学习奋斗的</li>
    <li>我们这有神马?</li>
    <li>我们这个有一帮能折腾的老师阿姨</li>
    <li>我们这有美丽的阿姨</li>
    <li>我们每周都有技术交流</li>
    <li>我们这可以用很多开源的新技术</li>
</ul>

minxin中还支持attributes

mixin link(href, name)
  a(class!=attributes.class, title!=attributes.title, href=href)= name

+link(‘http://wandoujia.com/join‘, ‘豌豆荚前端招聘‘)(class="btn", title="招聘啦,小伙伴快来点")

会转换为:

<a title="招聘啦,小伙伴快来点" href="http://wandoujia.com/join" class="btn">豌豆荚前端招聘</a>

有点类似freemaker,通过include来载入一些jade模板

如需转载,烦请注明出处:http://www.w3cplus.com/html/jade.html

时间: 2024-10-11 00:49:12

jade学习的相关文章

Jade学习笔记

初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置:link(rel='stylesheet', href='/stylesheets/style.css'); 变量的定义:- var users = ["Sally","Joseph","Sam","Mike"]  不要var也可

Jade学习(五)之命令编译执行jade

首先全局安装jade,我们就可以使用jade 命令了! jade index.jade // 解析后生成压缩代码后的index.html 如果我们不想生成的index.html文件进行压缩,那么我们可以执行 jade -P index.jade 如果我们想实时看到我们的编译效果,那么我们应该如何操作呢? jade -P -w index.jade 使用命令行传递数据 方法一: jade -P -w index.jade --obj '{"b":"hello1"}'/

[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

一.转义与非转义 jade模板文件代码: 1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title jade学习-by ghostwu 6 body 7 h3 转义与非转义 8 - var userName = 'ghostwu' 9 - var str = '<script>alert("ghostwu");</script>' 10 div #{userName} 11 div #{str} 1

【Jade】jade的一些使用技巧

最近在学习使用Node的express框架来搭建一个web网站,其中会涉及到视图渲染方面的东西.这可以借助ejs或者jade这些模板引擎来辅助渲染(模板引擎有很多,使用得最多的.较为完善的就是ejs和jade). 关于选择哪个模板引擎比较好?网上也有不少的说法,我也上网查看了一下,基本上是"一边倒",然而最后我还是没能从网上得出哪个模板引擎的使用比较好.ejs的语法和一般的PHP.JSP比较相似,是使用<% code %>这种尖括号百分号包含内容的方式,看起来不难,学习的成

Jade模板引擎学习(二)语法:代码、变量、循环、过滤器及mixin

Jade语法 一.代码 不会被缓冲代码 ul - for(var i=0; i<3; i++) li Jade Engine 会转换为: <ul> <li>Jade Engine</li> <li>Jade Engine</li> <li>Jade Engine</li> </ul> 被缓冲代码 p= 'Hello Jade' 会转换为: <p>Hello Jade</p> 注意:

学习前端模板引擎 jade (一)

一.为什么要学习jade? 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版. 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了. 废话不多说,直接切入正题. 二.开始装jade. jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的

Jade模板引擎学习(一)安装及基本语法

Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式 可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀 AST过滤器  过滤器  ... 二

我最喜欢的模板jade(pug)学习和使用

由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https://github.com/pugjs/pug # 文档地址https://pugjs.org/language/inheritance.html # 入门指南https://pugjs.org/api/getting-started.html 安装pug # 全局安装cli npm install pug-

nodejs学习(二) ---- express中使用模板引擎jade

系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.jade 和 footer.jade,下面教程会一步步创建) 页面解析出的样子如下图.完全是html标签 一.jade 模板引擎 介绍 模板引擎是一个库,或者一个使用一定的规则或者语言来解释数据并渲染视图的框架.模板引擎处理过的最终结果是一个视图页面,也就是html页面或者用户图形界面GUI.在MVC