[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自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、