鍍金池/ 教程/ Java/ 布局
更多教程
部署到 Heroku
Sass
當(dāng)前對象
Yield
公有和私有文件
Harp 文檔
Azure
編譯 harp
快速開始
Stylus
基本認(rèn)證
“200 OK” 狀態(tài)碼
內(nèi)容
元數(shù)據(jù)
布局
局部視圖
“404 不存在”狀態(tài)碼
更新 Harp
環(huán)境
規(guī)則
初始化 Harp 應(yīng)用
Harp 服務(wù)器
EJS
部署到 Github Pages
安裝 Harp
如何創(chuàng)建一個貼子列表
LESS
Jade
Multihost
Markdown
Express 嵌入式中間件
全局變量
CoffeeScript
如何在每一頁上獲取到自定義標(biāo)題和描述
Harp 平臺

布局

一個布局文件是一個通用模板，除了一個主要內(nèi)容區(qū)域，包含所有的內(nèi)容。你可以把一個布局當(dāng)作局部視圖相反的存在。

為什么呢？

通常網(wǎng)站和應(yīng)用會有公共的頭部和尾部，需要變化的只有主體部分。這是適合使用布局文件的絕佳使用案例。

用法

一個布局需要一個 EJS 或者 Jade 格式的布局文件，以及 a yield property 告訴 Harp 在哪里插入內(nèi)容。

使用 EJS 模板的示例

舉一個相當(dāng)簡單的例子，app/project 是這樣的結(jié)構(gòu)：

myapp.harp.io/
  |- _layout.ejs
  +- index.ejs

_layout.ejs 

<html>
  <head>
    <title>My Site</title>
    <script src="/javascripts/jquery.js">
    </script><script src="/javascripts/app.js"></script>
  </head>
  <body>
    <%- yield %>
    <div id="footer">
      <p>Copyright ? foobar</p>
    </div>
  </body>
</html>

index.ejs

<h1>My Site</h1>
<p>Welcome to my very first site.</p>

最終的結(jié)果：

<html>
  <head>
    <title>My Site</title>
    <script src="/javascripts/jquery.js">
    </script><script src="/javascripts/app.js"></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my very first site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

使用 Jade 模板的示例

Harp 也可以使用 .jade 后綴的文件作為布局文件。混合匹配模板也是可行的，例如在下面的例子中，我們有一個 _layout.jade 文件和一個 index.ejs 文件。

舉一個相當(dāng)簡單的例子，app/project 目錄結(jié)構(gòu)如下：

myapp.harp.io/
    |- _layout.jade
    +- index.jade

_layout.jade

doctype
  head
    title My Site
    script(src="/javascripts/jquery.js")
    script(src="/javascripts/app.js")
  body
      != yield
    #footer
      p Copyright (c) foobar

index.jade

h1 My Site
p Welcome to my very first site.

最終的結(jié)果：

<html>
  <head>
    <title>My Site</title>
    <script src="/javascripts/jquery.js">
    </script><script src="/javascripts/app.js"></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my very first site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

多重布局

在你的應(yīng)用中，可以充分發(fā)揮多重布局的優(yōu)勢。在下面的例子中，你可能希望 articles 目錄和站點(diǎn)主頁面有不一樣的布局。

myapp.harp.io/
    |- _layout.ejs
    |- index.ejs
    |- about.md
    +- articles/
      |- _layout.ejs
      |- article-one.md
      +- article-two.md

這里，在應(yīng)用的根目錄里 index.ejs 和 about.md 文件將會使用 _layout.ejs 布局。articles 目錄中的文件——這個例子中，article-one.md 以及 article-two.md —— 將會使用同目錄中的 _layout.ejs 布局。

明確布局

除了 _layout 之外的布局可以在 _data.json 文件中指定。這在你需要更好地布局控制時，是非常有用的，或者你想將你的布局文件命名成 _layout 之外的名稱。

myapp.harp.io/
    |- _layout.ejs
    |- index.ejs
    |- about.md
    +- articles/
      |- _data.json
      |- _an-example-layout.ejs
      |- _another-one.jade
      |- article-one.md
      +- article-two.mdmd

這里，通過在 _data.json 文件中指定具體的布局文件，article-one.md 就可以使用 _an-example-layout.ejs 布局文件了：

{
  "article-one": {
    "layout": "_an-example-layout",
    "title": "Example Title"
  },
  "article-two": {
    "layout": "_another-one",
    "title": "Another Example Title"
  }
}

現(xiàn)在，每一篇文章都會使用指定的布局文件。

選擇布局文件

通過使用 layout : false 可以讓文件不使用布局。 舉下面的應(yīng)用作為例子：

myapp.harp.io/
  |- _data.json
  |- _layout.ejs
  |- index.ejs
  +- about.md

在 _data.json 文件中添加下面的內(nèi)容將會讓 about.md 渲染普通的 HTML，而不會經(jīng)過一個布局文件。

{
    "about": {
        "layout": false
    }
}

因?yàn)橹皇侵付?About 頁面，index.ejs 將會繼續(xù)使用 _layout.ejs 文件作為布局文件。

嵌套布局

如果你想利用 Harp 對 Jade 內(nèi)建支持的優(yōu)勢，可以使用 Jade’s Block and Extends features 來創(chuàng)建嵌套布局。

Harp 沒有一個內(nèi)建的方式來創(chuàng)建嵌套布局，就像 [partial()] 已經(jīng)提供了這種方式。例如，你的 _layout.ejs 得長得像這樣：

<!-- If the current page is blog/ but not blog/index.ejs… -->
  <% if(current.path[0] == "blog" && current.source !== 'index') { %>
    <!-- Render the partial blog/_nest -->
    <%- partial(current.path[0] + "/_nest") %>
  <% } else { %>
  <!-- Otherwise, render the yield -->
      <%- yield %>
  <% } %>

這允許你將一個 _nest.ejs 局部視圖 放到 blog/ 目錄中，讓你可以創(chuàng)建嵌套布局。通過在 _nest.ejs 局部視圖中包含 [yield]，你視圖渲染的內(nèi)容頁面將會在 _nest.ejs 局部視圖中可用。例如，blog/_nest.ejs 可能是這樣的：

<article>
  <%- yield %>
</article>

這樣， blog/index 頁面將會正常渲染，而其他的頁面例如 blog/hello-world 將會如你在局部視圖文件里指定的被 <article> 標(biāo)簽包裹。在 the hb-simurai Harp 樣板上有一個關(guān)于這個的完整樣例，可以通過運(yùn)行下面的命令來嘗試：

 harp init -b kennethormandy/hb-simurai my-nested-example

注意，_nest.js 文件可以命名成任何你想要的，它只是一個中規(guī)中矩的局部視圖。

上一篇：基本認(rèn)證下一篇：LESS