资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:首页 > 网络学院 > 正文

Jade安装使用示例介绍

2018-04-26 19:10 来源:www.xiazaiwo.net 编辑:admin

安装

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>

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

关闭

微信扫一扫

站长微信账号