编程 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，多行文本的两种写法

1,this is
<strong>hello</strong>
2,test
3,string

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

| 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中的var_dump函数实现代码

Sep 07 Javascript

JavaScript异步调用定时方法并停止该方法实现代码

Mar 16 Javascript

通过onmouseover选项卡实现img图片的变化

Feb 12 Javascript

JQuery实现当鼠标停留在某区域3秒后自动执行

Sep 09 Javascript

jQuery实现径向动画菜单效果

Jul 17 Javascript

JavaScript的new date等日期函数在safari中遇到的坑

Oct 24 Javascript

浅谈jquery采用attr修改form表单enctype不起作用的问题

Nov 25 Javascript

详解Vue2.0里过滤器容易踩到的坑

Jun 01 Javascript

Vue Element UI + OSS实现上传文件功能

Jul 31 Javascript

js 实现watch监听数据变化的代码

Oct 13 Javascript

JS 数组和对象的深拷贝操作示例

Jun 06 Javascript

微信小程序仿抖音短视频切换效果的实例代码

Jun 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

You might like

欧美媒体选出10年前最流行的17部动画

2017/01/18 日漫

curl实现站外采集的方法和技巧

2014/01/31 PHP

CodeIgniter框架提示Disallowed Key Characters的解决办法

2014/04/21 PHP

CI框架中libraries,helpers,hooks文件夹详细说明

2014/06/10 PHP

主流PHP框架的优缺点对比分析

2014/12/25 PHP

PHP实现的二分查找算法实例分析

2017/12/19 PHP

thinkphp框架实现路由重定义简化url访问地址的方法分析

2020/04/04 PHP

Javascript 更新 JavaScript 数组的 uniq 方法

2008/01/23 Javascript

autoIMG 基于jquery的图片自适应插件代码

2011/03/12 Javascript

javascript中通过arguments参数伪装方法重载

2014/10/08 Javascript

JavaScript中的object转换成number或string规则介绍

2014/12/31 Javascript

javascript等号运算符使用详解

2015/04/16 Javascript

删除javascript所创建子节点的方法

2015/05/21 Javascript

js仿黑客帝国字母掉落效果代码分享

2020/11/08 Javascript

js实现无限级树形导航列表效果代码

2015/09/23 Javascript

使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

2015/12/06 Javascript

js实现上传图片及时预览

2016/05/07 Javascript

CKEditor扩展插件：自动排版功能autoformat插件实现方法详解

2020/02/06 Javascript

vue+springboot图片上传和显示的示例代码

2020/02/14 Javascript

vue fetch中的.then()的正确使用方法

2020/04/17 Javascript

JavaScript实现无限轮播效果

2020/11/19 Javascript

深入浅析Python字符编码

2015/11/12 Python

Python Numpy 实现交换两行和两列的方法

2019/06/26 Python

flask框架json数据的拿取和返回操作示例

2019/11/28 Python

利用 PyCharm 实现本地代码和远端的实时同步功能

2020/03/23 Python

Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年

2020/04/16 Python

html5 跨文档消息传输示例探讨

2013/04/01 HTML / CSS

canvas实现圆形进度条动画的示例代码

2017/12/26 HTML / CSS

日语专业个人求职信范文

2014/02/02 职场文书

争论的故事教学反思

2014/02/06 职场文书

学习雷锋精神心得体会范文

2014/03/12 职场文书

党性观念心得体会

2014/09/03 职场文书

大明湖导游词

2015/02/03 职场文书

学生会辞职信

2015/03/02 职场文书

2016五一手机促销广告语

2016/01/28 职场文书

vue.js 使用原生js实现轮播图

2022/04/26 Vue.js