ejs模板使用：Layout,Blocks,Partials-CSDN博客

本文链接：https://blog.csdn.net/u014645632/article/details/73614207

介绍一个不错的ejs模板布局工具，ejs-locals，可以使用layout,blocks,partials让模板布局更加灵活。npm官网有对其介绍：https://www.npmjs.com/package/ejs-locals ，以及一篇不错的博文：http://blog.soshace.com/en/2016/12/16/express-js-ejs-templating/

1 安装

npm i express-locals

2 使用

2.1 模板引擎设置

app.engine('ejs', require('ejs-locals'));
app.set('views', __dirname + '/templates');
app.set('view engine', 'ejs');

我们使用app.engine() 方法来告诉express使用模板引擎require('ejs-locals') 来处理ejs后缀的文件。

2.2 layout() block() partial()

layout(view)

使用layout(view)方法，则当前模板的输出会成为视图view中的本地变量local，即<%-body -%> 标记所在位置。

partial(name,optionsOrCollection)

在当前模板中插入另一个模板。第二个参数可以传递一个数组遍历输出，但命名时要求挺多。举个例子如下：

<% var links=['a','b','c']%>
<ul>
<%-partial('link',links)%>
</ul>

link.ejs如下

<li><%=link></li>

则输出为

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

如果partial的模板名是link.ejs的话，数组名称必须是links，link.ejs中必须使用变量名link。

block(name,html)

在模板中使用block(name,html) 方法，可以将html中的内容命名一个name，比如’foo’，那么在布局模板中就可以在<%-block('foo')%> 处插入相应的html内容。

script() stylesheets()

分别是block('scripts', '<script src="src.js"></script>') block('stylesheets', '<link rel="stylesheet" href="href.css" />') 的简写。
总的来说，模板布局需要一个母模板和若干个子模板，母模板可以写好整个页面的框架，子模板之间有差异的地方填写一个<%-block('foo')%> ，子模板用block()方法自己去实现；以及母模板页面的主体部分写一行<%-body -%> 交给子模板自己去实现。子模板使用某个母模板布局时要使用layout()方法。

3 示例

在ejs-locals官网上给出了一个例子，这里为了更好地说明稍加修改。
index.ejs:

<% layout('boilerplate') -%>
<% script('foo.js') -%>
<% stylesheet('foo.css') -%>
<% block('title','this is title') %>
<% block('header', "<p>I'm in the header.</p>") -%>
<% block('footer', "<p>I'm in the footer.</p>") -%>
<p> this is an example </p>

boilerplate.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title> <%=blocks.title%></title>
    <%-scripts%>
    <%-stylesheets%>
  </head>
  <body>
    <header>
      <%-blocks.header%>
    </header>
    <section>
      <%-body -%>
    </section>
    <footer>
      <%-blocks.footer%>
    </footer>
  </body>
</html>

有一些细节需要注意。<% %>中的变量有时需要加前缀- 表示不需要转义，如<%-blocks.header%> ；有时需要加前缀= 表示这是一个输出变量，比如<title> <%=blocks.title%></title> ；有时则需要加后缀’-’ 表示内容会自动带有HTML标记的缩进，比如<%-body -%> 。
以及express-locals不要和express-partials混用！之前我用了express-partials，代码中有如下两行，会导致ejs的body变量解析出现问题。

var partials=require('express-partials');
app.use(partials());