帆布网站做哪个/百度官方网页版-拓冰网页制作

jade(pug)

由于商标版权问题，Jade 已经改名为了 Pug,github地址github.com/pugjs/pug

Jade 是一个高性能的模板引擎，它是用 JavaScript 实现的，并且可以供 Node 使用,当然还支持其他语言。

文件后缀名为.pug(.jade)

jade优点

可读性高
灵活的缩进
块展开
代码默认经过编码处理(转义),安全性高
运行时和编译时上下文错误报告
支持命令行编译
支持html5模式
在内存中缓存(可选)
原生支持 Express
合并动态和静态标签类
过滤器

关于Ejs或者其他模板引擎与jade比较,可以看看这篇文章www.zhihu.com/question/20…

安装

npm安装建议安装个nrm来进行源管理.

npm install pug -g
npm install pug-cli -g复制代码

测试demo

为了方便编写代码,最好把编译器的tab设置:2.

// index.jadedoctype html
htmlheadtitle jade testbodyh2 jade study复制代码

粗暴的编译方法

pug index.jade// index.html
<!DOCTYPE html><html><head><title>jade test</title></head><body><h2>jade study    </h2></body></html>复制代码

发现编译后的代码不具备可读性.

pug -- helpOptions:-P, --pretty           compile pretty HTML output ## 输出漂亮结构的HTML-D, --no-debug         compile without debugging (smaller functions) ## 不带调试的编译-w, --watch            watch files for changes and automatically re-render ## 对某个文件的变动保持监控-E, --extension <ext>  specify the output file extension ## 指定输出文件扩展名-s, --silent           do not output logs ## 不输出日志复制代码

// 重新编译
pug -P index.jade
<!DOCTYPE html>
<html><head><title>jade test</title></head><body><h2>jade study    </h2></body>
</html>复制代码

自动编译

只是为了学习,这里只要设置-w -P .开发中通过打包工具来进行自动编译.

// 命令行工具推荐使用Cmderλ pug -P -w index.jadewatching index.jaderendered index.html复制代码

Express与Pug

Pug完全集成了一个流行的Node.js Web框架Express，作为支持的视图引擎。看看Express是如何将Pug与Express集成的完美指南。

在Express中，环境变量NODE_ENV旨在向Web应用程序通知执行环境：无论是在开发中还是在生产中。 Express和Pug自动修改生产环境中的几个选项的默认值，为用户提供更好的开箱即用体验。具体来说，当process.env.NODE_ENV设置为“production”，Pug与Express一起使用时，compileDebug选项默认为false，而cache选项为true。

API

标签属性

id,class写法

// 编译前p.title class写法1p(class='title') class写法2p#tit id写法1p(id='tit2') id写法2     // 编译后<p class="title">class写法1</p><p class="title">class写法2</p><p id="tit">id写法</p><p id="tit2">id写法2 </p>复制代码

// 编译前
- var classArr = ['small','medium','large']
a(class= classArr)
a.test(class = classArr class=['add'])// 编译后
<a class="small medium large"></a>
<a class="test small medium large add"></a>复制代码

它也可以是将类名映射到true或false值的对象.

//编译前
- var active = 'select'
a(class={active: active === 'select'} )// 编译后
<a class="active"></a>复制代码

其他属性
通过()来依次编写属性,多个用逗号隔开.

//编译前
a(class='baidu' ,title='baidu' href='www.baidu.com') 百度//编译后
<a class="baidu" title="baidu" href="www.baidu.com">百度</a>复制代码

也支持所有正常的javascript表达式

// 编译前
- var flag  = true   //注意这里使用变量要记得添加-符号.
h2(class=flag ? 'flag': '')// 编译后
<h2 class="flag"></h2>复制代码

多个属性的另外写法

其实就是换号缩进

// 编译前
a(title='baidu',href='www.baidu.com',class='links'
)
// 编译后
<a class="links" title="baidu" href="www.baidu.com"></a>复制代码

如果您有一个非常长的属性，并且您的JavaScript运行时支持ES2015模板字符串，则可以使用该语法的属性：

// 编译前
input(data-json=`{"very-long": "piece of ","data": true}
`)
// 编译后
<input data-json="{&quot;very-long&quot;: &quot;piece of &quot;,&quot;data&quot;: true}
">复制代码

引用属性

如果你的属性名称包含了与JavaScript语法冲突的字符，请使用""或''引用，或使用逗号分隔不同的属性。

官网举了个Angular 2的例子.

//(click)='play()',这里(click)会被当作一个函数调用而不是一个属性名字来解析.// 编译前
div(class='div-class' (click)='play()')// 编译后报错
div(class='div-class' (click)='play()')
---------------------^复制代码

正确写法

// 编译前
div(class='div-class' '(click)'='play()')
div(class='div-class', (click) = 'play()')// 编译后
<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>复制代码

属性插值

以前版本的Pug / Jade支持如下插值语法(不再支持):

//编译前
- var url = 'www.baidu.com'
a(href='/#{url}') links//编译后 已不再支持
<a href="/#{url}">links</a>复制代码

新的写法

// 编译前
- var url = 'demo.com'
a(href='/' + url) links
- var url2 = 'www.baidu.com'
a(href = url2 ) 百度  // 编译后
<a href="/demo.com">links</a>
<a href="www.baidu.com">百度  </a>复制代码

如果你的javascript运行环境支持ES 2015.那么Pug支持模板字符串语法

// 编译前
- var size1 = 'small'
- var size2 = 'medium'
- var size3 = 'large'
button(type='button',class='btn btn-' + size1 + ' ' +  'btn-' + size2 + ' ' + 'btn-' + size3
)
button(type='button',class=`btn btn-$(size1) btn-$(size2) btn(size3)`
)
// 编译后
<button class="btn btn-small btn-medium btn-large" type="button"></button>
<button class="btn btn-small btn-medium btn-large" type="button"></button>复制代码

未转义属性

默认情况下，会转义所有属性（用转义序列代替特殊字符），以防止诸如跨站点脚本之类的攻击。如果必须需要使用特殊字符，可以使用！=而不是=。

// 编译前
div(title="<code>")
div(title!="<code>")// 编译后
<div title="&lt;code&gt;"></div>
<div title="<code>"></div>复制代码

布尔属性

布尔属性由Pug镜像，并接受布尔值（true和false）。当没有指定值时，默认为true。

// 编译前
input(type='radio' checked)
input(type='radio' checked=true)
input(type='radio' checked=false)// 编译后
<input type="radio" checked>
<input type="radio" checked>
<input type="radio">复制代码

style属性

style属性可以是一个字符串（像任何普通属性），但它也可以是一个对象

// 编译前
p(style={fontSize: '14px',color: 'red'})// 编译后
<p style="fontSize:14px;color:red;"></p>复制代码

Case

case语句是JavaScript Switch语句的缩写，并采用以下形式：

// 编译前
- var friendsNum = 4case friendsNumwhen 0p you have not friendwhen 1p you has one frienddefaultp you has #{friendsNum} friends    // 编译后
<p>you has 4 friends    </p>复制代码

// 编译前
- var friendsNum = 1case friendsNumwhen 0when 1p you has one frienddefaultp you has #{friendsNum} friends// 编译后
<p>you has one friend</p>复制代码

当然也支持break;

// 编译前- var friendsNum = 0case friendsNumwhen 0- breakwhen 1p you has one frienddefaultp you has #{friendsNum} friends// 编译后
无内容复制代码

也可以使用块扩展语法

// 编译前- var friendsNum = 1case friendsNumwhen 0when 1: p you has one frienddefault: p you has #{friendsNum} friends// 编译后
<p>you has one friend</p>复制代码

Code

Pug可以在你的模板中编写内置的JavaScript代码。有三种类型的代码。

Unbuffered Code
不直接添加任何的输出

// 编译前
- for(var i = 0; i < 3;i++)li item// 编译后
<li>item</li>
<li>item</li>
<li>item</li>复制代码

