基于Node.js模板引擎jade的示例分析

这篇文章主要为大家展示了“基于Node.js模板引擎jade的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于Node.js模板引擎jade的示例分析”这篇文章吧。

创新互联建站沟通电话:18980820575,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联建站网页制作领域十年,包括成都效果图设计等多个领域拥有多年的网站制作经验,选择创新互联建站,为网站锦上添花。

环境准备:

全局安装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
    h4 欢迎学习jade

1,标签按照html的缩进格式写

2,标签的属性可以采用圆括号

3,如果标签有内容,可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)

编译之后的index.html代码:



 
  
  
 
 
  

欢迎学习jade

 

二、class,id等其他属性与多行文本的书写

新建index2.jade文件,代码如下:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h2 jade template engine
    h2 jade template engine
    h2 jade template engine
    h2 jade template engine
    div#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h4.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      hello
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

执行编译命令:jade -P ghostwu.html 把index2.jade编译成ghostwu.html文件,编译之后的代码如下:



 
  
  jade template engine
 
 
  

jade template engine

  

jade template engine

  

jade template engine

  

jade template engine

  
  
  淘宝   
  

   1,this is    hello    2,test    3,string   

  

 1, this ishello 2, test     3, test string   

 

1,div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法

2,#abc.box1.box2.box3,全面没有给元素标签名称,默认就是给div标签加上这些属性

3,多行文本的两种写法

p.

1,this is
hello
2,test
3,string

多行文本第1种写法:p标签后面要跟一个. 里面用原始的html标签写法

p

| 1, this is
strong hello
| 2, test
| 3, test string

多行文本第2种写法: 文本前面用竖线 ( | ),标签后面跟内容

三、注释

jade模板代码:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h4 单行注释
    // div.box.box2 这是一段div
    h4 不会编译到html文件的注释
    //- div#box.box2.box3
    h4 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h4 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

编译之后:



 
  
  jade模板引擎学习-by ghostwu
 
 
  

单行注释

     

不会编译到html文件的注释

  

块注释,也叫多行注释

  

这里不是注释

  仙女   御姐  

1,单行注释

// div.box.box2 这是一段div

2,只在jade中注释,不会被编译到html文件

//- div#box.box2.box3

3,块注释( 多行文本注释 ),被注释的内容要另起一行

4,checkbox后面的显示文字部分 要注意,不要挨着属性的后面,要另起一行,写在竖线的后面

四、jade模板实战菜单

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

编译(jade index.jade -P -w)之后的效果: -w: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术

基于Node.js模板引擎jade的示例分析

五、解释变量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

#{}: 可以解释变量, toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h4 #{content}

编译命令:jade index2.jade -P -O data.json -O 指定一个json文件,把json文件的数据传递到模板

编译后的结果:



 
  
  JADE模板引擎学习-BY GHOSTWU
 
 
  

跟着ghostwu学习jade

 

以上是“基于Node.js模板引擎jade的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:基于Node.js模板引擎jade的示例分析
网站链接:http://cdiso.cn/article/jgepip.html

其他资讯