ejs模板使用：Layout,Blocks,Partials

来源：互联网发布：mysql怎么卸载干净编辑：程序博客网时间：2024/06/05 11:00

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

阅读全文

0 0