Ultraedit中如何创建并使用HTML模板

html-css09

Ultraedit中如何创建并使用HTML模板,第1张

我们用Ultraedit编辑HTML文件的时候，如果使用HTML模板会加快编辑速度。那么如何在Ultraedit中创建并使用HTML模板呢？下面我给大家分享一下。

工具/材料

Ultraedit

首先我们打开Ultraedit软件，然后切换到编辑菜单，点击插入模板下面的修改模板选项，如下图所示

接下来在弹出的修改模板界面，在模板组的下拉框中选择HTML选项，如下图所示

然后我们点击左下角的加号按钮进行新增模板，如下图所示

接下来在模板面板中给要新建的模板起一个名字，如下图所示

然后我们选中新建的模板，在内容面板中输入要快速插入的HTML内容，如下图所示，这里我输入了HTML的语法结构

接下来我们回到Ultraedit软件，点击左上角的文件菜单，然后选择新的

接着在弹出的另存为界面中，将新建的文件类型选择为HTML，如下图所示

然后切换到顶部的编码菜单，点击代码模板，在下拉框中选择刚才创建的模板，如下图所示

最后我们就看到新建的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 网页布局框架——主页