// 编译前- var nameList = ['kobe','cpul','james']each item in nameListli=item// 编译后<li>kobe</li>
<li>cpul</li>
<li>james</li>复制代码

Buffered Code

以=开头，并输出评估模板中JavaScript表达式的结果。为了安全起见，首先HTML被转义：

// 编译前p= 'this is code template <code>'
p= 'this is code template' + '<code>'  // 编译后<p>this is code template &lt;code&gt;
</p>
<p>this is code template&lt;code&gt;</p>复制代码

Unescaped Buffered Code

未转义的代码以！=开头，并输出评估模板中JavaScript表达式的结果。这不会进行任何转义，所以对用户输入是不安全的：

// 编译前
p!= 'this is code template <code>'
p!= 'this is code template' + '<code>'  // 编译后
<p>this is code template <code>
</p>
<p>this is code template<code></p>复制代码

Comments注释

单行注释

// 编译前// 这是一个注释
p 这是一个注释// 编译后<!-- 这是一个注释-->
<p>这是一个注释</p>复制代码

Pug还有种注释写法,只需添加连字符'-'即可。这些仅用于对Pug代码本身进行注释，编译后不会出现在HTML中。

// 编译前//- 这是一个注释
p 这是一个注释// 编译后
<p>这是一个注释</p>复制代码

块级注释

// 编译前//-注释不会出现在模板中真的
//第一行注释第二行注释// 编译后<!--第一行注释第二行注释
-->复制代码

条件注释

对于条件注释，Pug没有任何特殊的语法，下面例子这是为旧版本的Internet Explorer添加后备标记的特殊方法，但是由于以<开头的所有行被视为纯文本，普通的HTML样式条件注释将会很好。

// 编译前
<!--[if IE 8]>
<p class="lt-ie9">
<![endif]-->// 编译后<!--[if IE 8]>
<p class="lt-ie9">
<![endif]-->复制代码

Conditionals条件语句

// 编译前
- var user = {name: 'kobe'}
- var flag = true
#userif user.nameh3.user-title #{user.name}else if flagp flag is #{flag}elsep default   // 编译后
<div id="user"><h3 class="user-title">kobe</h3>
</div>复制代码

Pug也支持另外一个关键字 unless

// 编译前
- var user = {name: 'kobe'}
#userunless !user.nameh2 #{user.name}// 编译后
<div id="user"><h2>kobe</h2>
</div>复制代码

doctype

// 编译前doctype html// 编译后<!DOCTYPE html>复制代码

Filters过滤器

过滤器可让你在Pug模板中使用其他语言。也就是支持插件的使用,通过插件对模板内容进行过滤,处理,输出.如scss,less,markdown,coffee-script....

先全局安装这些插件

npm install --save jstransformer-coffee-script
npm install --save jstransformer-markdown-it复制代码

// 编译前h2 MarkDown:markdown-it#### this is markdown filter[link](http://www.baidu.com):coffee-scriptconsole.log('this is coffee-script');// 编译后<h2>MarkDown</h2><h4>this is markdown filter</h4>
<p><a href="http://www.baidu.com">link</a></p>(function() {console.log('this is coffee-script');}).call(this);复制代码

缺点:不能支持动态内容或选项。

Includes包含

Pug允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。假设我们有一个下面目录结构的文件夹：

- /index.jade
- /includes/-/head.jade-/footer.jade复制代码

// index.jade
doctype html
htmlinclude includes/header.jadebodyh1 这是主题内容include includes/footer.jade复制代码

// header.jade
headertitle 通用的headerscript(src='/jQuery.js')link(href='reset.css')复制代码

// footer.jade
footer#footerp Copyright (c) foobar复制代码

// 编译后
<!DOCTYPE html>
<html><header><title>通用的header</title><script src="/jQuery.js"></script><link href="reset.css"></header><body><h1>这是主题内容</h1><footer id="footer"><p>Copyright (c) foobar</p></footer></body>
</html>复制代码

include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后，Jade 不会把这个文件当作一个 Jade 源代码，并且会把它当作一个普通文本包含进来：

// 格式styleinclude style.css
scriptinclude script.js复制代码

