您的位置：首页 > Web前端 > JavaScript

ejs模板使用：Layout,Blocks,Partials

2017-06-23 10:39 1081 查看

介绍一个不错的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());

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航