一个布局文件是一个通用模板，除了一个主要内容区域，包含所有的内容。你可以把一个布局当作局部视图相反的存在。
通常网站和应用会有公共的头部和尾部，需要变化的只有主体部分。这是适合使用布局文件的绝佳使用案例。
一个布局需要一个 EJS 或者 Jade 格式的布局文件，以及 a yield property 告诉 Harp 在哪里插入内容。
举一个相当简单的例子，app/project 是这样的结构：
| myapp.harp.io/ |
| |- _layout.ejs |
| +- index.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> |
| <h1>My Site</h1> |
| <p>Welcome to my very first site.</p> |
| <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> |
Harp 也可以使用 .jade 后缀的文件作为布局文件。混合匹配模板也是可行的，例如在下面的例子中，我们有一个_layout.jade 文件和一个 index.ejs 文件。
举一个相当简单的例子，app/project 目录结构如下：
| myapp.harp.io/ |
| |- _layout.jade |
| +- index.jade |
| doctype |
| head |
| title My Site |
| script(src="/javascripts/jquery.js") |
| script(src="/javascripts/app.js") |
| body |
| != yield |
| #footer |
| p Copyright (c) foobar |
| h1 My Site |
| p Welcome to my very first site. |
| <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> |
在你的应用中，可以充分发挥多重布局的优势。在下面的例子中，你可能希望 articles 目录和站点主页面有不一样的布局。
| myapp.harp.io/ |
| |- _layout.ejs |
| |- index.ejs |
| |- about.md |
| +- articles/ |
| |- _layout.ejs |
| |- article-one.md |
| +- article-two.md |
这里，在应用的根目录里 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 |
| { |
| "article-one": { |
| "layout": "_an-example-layout", |
| "title": "Example Title" |
| }, |
| "article-two": { |
| "layout": "_another-one", |
| "title": "Another Example Title" |
| } |
| } |
通过使用 layout : false 可以让文件不使用布局。 举下面的应用作为例子：
| myapp.harp.io/ |
| |- _data.json |
| |- _layout.ejs |
| |- index.ejs |
| +- about.md |
_data.json 文件中添加下面的内容将会让 about.md 渲染普通的 HTML，而不会经过一个布局文件。
| { |
| "about": { |
| "layout": false |
| } |
| } |
index.ejs 将会继续使用 _layout.ejs 文件作为布局文件。
如果你想利用 Harp 对 Jade 内建支持的优势，可以使用 Jade’s Block and Extends features 来创建嵌套布局。
Harp 没有一个内建的方式来创建嵌套布局，就像 [partial()] 已经提供了这种方式。例如，你的 _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/ 目录中，让你可以创建嵌套布局。通过在 _nest.ejs 局部视图中包含 [yield]，你视图渲染的内容页面将会在 _nest.ejs 局部视图中可用。例如，blog/_nest.ejs 可能是这样的：
| <article> |
| <%- yield %> |
| </article> |
blog/index 页面将会正常渲染，而其他的页面例如 blog/hello-world 将会如你在局部视图文件里指定的被<article> 标签包裹。在 the hb-simurai Harp 样板上有一个关于这个的完整样例，可以通过运行下面的命令来尝试：
| harp init -b kennethormandy/hb-simurai my-nested-example |
_nest.js 文件可以命名成任何你想要的，它只是一个中规中矩的局部视图。
