首页
所有分类
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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
Mar 01 Javascript
javascript中递归的两种写法
Jan 17 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
微信小程序自定义导航教程（兼容各种手机）
Dec 12 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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
计划书(118) 评语(336) 感谢信(72) 倡议书(159) 寄语(276) 制度(225) 活动总结(790) 接收函(23) 请假条(31) 保证书(97)
You might like
建立动态的WML站点(二)
2006/10/09 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
jQuery中文入门指南，翻译加实例，jQuery的起点教程
2007/02/09 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python 日期排序的实例代码
2019/07/11 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
美国波西米亚风格精品店：South Moon Under
2019/10/26 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
上课说话检讨书大全
2014/01/22 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
经费申请报告范文
2015/05/18 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS