免費(fèi)AI編程助手
Harp yield
概述
yield 是一個(gè)包含特別路徑內(nèi)容的變量。例如，當(dāng)訪問(wèn) /blog 的時(shí)候，blog/index.jade 的整個(gè)內(nèi)容可以通過(guò) yield 變量訪問(wèn)
原因
當(dāng)使用布局和局部視圖的時(shí)候，你會(huì)想訪問(wèn)布局文件和局部視圖文件正在包裹的內(nèi)容。這個(gè)內(nèi)容被包含在 yield 變量中，并且無(wú)論是在局部視圖文件還是布局文件中，都可以被替換。
用法
在任何的 _layout.jade 或者 _layout.ejs 文件中都可以訪問(wèn) yield 變量。在 _data.json 文件中指定的任何一個(gè)明確布局文件也都可以訪問(wèn)，這在布局文檔也有覆蓋。還可以在任何一個(gè)局部視圖中使用 yield 變量。
Jade 示例
使用以下目錄結(jié)構(gòu)：
myproject/
|- _layout.jade
|- index.jade
|- about.md
訪問(wèn) /about 時(shí)， 會(huì)顯示 about.md 文件的內(nèi)容。同樣的，訪問(wèn) /index 會(huì)顯示 index.jade 的內(nèi)容。這些文件的內(nèi)容都會(huì)先被 _layout.jade 包裹。 因此，在 _layout.jade 文件中，你需要指明輸出，或者 "yield" 是放在哪里的：
doctype
html
head
title Example
body
!= yield
這樣，無(wú)論你訪問(wèn)的哪個(gè)頁(yè)面的內(nèi)容都會(huì)被包含在 <body> 元素中。注意，在 Jade 中，!= （而不是單個(gè) = ）表明 HTML 標(biāo)簽不會(huì)被過(guò)濾。 如果你想改變這個(gè)模板文件中的輸出內(nèi)容的位置，只需要移動(dòng)一下 yield 變量的位置就好了：
doctype
html
head
title Example
body
article
h1 Hello, world
section
!= yield
EJS 示例
使用以下目錄結(jié)構(gòu)：
myproject/
|- _layout.ejs
|- index.ejs
|- about.md
訪問(wèn) /about 時(shí)，about.md 文件的內(nèi)容會(huì)被顯示出來(lái)。同樣的，訪問(wèn) /index 時(shí)，會(huì)顯示 index.ejs 中的內(nèi)容。 這些文件都會(huì)先被包含在 _layout.ejs 中。 因此，在 _layout.ejs 中，你需要指明輸出內(nèi)容或者 "yield" 的位置：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<%- yield %>
</body>
</html>
這樣，你訪問(wèn)的無(wú)論什么頁(yè)面都會(huì)被包含在 <body> 元素中。注意在 EJS 中，開(kāi)合標(biāo)簽 <%-（而不是 <%= ）表明 HTML 標(biāo)簽不會(huì)被過(guò)濾。
如果你想移動(dòng)這個(gè)模板文件中的輸出的位置，只需要移動(dòng)一下 yield 變量就好了：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<article>
<h1>Hello, world</h1>
<section>
<%- yield %>
</section>
</article>
</body>
</html>
更多建議：