11.如何使用 pug (jade) 作为 HTML 的模板

首先肯定会问什么是 pug ，如果是 nodejs 程序员的话，肯定听过 jade 吧， pug 就是 从 jade 改名过来的。

说白了，它就是可以让你以更好的语法来写 html 。

下面看看例子就会清楚的。

现在我们就要代替之前的 src/index.html 改用 pug 语法来写。

首先把 src/index.html 改名叫 src/index.pug

src/index.pug

上面的内容是从 pug 官方的示例中抄的，然后稍微改了一下。

webpack.config.js

这样基本没啥问题，来看下结果：

我们来试试 pug 的 include 功能，就是可以包含子模板。

src/index.pug

src/includes/header.pug

目录结构是这样的：

结果：

先这样吧。

HTML格式的网页模板用：

1、ages 放图片的

2、index.html 主页

3、style 修改样式

4、layout 网页布局框架——主页

1、启动 Visual Studio 2010。

2、在“文件”菜单中，依次选择“新建”和“项目”。将打开“新建项目”对话框。在 Visual Basic 或 Visual C# 中选择“WEB应用程序”，然后将其命名为“HTML5Template”。单击“确定”。

3、在这个项目中添加下面这些文件。

两个分别放置js和css的文件夹：css、js

HTML5基本模板页：index.html

jQuery：jquery-1.4.2.min.js

Modernizr ：modernizr-1.5.min.js

HTML5 样式文件：html5reset.css

---