前言：
在很多编程狗的面前比较习惯用ejs引擎来渲染页面，但是受到柴犬君的影响，我这次用了jade，话说jade的设计真的是反人类，采用的是缩进包含逻辑，这对大牛来说是非常方便的，但是对于菜逼来说…. express4默认采用jade渲染，人们都说这是个趋势，但是jade除了简便和直观以外，其实性能上还是略逊一筹的。最想吐槽的其实还是对齐、
主要内容：
PS：只记录继承部分的笔记。 参考：推酷，编程网志
继承——原作者 孙崇升 GTIHUB
Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。
首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟block 标识符之后的是该代码片段的名字：
<code>//- layout.jade
doctype html
html
head
b<span class="operator"><span class="keyword">lock</span> title
title <span class="keyword">Default</span> title
body
block content
</span></code>
然后，在 index 页面继承 layout ，并可以根据代码片段的名字修改相关代码：
<code>//- index.jade extends ./layout.jade b<span class="operator"><span class="keyword">lock</span> title title Article Title block content h1 My Article </span></code>
生成的 HTML：
<code><span class="doctype"><!doctype html></span>
<span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">title</span>></span>Article Title<span class="tag"></<span class="title">title</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">h1</span>></span>My Article<span class="tag"></<span class="title">h1</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</code>
上述这种继承方式，会抹除原来代码片段的部分，如果想要追加代码片段，可以使用 append 和 prepend 指令。 append 用于在原有代码片段之后追加， prepend用于在原有代码片段之前追加。一个初始页面：
<code>//- layout.jade
html
head
title Layout
body
b<span class="operator"><span class="keyword">lock</span> content
p Hello
</span></code>
使用 append ：
extend layout
block append content
p World
生成的 HTML：
<code><span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/jquery.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/caustic.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">p</span>></span>Hello<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span>></span>World<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</code>
使用 prepend ：
extend layout
block prepend content
p World
生成的 HTML：
<code><span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/jquery.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/vendor/caustic.js"</span>></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">p</span>></span>World<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span>></span>Hello<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span></code>
