菜单

node前端模板引擎Jade之标签的基本写法_node,一天学会Jade模板引擎

2020年3月28日 - 首页

1、文书档案表明

Jade是什么

Jade是基于Node.js的html模板引擎,相似于Php的斯Matty,Java的Velocity,模板引擎并非怎么奥密的才具,它实际便是将气象手艺糅合的一种落成机制照旧技巧。这么说很好掌握:静态页面中怎么着更简便易行温婉插入动态变量

我们在起头写一个 html 页面包车型地铁时候,首先要写上 DOCTYPE
文书档案申明的,今后平日景况下我们都以应用 HTML5 的文书档案证明格局,那么在 jade
里面我们相应怎么写吗?

安装Jade

node前端模板引擎Jade之标签的基本写法_node,一天学会Jade模板引擎。Jade的安装跟普通Node.js包同样,
全局安装:

npm install jade -g

安装到地点文件

npm install jade --save

在 jade 里面编写文书档案表明有2种方法:

Jade特点

咱俩得以直接在 jade 文件之中写 doctype html 就能够 jade
为大家提供了三个粗略的写法,(可是好像 jade
在进级之后的新本子中不推荐使用此办法了 -_-||| )

文书档案注脚和头尾标签

标签和文书之间有空格
父级和子级标签强制2个空格

doctype html
  html
    head
      title jade
    body

保留文件为index.jade

自然,jade 还暗中同意支持其余类其余文书档案申明,只需求运用 doctype
跟上上面包车型地铁选项就能够。jade 暗许扶持的有:

指令行编写翻译Jade文件

我们再改良下index.jade文件

doctype html
  html
    head
      title jade
    body
      h1

在命令行中输入:

jade index.jade

这时本地目录中多出个index.html的公文,展开看下:

<!DOCTYPE html><html><head><title>jade</title></head><body></body></html>

这种编写翻译出来的文本是无缩进的,如果大家想要有缩进的咋做?

jade -P index.jade

看下文件是或不是我们想要的格式:

<!DOCTYPE html>
<html>
  <head>
    <title>jade</title>
  </head>
  <body></body>
</html>

假定我们想一边写jade一边看编写翻译好的html,该如何是好?

jade -P -w index.jade

那般就足以实时编写翻译了

var doctypes = exports.doctypes = { '5': '', 'xml': '', 'default': '', 'transitional': '', 'strict': '', 'frameset': '', '1.1': '', 'basic': '', 'mobile': ''};

标签语法

跟普通的标签相像的写法:

html
  head
  body
    header
    section
    footer
    br
    hr
    span

doctype 对大小写是不灵敏的, 所以上边八个是相仿的效用:

文本属性和值

属性语法,class和id能够用.className#idName的写法,也足以在标签后边加上(class='className',id='idName')的写法:

doctype html
html
  head
    title imooc jade study
  body
    h1(class='class_h1',id='id_h1')
    h2(class='class_h2',id='id_h2')
      a(href="http://wwww.taobao.com",class='a_taobao')
        span 淘宝

<!DOCTYPE html>
<html>
  <head>
    <title>jade</title>
  </head>
  <body>
    <h1 id="id_h1" class="class_h1"></h1>
    <h2 id="id_h2" class="class_h2"><a href="http://wwww.taobao.com" class="a_taobao">淘宝</a></h2>
  </body>
</html>

div标签能够回顾div,后边一贯跟属性和值

doctype Defaultdoctype default

Jade注释和标准注释

注释分单行注释非缓冲注释块注释,写法如下:

doctype html
html
  head
    title imooc jade study
  body
    h2 注释
    h3 单行注释
    // h2.title1
    h3 非缓冲注释
    //- #id.class1
    h3 块注释
    //-
      h1(class='class_h1',id='id_h1')
      h2(class='class_h2',id='id_h2')
        a(href="http://wwww.taobao.com",class='a_taobao')
          span 淘宝

jade 兼容IE系列

doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--><![endif]-->
head
  meta(charset='utf-8')
  title imooc jade study
body
  h2 注释
  h3 单行注释
  // h2.title1
  h3 非缓冲注释
  //- #id.class1
  h3 块注释
  //-
    h1(class='class_h1',id='id_h1')
    h2(class='class_h2',id='id_h2')
      a(href="http://wwww.taobao.com",class='a_taobao')
        span 淘宝
</html>

举个例子:假设大家要想写 XHTML 1.0 Strict 文档评释,则足以如此写:

doctype strict

复制代码 代码如下:

2、标签

jade 中的标签的写法特别的简约,便是二个单词。

doctype htmlhtml head title body

jade 是以严苛的缩进来分别标签的开端和得了的,默以为2个空格表示缩进。

若是大家要写二个标签並且富含内容,比方说要写二个题名,大家只须要在标签单词前边加一个空格,然后跟上内容就能够。

h1 this is a title.p this is a paragraph.

this is a title.

this is a paragraph.

一部分时候,大家会供给输出一些独特制版格式的文本恐怕是为着升高代码的阅读性,要求出示出如下的机能:

  1. 001 2. 002 3. 003 4. 004

这正是说大家在 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 aaa 2. 002 3. 003 4. 004
  1. 001 aaa 2. 002 3. 003 4. 004

3、标签的习性和属性值

h1 p 等等这一个标签,大家通常都会给他俩写上id & class属性的,那么那在 jade
中应该怎么写吗?和 zen coding 的语法相仿,大家只须求这么写:

h1#id.class this is a title.p#j-text.text this is a paragraph.

this is a title.

this is a paragraph.

等等,那自身一旦想增添多少个 class 咋办吧?那样办:

h1#id.class1.class2.class3 this is a title.p#j-text.text this is a paragraph.

this is a title.

this is a paragraph.

何以?写 div 写烦了?那就不写咯。

#id.class#id.class1.class2 this is a div without tags.

this is a div without tags.

此处要证实一下,在 jade 的语法里面,只有 div 标签能够简单不写.

说完了 id 和 class,我们再来讲一下标签别的的习性应该怎么增添。jade
里增添任何属性和值的语法也和 zen coding
相近,大家须要在标签前边加上小括号的格式写就好了,如果有几性情情,中间以逗号进行分割。

举例上面包车型客车 id 和 class 的写法大家就足以改写成:

h1 this is a title.p this is a paragraph.

this is a title.

this is a paragraph.

说来讲去还是那三个个性,烦了?那我们换三个呢:

a(herf="/index.html", title="this is a link.", target="_blank", data-u) index.html

index.html

那么难点就来了,借使大家要写叁个单属性应该怎么写?比方给表单元素增添checked属性:

input(type="checkbox", name="all", checked, value="全选")

如上正是本文的全部内容,希望对大家的就学抱有利于,也希望我们多多指教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图