甚至可以通过include结合过滤器使用

// 引入article.md
include:markdown-it article.md复制代码

模板继承

Jade 支持通过 block 和 extends 关键字来实现模板继承。一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。

如果需要，Pug block 可以提供默认内容，但是可以通过block scripts, block content, 和 block foot来显示如下所示的可选项。

// 基本使用// 编译前
block descp 这是block context
block desc  // 编译后
<p>这是block context</p>复制代码

// index.jadedoctype html
htmlinclude includes/header.jadebodyblock contentblock foot.footer  some footer content复制代码

现在要继承上面那个index.jade，只需创建一个新文件，并使用extend指令，如下所示，给出路径。您现在可以定义一个或多个block将覆盖父块内容的块.

在Pug v1中，如果没有给定文件扩展名，那么.pug会自动附加到路径上，但是在Pug v2中，这个行为已被弃用。

// index.jadedoctype html
htmlblock scriptsscript(src='/jquery.js')bodyblock contentblock foot.footer  some footer content复制代码

// page.jadeextends index.jadeblock scriptsscript(src='/jquery.js')script(src='/page.js')block contenth2 page.jade- var pets = ['cat', 'dog']each petName in petsli=petName复制代码

// page.jade 编译后<!DOCTYPE html>
<html><script src="/jquery.js"></script><script src="/page.js"></script><body><h2>page.jade</h2><li>cat</li><li>dog</li><div class="footer"> some footer content</div></body>
</html>复制代码

同样可以在一个子块里继续添加块，就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary，或者子模板直接实现 content。

block content.sidebarblock sidebarp nothing.primaryblock primaryp nothing复制代码

Pug允许你替换（默认）、前置和追加 blocks. 使用 block append 或 block prepend 时 block 是可选的:

// pageTwo.jadeextend page.jadeappend scriptsscript(src='/pageTwo.js')复制代码

// 编译后<!DOCTYPE html>
<html><script src="/jquery.js"></script><script src="/page.js"></script><script src="/pageTwo.js"></script><body><h2>page.jade</h2><li>cat</li><li>dog</li><div class="footer"> some footer content</div></body>
</html>复制代码

Interpolation插值

// 编译前
- var author = 'xyz'
- var date = '2017-4'
h2p writer was by #{author.toUpperCase()}p date is #{date}// 编译后<h2><p>writer was by XYZ</p><p>date is 2017-4</p>
</h2>复制代码

如果你想保持#{}插值符号,可以使用#{或者'\'.

Iteration迭代

each

// 编译前
- var arr = [1,2,3,4]
each val,index in arrli= index + ':' + val // 编译后<li>0:1</li>
<li>1:2</li>
<li>2:3</li>
<li>3:4</li>复制代码

while

// 编译前
- var arr = 4
while arr > 0li= arr--// 编译后<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>复制代码

Mixins

Mixins允许您创建可重用的Pug block。

// 编译前
mixin listsp this is a mixin block
+lists
+lists  // 编译后<p>this is a mixin block</p>
<p>this is a mixin block</p>复制代码

mixins可以为一个带参数的函数

// 编译前
mixin link(href,name)a(href=href)= name+link('www.baidu.com','百度')  // 编译后<a href="www.baidu.com">百度</a>复制代码

mixins也可以使用一个block来作为内容

// 编译前
mixin lists(names)p= 'my name is ' + namesif blockblockelsep not provided content
+lists('kobe')
+lists('cpul')p block content// 编译后<p>my name is kobe</p>
<p>not provided content</p>
<p>my name is cpul</p>
<p>block content</p>复制代码

未知数量参数(...)的mixins.

// 编译前
mixin lists(className,...items)ul(class=className)each item in itemsli= item+lists('demo',1,2,3)
// 编译后<ul class="demo"><li>1</li><li>2</li><li>3</li>
</ul>复制代码

Pug的缺点

凡事不可能完美.Pug也有自己的弊端.

可移植性差
对新手调试不方便
性能不是很好

帆布网站做哪个/百度官方网页版