Jade安装使用示例介绍
安装
npm install jade
在Sublime Text开发的配置
Jade语法高亮显示：
Jade代码高亮显示需要安装的插件有：Jade；
Jade编译为HTML：
首先需要全局安装Jade模块：
npm install jade --global
然后，通过 Package Control 安装 Jade Build 插件。
使用时，在菜单 Tools > Build System 中，确认勾选了 Automatic 或 Jade。在 .jade 文件中按 Ctrl+B (Mac: Cmd+B) 执行编译即可。如果编译成功，则会在同级目录下生成 .html 文件。
推荐通过 Package Control 安装 SublimeOnSaveBuild，参考 https://sublime.wbond.net/packages/SublimeOnSaveBuild 进行配置，将 jade 添加到 filename_filter 中，这样每次保存文件即可以自动执行编译。
Jade语法
标签
Jade：
html
渲染后变成：<html></html>。
Jade：
div#foo.bar.baz
渲染后变成：<div id="foo"></div><div class="bar"></div>。
文本
对于小段文本，可以把简单内容直接放在标签之后：
p wahoo!
渲染后：<p>wahoo!</p>。
对于大段文本，可以在每一行文本的前面加上” | “：
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
渲染后为：<p>foo bar baz rawr rawr super cool go jade go</p>。
对于大段文本，还可以选择以” . “：
p.
foo asdf
asdf
asdfasdfaf
asdf
asd
渲染后：
<p>
foo asdf
asdf
asdfasdfaf
asdf
asd
</p>
这和带一个空格的 ‘.’ 不一样。带空格的 ” . ” 会被Jade的解析器忽略，当作一个普通的文字:
p .
渲染为：<p>.</p>。
注释
单行注释有以下三种：
// 单行注释
<!-- 单行注释 -->
//- 不输出的单行注释
属性
Jade支持使用 “(” 和 “)” 作为属性分隔符。
a(href='/login', title='View login page') Login
渲染为：<a href="/login" title="View login page">Login</a>。
当一个值是 undefined 或者 null 属性不会被加上。如：
div(something=null)
渲染为：<div></div>。
可执行代码
Jade目前支持三种类型的可执行代码。第一种是前缀 –， 这是不会被输出的：
- var foo = 'bar';
-var items = [1, 2, 3, 4]
- if (items.length)
ul
- items.forEach(function(item){
li= item
- })
渲染为：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
使用=输出转义的代码：
- var foo = 'bar'
= foo
h1= foo
输出：bar<h1>bar</h1>。
循环
遍历数组：
-var items = ["one", "two", "three"]
each item, i in items
li #{item}: #{i}
渲染为：
<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>
遍历对象：
-var obj = { foo: 'bar', name: "hello" }
each val, key in obj
li #{key}: #{val}
渲染为：
<li>foo: bar</li>
<li>name: hello</li>
也可以使用for循环：
-var users = { bob: {roles: "1", custom: "2"}, jeny: {roles: "2"} }
for user in users
for role in user.roles
li= role
渲染为：<li>1</li><li>2</li>。
条件判断
if判断：
-var users = { bob: {role: "admin", name: "bob"}, jeny: {role: "custom", name: "jeny"} }
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.name
渲染为：
<p>bob is an admin</p>
<p>jeny</p>
case判断：
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
或：
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
均渲染为：
<p>you have 10 friends</p>
模板继承
Jade支持通过block和extends关键字来实现模板继承。
在父模板中，使用block定义占位符，如下：
layout.jade:
html
head
h1 My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p some footer content
在子模板中，直接使用extends定义它的父模板。父模板可以选择带.jade扩展名或者不带。
child.jade：
extends layout
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
h1= title
each pet in pets
include pet
其中，child.jade渲染为：
<html>
<head>
<h1>My Site - </h1>
<script src="/jquery.js"></script>
<script src="/pets.js"></script>
</head>
<body>
<h2>pet</h2>
<h2>pet</h2>
<h2>pet</h2>
<h2>pet</h2>
<div id="footer"></div>
<p>some footer content</p>
</body>
</html>
包含
Includes 允许你静态包含一段Jade，或者别的存放在单个文件中的东西比如css, html。
如：
html
include head.jade
body
h1 My Site
p Welcome to my super amazing site.
include foot.jade
Mixins
mixin list
ul
li foo
li bar
li baz
h2 Groceries
+list
+list
渲染为：
<h2>Groceries</h2>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
带参数的mixin：
mixin pets(pets)
ul.pets
each pet in pets
li= pet
mixin profile(user)
.user
h2= user.name
mixin pets(user.pets)
-var user = {name: "bob", pets: ["cat", "dog", "pig"]}
+profile(user)
渲染为：
<div class="user">
<h2>bob</h2>
<ul class="pets"></ul>
<li>cat</li>
<li>dog</li>
<li>pig</li>
</div>
变量调用
jade 的变量调用有 3 种方式：
{表达式}
=表达式 // 会对字符进行转义
!=表达式 // 不会对字符进行转义
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}
p= s
渲染为：
<p>hello world</p>
<p>hello world</p>
相关文章
- 编译安装非常的简单了我们现在的php版本已经到了php7了，下文小编来为各位介绍一篇关于PHP7快速编译安装的步骤，希望文章能够帮助到各位。 一、安装必要一些依赖 yum...2016-11-25
- 有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- 这篇文章主要介绍了Rstudio中安装package出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。  ...2017-07-06
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10
- PHP-FPM我们相信各位用高版本的php经常使用到了，下面整理了一些关于PHP-FPM的笔记，有兴趣的可进来看看。 今天赶上了123System OPenVZ VPS全场半价的机会，购入了一...2016-11-25
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07
使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25
Linux安装Pytorch1.8GPU(CUDA11.1)的实现
这篇文章主要介绍了Linux安装Pytorch1.8GPU(CUDA11.1)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-25- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-19
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 这篇文章主要为大家详细介绍了Visual Studio 2015下载和安装图文教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22