Jade入门学习笔记

时间 2019-11-16

标签 jade 入门学习笔记栏目 Node.js 繁體版

原文原文链接

jade是超高性能的node JavaScript模板引擎，有着很是强大的API和大量杰出的特性。它主要针对node的服务端。因为商标的缘由，改成Pug，哈巴狗。Pug有它自己的缺点——可移植性差，调试困难，性能并不出色，但使用它能够加快开发效率。javascript

标签嵌套

使用缩进来表示标签间的嵌套关系，这样能够构建一个 HTML 代码的 树状结构 语法html

ul
    li item A
    li item B

为了节省空间， Pug 嵌套标签提供了一种 内联式 语法java

a: img

Pug知道哪些元素是自闭合的，为了语法的完整性，也能够经过在标签后加上 / 来明确声明此标签是 自闭合 的node

img
img/
input 
input/

HTML5的 DOCTYPE 书写以下jquery

doctype html

固然，也能够自定义一个 doctype 字面值。json

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

内容

Pug 提供了三种经常使用的方式来放置内容缓存

【管道文本】
这是最简单的向模板添加纯文本的方法。只须要在每行前面加一个 | 字符，这个字符在类 Unix 系统下经常使用做“管道”功能，所以得名

| 纯文本固然也能够包括 <strong>HTML</strong> 内容。
p
  | 但它必须单独起一行。

【标签内文本】
这其实是最多见的状况，文本只须要和标签名隔开一个空格便可.

p 纯文本 <strong>HTML</strong> 内容

【嵌入大段文本】
有时可能想要写一个大段文本块。好比嵌入脚本或者样式。只需在标签后面接一个 .便可。注意：不能有空格

script.
    if (usingPug)
        console.log('请用Pug')
    else 
        console.log('傻不拉几')

属性

标签属性和 HTML 语法很是类似，它们的值就是普通的 JavaScript 表达式。能够用逗号做为属性分隔符，也能够不加逗号
若是有不少属性，能够把它们分几行写
若是有一个很长的属性，而且JavaScript运行时引擎支持ES2015模板字符串，能够使用它来写属性值

// 1. 
a(href='baidu.com') 百度
= '\n'
a(class='button' href='baidu.com') 百度
= '\n'
a(class='button', href='baidu.com') 百度

// 2. 
input(
  type='checkbox'
  name='agreement'
  checked
)

// 3. 
input(data-json=`
  {
    "很是": "长的",
    "数据": true
  }
`)

默认状况下，全部的属性都通过转义（即把特殊字符转换成转义序列）来防止诸如跨站脚本攻击之类的攻击方式。若是要使用特殊符号，须要使用 != 而不是 =

注意：未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击app

div(escaped="<code>")
div(unescaped!="<code>")

在Pug中，布尔值属性是通过映射的，这样布尔值(true和false)就能接受了。没有指定值时，默认是true

input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())

style（样式）属性能够是一个字符串（就像其余普通的属性同样）还能够是一个对象

a(style={color: 'red', background: 'green'})

标签嵌入

[标签名(标签属性) 标签内容]

空格调整
Pug 默认会去除一个标签先后的全部空格，而标签嵌入功能能够在须要嵌入的位置上处理先后空格

p
  | 若是我不用嵌入功能来书写，一些标签好比
  strong strong
  | 和
  em em
  | 可能会产生意外的结果。
p.
  若是用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

效果，前者strong先后无空格，后者有空格。（啦strong啦啦，啦 strong 啦）性能

注释

// 注释
//- 注释不输出，即不会出如今结果中
// 
    块注释
    继续写块注释

ps：全部以 < 开头的行都会被看成纯文本，所以直接写一个 HTML 风格的条件注释也是没问题的网站

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

使用=或#{}来进行变量的真实值替换
在 #{ 和 } 里面的代码也会被求值、转义，并最终嵌入到模板的渲染输出中.Pug 足够聪明来分辨到底哪里才是嵌入表达式的结束，因此不用担忧表达式中有 }，也不须要额外的转义;使用!{}嵌入没有转义的文本进入模板中

变量

变量来源有三种，分别是pug文件内部、命令行参数和外部JSON文件。

// 文件内部
-var val = "aaaa";
p= val

// 命令行
pug test.pug -P -w --obj '{val: "fldasj"}'

// 外部json文件
pug test.pug -P -w -O test.json

include

包含（include）功能容许把另外的文件内容插入进来,被包含的若是不是 Pug 文件，那么就只会看成文本内容来引入

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 个人网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug

//- includes/head.pug
head
  title 个人网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
  
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

继承

Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，能够被子模板覆盖、替换。这个过程是递归的。

复制代码
//- layout.pug
html
  head
　　 meta(charset="UTF-8")
    title 个人站点 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些页脚的内容

//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['猫', '狗']
  each petName in pets
    include pet.pug

//- pet.pug
p= petName  // 或者 p #{petName}

值得注意的是，由于这里的 foot 块没有被重定义，因此会依然输出“一些页脚的内容”

扩展

Pug 容许去替换（默认的行为）、prepend（向头部添加内容），或者 append（向尾部添加内容）一个块。

参考文献： jade

1. Jade入门学习
2. jade 学习笔记
3. jade学习笔记
4. Jade学习笔记
5. node jade学习笔记
6. Docker学习笔记——入门
7. shell入门学习笔记
8. redis 入门学习笔记
9. YAML学习笔记——入门
10. pytorch学习笔记（入门）
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• YAML 入门教程