首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 17, 2017

环境准备：

全局安装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>

以上这篇基于Node.js模板引擎教程-jade速学与实战1就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

ghostwu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
js select option对象小结
Dec 20 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
JS打印组合功能
Aug 04 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
RTMP(1) 双向链表(6) TypeScript(2) text-shadow(1) 缓存机制(1) keeplive_timeout(1) location(2) http_stub_status_module(1) zabbix(9) 区块链(2)
You might like
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP中Array相关函数简介
2016/07/03 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
详解Python中的四种队列
2018/05/21 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
汉语言文学职业规划
2014/02/14 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
经典促销广告词大全
2014/03/19 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
商场促销活动策划方案
2014/08/18 职场文书
大学副班长竞选稿
2015/11/21 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers