Yield

yield 是一个包含特别路径内容的变量。例如,当访问 /blog 的时候,blog/index.jade 的整个内容可以通过 yield 变量访问

为什么?

当使用布局和局部视图的时候,你会想访问布局文件和局部视图文件正在包裹的内容。这个内容被包含在 yield 变量中,并且无论是在局部视图文件还是布局文件中,都可以被替换。

用法

在任何的 _layout.jade 或者 _layout.ejs 文件中都可以访问 yield 变量。在 _data.json 文件中指定的任何一个明确布局文件也都可以访问,这在布局文档也有覆盖。还可以在任何一个局部视图中使用 yield 变量。

Jade 示例

使用下面的目录结构:

1
2
3
4
myproject/
|- _layout.jade
|- index.jade
|- about.md
访问 /about 时, 会显示 about.md 文件的内容。同样的,访问 /index 会显示 index.jade 的内容。这些文件的内容都会先被 _layout.jade 包裹。 因此,在 _layout.jade 文件中,你需要指明输出,或者 "yield" 是放在哪里的:

1
2
3
4
5
6
doctype
html
head
title Example
body
!= yield
这样,无论你访问的哪个页面的内容都会被包含在 <body> 元素中。注意,在 Jade 中,!= (而不是单个 = )表明 HTML 标签不会被过滤。 如果你想改变这个模板文件中的输出内容的位置,只需要移动一下 yield 变量的位置就好了:

1
2
3
4
5
6
7
8
9
doctype
html
head
title Example
body
article
h1 Hello, world
section
!= yield
EJS 示例

使用下面的目录结构:

1
2
3
4
myproject/
|- _layout.ejs
|- index.ejs
|- about.md
访问 /about 时,about.md 文件的内容会被显示出来。同样的,访问 /index 时,会显示 index.ejs 中的内容。 这些文件都会先被包含在 _layout.ejs 中。 因此,在 _layout.ejs 中,你需要指明输出内容或者 "yield" 的位置:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<%- yield %>
</body>
</html>
这样,你访问的无论什么页面都会被包含在 <body> 元素中。注意在 EJS 中,开合标签 <%-(而不是 <%= )表明 HTML 标签不会被过滤。

如果你想移动这个模板文件中的输出的位置,只需要移动一下 yield 变量就好了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<article>
<h1>Hello, world</h1>
<section>
<%- yield %>
</section>
</article>
</body>
</html>

还可参见

联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

Copyright © 2015-2024

备案号:京ICP备15003423号-3