[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

2024-06-20 02:58

本文主要是介绍[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

环境准备:

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后,可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码:

1 doctype html
2 html
3     head
4         meta(charset='utf-8')
5         title
6     body
7         h3 欢迎学习jade

语法规则:

1, 标签按照html的缩进格式写

2,标签的属性可以采用圆括号

3,如果标签有内容,可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件,-P( 把代码整理成缩进格式的,如果不带这个参数,index.html就是压缩格式,不利于阅读)

编译之后的index.html代码:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6   </head>
 7   <body>
 8     <h3>欢迎学习jade</h3>
 9   </body>
10 </html>

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

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

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         title jade template engine
 6     body
 7         h1 jade template engine
 8         h1 jade template engine
 9         h1 jade template engine
10         h1 jade template engine
11         div#box.box1.box2(class='box3')
12         #abc.box1.box2.box3
13         h3.box1.box2(class='abc def')
14         a(href='http://www.taobao.com',
15         target = 'blank') 淘宝
16         input(type='button', value='点我')
17         br
18         p.
19             1,this is
20             <strong>hello</strong>
21             2,test
22             3,string
23         p
24             |   1, this is
25             strong hello
26             |   2, test
27             |   3, test string

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

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>jade template engine</title>
 6   </head>
 7   <body>
 8     <h1>jade template engine</h1>
 9     <h1>jade template engine</h1>
10     <h1>jade template engine</h1>
11     <h1>jade template engine</h1>
12     <div id="box" class="box1 box2 box3"></div>
13     <div id="abc" class="box1 box2 box3"></div>
14     <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
15     <input type="button" value="点我"><br>
16     <p>
17       1,this is
18       <strong>hello</strong>
19       2,test
20       3,string
21     </p>
22     <p>  1, this is<strong>hello</strong>  2, test
23         3, test string
24     </p>
25   </body>
26 </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模板代码:
 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         title jade模板引擎学习-by ghostwu
 6     body
 7         h3 单行注释
 8         // div.box.box2 这是一段div
 9         h3 不会编译到html文件的注释
10         //- div#box.box2.box3
11         h3 块注释,也叫多行注释
12         //- 
13             input(type='checkbox', name='meinv', value='仙女') 仙女
14             input(type='checkbox', name='meinv', value='御姐') 御姐
15         h3 这里不是注释
16         input(type='checkbox', name='meinv', value='仙女')
17         | 仙女
18         input(type='checkbox', name='meinv', value='御姐')
19         | 御姐

编译之后:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>jade模板引擎学习-by ghostwu</title>
 6   </head>
 7   <body>
 8     <h3>单行注释</h3>
 9     <!-- div.box.box2 这是一段div-->
10     <h3>不会编译到html文件的注释</h3>
11     <h3>块注释,也叫多行注释</h3>
12     <h3>这里不是注释</h3>
13     <input type="checkbox" name="meinv" value="仙女">仙女
14     <input type="checkbox" name="meinv" value="御姐">御姐
15   </body>
16 </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: 实时监控文件的修改,保存之后立刻刷新结果,也就是现代前端开发中很流行的热加载技术

 五、解释变量 

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         - var title = 'jade模板引擎学习-by ghostwu';
 6         title #{title.toUpperCase()}
 7         style.
 8             * { margin : 0; padding: 0; }
 9             li { list-style-type: none; }
10             a { text-decoration: none; color: white; }
11             #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
12             #nav li { float:left; }
13             #nav li.active { background:red; }
14             #nav li:hover { background:#09f; }
15             #nav li a{ padding: 5px 10px; }
16     body
17         div#nav
18             ul
19                 li.active
20                     a(href='javascript:;') 首页
21                 li
22                     a(href='javascript:;') 玄幻小说
23                 li
24                     a(href='javascript:;') 修真小说
25                 li
26                     a(href='javascript:;') 都世小说
27                 li
28                     a(href='javascript:;') 科幻小说
29                 li
30                     a(href='javascript:;') 网游小说

#{}: 可以解释变量, toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
1 doctype html
2 html
3     head
4         meta(charset='utf8')
5         - var title = 'jade模板引擎学习-by ghostwu';
6         title #{title.toUpperCase()}
7     body
8         h3 #{content}

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

编译后的结果:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>JADE模板引擎学习-BY GHOSTWU</title>
 6   </head>
 7   <body>
 8     <h3>跟着ghostwu学习jade</h3>
 9   </body>
10 </html>

这篇关于[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076912

相关文章

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN