本文目录一览
Jade是一种高效的HTML模板语言，它可以帮助我们更加便捷地构建HTML页面，提高开发效率。本文将从Jade的基础语法开始介绍，逐步深入到高级用法，帮助读者逐步掌握Jade的使用技巧。
-Jade的基础语法
- 标签
在Jade中，我们可以使用简洁的语法来定义HTML标签，例如：
```jade
doctype html
html(lang="en")
head
title My Jade Page
body
h1 Welcome to my Jade page!
p This is a paragraph.
```
上述代码将会渲染出如下的HTML页面：
```html
My Jade Page
Welcome to my Jade page!
This is a paragraph.
```
我们可以看到，Jade中的缩进非常重要，它代表了HTML标签之间的嵌套关系。
- 属性
在Jade中，我们可以使用类似CSS的语法来定义HTML标签的属性，例如：
```jade
a(href="https://www.example.com" target="_blank") Click here
```
上述代码将会渲染出如下的HTML代码：
```html
```
- 变量
在Jade中，我们可以使用变量来动态地生成HTML标签，例如：
```jade
- var name = "Jade"
h1 Hello, {name}!
```
上述代码将会渲染出如下的HTML代码：
```html
Hello, Jade!
```
- 循环
在Jade中，我们可以使用循环来动态地生成HTML标签，例如：
```jade
ul
each val in [1, 2, 3]
li= val
```
上述代码将会渲染出如下的HTML代码：
```html
- 1
- 2
- 3
```
-Jade的高级用法
- 继承
在Jade中，我们可以使用继承来复用HTML代码，例如：
```jade
//- layout.jade
doctype html
html
head
title My Site
body
block content
//- index.jade
extends layout
block content
h1 Welcome to my site!
p This is my home page.
```
上述代码将会渲染出如下的HTML页面：
```html
My Site
Welcome to my site!
This is my home page.
```
- Mixin
在Jade中，我们可以使用Mixin来定义可复用的HTML代码块，例如：
```jade
mixin button(text, link)
a(href=link) {text}
+button("Click here", "https://www.example.com")
```
上述代码将会渲染出如下的HTML代码：
```html
```
- 过滤器
在Jade中，我们可以使用过滤器来将其他语言的代码嵌入到Jade中，例如：
```jade
p.
This is some plain text.
:markdown
This is some *Markdown* text.
```
上述代码将会渲染出如下的HTML代码：
```html
This is some plain text.
This is some Markdown text.
```
-Jade的实战应用
- Express中使用Jade
在Express中，我们可以使用Jade来渲染HTML页面，例如：
```j-ascript
const express = require('express')
const app = express()
app.set('views', './views')
app.set('view engine', 'jade')
app.get('/', (req, res) => {
res.render('index', { title: 'My Site', message: 'Welcome to my site!' })
})
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
})
```
上述代码将会渲染出如下的HTML页面：
```html
My Site
Welcome to my site!
```
- Gulp中使用Jade
在Gulp中，我们可以使用Gulp插件gulp-jade来编译Jade文件，例如：
```j-ascript
const gulp = require('gulp')
const jade = require('gulp-jade')
gulp.task('jade', () => {
return gulp.src('src/*.jade')
.pipe(jade())
.pipe(gulp.dest('dist'))
})
gulp.task('default', gulp.series('jade'))
```
上述代码将会将src目录下的Jade文件编译成HTML文件，并输出到dist目录下。
-
本文介绍了Jade的基础语法、高级用法和实战应用，希望能够帮助读者更好地掌握Jade的使用技巧。Jade虽然已经被Pug所取代，但是它的思想和用法仍然值得我们学习和借鉴。