JavaScript
搜索
分类

基于Node.js模板引擎教程-jade速学与实战1

作者：ghostwu 时间：2024-05-13 09:28:29　

环境准备：

全局安装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 -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)

编译之后的index.html代码：


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <h3>欢迎学习jade</h3>
</body>
</html>

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

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


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

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


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>jade template engine</title>
</head>
<body>
 <h1>jade template engine</h1>
 <h1>jade template engine</h1>
 <h1>jade template engine</h1>
 <h1>jade template engine</h1>
 <div id="box" class="box1 box2 box3"></div>
 <div id="abc" class="box1 box2 box3"></div>
 <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
 <input type="button" value="点我"><br>
 <p>
  1,this is
  <strong>hello</strong>
  2,test
  3,string
 </p>
 <p> 1, this is<strong>hello</strong> 2, test
   3, test string
 </p>
</body>
</html>

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

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

3，多行文本的两种写法

p.

1,this is
<strong>hello</strong>
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
   h3 单行注释
   // div.box.box2 这是一段div
   h3 不会编译到html文件的注释
   //- div#box.box2.box3
   h3 块注释,也叫多行注释
   //-
     input(type='checkbox', name='meinv', value='仙女') 仙女
     input(type='checkbox', name='meinv', value='御姐') 御姐
   h3 这里不是注释
   input(type='checkbox', name='meinv', value='仙女')
   | 仙女
   input(type='checkbox', name='meinv', value='御姐')
   | 御姐

编译之后:


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>jade模板引擎学习-by ghostwu</title>
</head>
<body>
 <h3>单行注释</h3>
 <!-- div.box.box2 这是一段div-->
 <h3>不会编译到html文件的注释</h3>
 <h3>块注释,也叫多行注释</h3>
 <h3>这里不是注释</h3>
 <input type="checkbox" name="meinv" value="仙女">仙女
 <input type="checkbox" name="meinv" value="御姐">御姐
</body>
</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速学与实战1

五、解释变量


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
   h3 #{content}

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

编译后的结果：


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>JADE模板引擎学习-BY GHOSTWU</title>
</head>
<body>
 <h3>跟着ghostwu学习jade</h3>
</body>
</html>

来源：http://www.cnblogs.com/ghostwu/archive/2017/09/16/7531956.html

标签：jade,模板引擎
0
投稿

猜你喜欢

  • javascript设计模式 – 桥接模式原理与应用实例分析

    2024-04-26 17:12:09

  • python3 pillow模块实现简单验证码

    2021-07-04 11:10:44

  • 基于JavaScript实现弹幕特效

    2024-04-22 22:30:23

  • 浅谈Mybatis+mysql 存储Date类型的坑

    2024-01-17 19:13:14

  • sqlserver数据库导入数据操作详解(图)

    2024-01-15 09:00:11

  • php将12小时制转换成24小时制的方法

    2023-11-21 15:56:08

  • 一文搞懂MySQL元数据锁(MDL)

    2024-01-14 18:29:08

  • vue使用v-for实现hover点击效果

    2024-05-02 17:09:03

  • 如何创建SQL Server 2000故障转移群集

    2024-01-23 17:00:23

  • Vue.js实战之使用Vuex + axios发送请求详解

    2023-07-02 17:03:48

  • 如何决定是否将登录内容保存到Cookie里？

    2009-12-16 18:54:00

  • Python3 操作符重载方法示例

    2021-03-18 11:38:03

  • Python Pandas聚合函数的应用示例

    2022-12-13 22:39:31

  • Python使用socket实现组播与发送二进制数据

    2021-05-09 13:44:28

  • 通过自定义字段重新排序 WordPress 文章方法

    2023-12-14 21:52:53

  • python中random模块详解

    2023-07-30 02:29:23

  • python实现的各种排序算法代码

    2022-06-17 05:41:19

  • pytest中文文档之编写断言

    2023-05-05 04:11:34

  • Python学习笔记之open()函数打开文件路径报错问题

    2021-10-05 23:25:34

  • PHP 中关于ord($str)&gt;0x80的详细说明

    2024-05-13 09:24:13
    • asp之家 网络编程 m.aspxhome.com