首页
所有分类
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 对象比较实现代码
Apr 27 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
微信小程序实现红包功能（后端PHP实现逻辑）
Jul 11 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
vue调用本地摄像头实现拍照功能
Aug 14 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
SeaTunnel(1) OpenAI baselines(1) 面向接口(1) Odoo(1) ElementTree(1) tkFileDialog(1) OpenGL(1) BeautifulSoup4(2) ftpserver(1) tfx(1)
You might like
php过滤所有的空白字符（空格、全角空格、换行等）
2015/10/27 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS实现环形进度条（从0到100%）效果
2016/07/05 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python多进程使用函数封装实例
2020/05/02 Python
大三学生学年自我鉴定
2014/09/12 职场文书
骨干教师申报材料
2014/12/17 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
教师节校长致辞
2015/07/31 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB