閱讀(820) 書簽贊(0) 我要糾錯

Harp yield

2021-10-12 15:50 更新

概述

yield 是一個包含特別路徑內(nèi)容的變量。例如，當(dāng)訪問 /blog 的時候，blog/index.jade 的整個內(nèi)容可以通過 yield 變量訪問

原因

當(dāng)使用布局和局部視圖的時候，你會想訪問布局文件和局部視圖文件正在包裹的內(nèi)容。這個內(nèi)容被包含在 yield 變量中，并且無論是在局部視圖文件還是布局文件中，都可以被替換。

用法

在任何的 _layout.jade 或者 _layout.ejs 文件中都可以訪問 yield 變量。在 _data.json 文件中指定的任何一個明確布局文件也都可以訪問，這在布局文檔也有覆蓋。還可以在任何一個局部視圖中使用 yield 變量。

Jade 示例

使用以下目錄結(jié)構(gòu)：

myproject/
  |- _layout.jade
  |- index.jade
  |- about.md

訪問 /about 時，會顯示 about.md 文件的內(nèi)容。同樣的，訪問 /index 會顯示 index.jade 的內(nèi)容。這些文件的內(nèi)容都會先被 _layout.jade 包裹。因此，在 _layout.jade 文件中，你需要指明輸出，或者 "yield" 是放在哪里的：

doctype
html
  head
    title Example
  body
    != yield

這樣，無論你訪問的哪個頁面的內(nèi)容都會被包含在 <body> 元素中。注意，在 Jade 中，!= （而不是單個 = ）表明 HTML 標(biāo)簽不會被過濾。如果你想改變這個模板文件中的輸出內(nèi)容的位置，只需要移動一下 yield 變量的位置就好了：

doctype
html
  head
    title Example
  body
    article
      h1 Hello, world
      section
        != yield

EJS 示例

使用以下目錄結(jié)構(gòu)：

myproject/
  |- _layout.ejs
  |- index.ejs
  |- about.md

訪問 /about 時，about.md 文件的內(nèi)容會被顯示出來。同樣的，訪問 /index 時，會顯示 index.ejs 中的內(nèi)容。這些文件都會先被包含在 _layout.ejs 中。因此，在 _layout.ejs 中，你需要指明輸出內(nèi)容或者 "yield" 的位置：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <%- yield %>
  </body>
</html>

這樣，你訪問的無論什么頁面都會被包含在 <body> 元素中。注意在 EJS 中，開合標(biāo)簽 <%-（而不是 <%= ）表明 HTML 標(biāo)簽不會被過濾。

如果你想移動這個模板文件中的輸出的位置，只需要移動一下 yield 變量就好了：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <article>
      <h1>Hello, world</h1>
      <section>
        <%- yield %>
      </section>
    </article>
  </body>
</html>

還可參見

以上內(nèi)容是否對您有幫助：

← Harp 布局

Harp 局部視圖 →

寫筆記

我要補(bǔ)充