一介布衣

🧭 快速导航

ejs母版页让你的node.js应用开发更快更有效- 一介布衣 ​

--> -->

引子:

母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.

一.node.js开发,基于ejs引擎的母版页

二.前提环境 ,如何使用及示例介绍

  1. 就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,那么其他部分完全可以放到母版页中呈现.

node.js 下的web应用开发有2种模板引擎 ejs 和 jade ,当然你可能直接用jquery 的前端模板后端ajax请求数据等等....(也算一种吧)

ejs 下如何使用母版页?

  1. ejs的母版页功能支持需要依赖一个第三方包 **ejs-mate **可以根据npm install ejs-mate 直接安装 Express 需要4.0以上

安装后使用方法如下:

var app = express();
app.set('view engine', 'html');
app.engine('html', require('ejs-mate'));
app.locals._layoutFile = 'layout.html';

上面指定ejs引擎渲染html 文件,接着指定使用 ejs-mate 做母版页引擎,最后指定 母版页是 layout.html

这里有个 app.locals 这个变量,提一句,可以把 locals 理解成客户端的一个全局变量,我们现在给变量的_alyoutFile 属性赋值 'layout.html'

这样在后端指定母版页的好处是,你不需要在view中的html页面里特定指定谁是你的母版页.

如果上面最后一句你不写,需要在前端每个页面指定渲染的母版页,假设 index.ejs 套用母版页前代码如下:

<% layout('layout.html') -%>
<span>Hello World!</span>

如果你的母版页是这样的:

<!DOCTYPE html>
<html>
  <head>
    <title>It's title</title>
  </head>
  <body>
    <section>
      <%-body -%>
    </section>
  </body>
</html>

上面的<%-body %> 就是每个页面的变体,就是你要专心关注的东西.

上面的 index.ejs 套用母版页之后渲染出的html如下:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;It's title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section&gt;
      &lt;span&gt;Hello World!&lt;/span&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;

可以看出来 上面index.ejs 里的全部代码 (除去母版页引用声明代码 <% layout('layout.html') -%> ) 都填充到了母版页的 <%-body %>处.

到这里就简单的介绍完了node.js下ejs引擎的母版页使用方法,简单好用,提高效率- 一介布衣