免費(fèi)AI編程助手
Harp 布局
一個(gè)布局文件是一個(gè)通用模板，除了一個(gè)主要內(nèi)容區(qū)域，包含所有的內(nèi)容。你可以把一個(gè)布局當(dāng)作局部視圖相反的存在。
原因
通常網(wǎng)站和應(yīng)用會(huì)有公共的頭部和尾部，需要變化的只有主體部分。這是適合使用布局文件的絕佳使用案例。
用法
一個(gè)布局需要一個(gè) EJS 或者 Jade 格式的布局文件，以及 a yield property 告訴 Harp 在哪里插入內(nèi)容。
使用 EJS 模板的示例
舉一個(gè)相當(dāng)簡(jiǎn)單的例子，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>
索引.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? 后綴的文件作為布局文件?；旌掀ヅ淠０逡彩强尚械?，例如在下面的例子中，我們有一個(gè) ?_layout.jade? 文件和一個(gè) ?index.ejs? 文件。
舉一個(gè)相當(dāng)簡(jiǎn)單的例子，app/project 目錄結(jié)構(gòu)如下：
myapp.harp.io/
|- _layout.jade
+- index.jade
_layout.jade
doctype
html
head
title My Site
script(src="/javascripts/jquery.js")
script(src="/javascripts/app.js")
body
!= yield
#footer
p Copyright (c) foobar
索引.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)勢(shì)。在下面的例子中，你可能希望 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 文件將會(huì)使用 _layout.ejs 布局。articles 目錄中的文件——這個(gè)例子中，article-one.md 以及 article-two.md —— 將會(huì)使用同目錄中的 _layout.ejs 布局。
明確布局
除了 _layout 之外的布局可以在 _data.json 文件中指定。這在你需要更好地布局控制時(shí)，是非常有用的，或者你想將你的布局文件命名成 ?_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.md
這里，通過在 ?_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
將以下內(nèi)容添加到_data.json文件將使about.md呈現(xiàn)為純 HTML，永遠(yuǎn)不會(huì)通過布局。
{
"about": {
"layout": false
}
}
因?yàn)橹皇侵付?About 頁面，index.ejs 將會(huì)繼續(xù)使用 _layout.ejs 文件作為布局文件。
嵌套布局
如果你想利用 Harp 對(duì) Jade 內(nèi)建支持的優(yōu)勢(shì)，可以使用 Jade’s Block and Extends features 來創(chuàng)建嵌套布局。
Harp 沒有一個(gè)內(nèi)建的方式來創(chuàng)建嵌套布局，就像 [partial()] 已經(jīng)提供了這種方式。例如，你的 _layout.ejs 得長(zhǎng)得像這樣：
<!-- 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 %>
<% } %>
這允許你將一個(gè) _nest.ejs 局部視圖 放到 blog/ 目錄中，讓你可以創(chuàng)建嵌套布局。通過在 _nest.ejs 局部視圖中包含 [yield]，你視圖渲染的內(nèi)容頁面將會(huì)在 _nest.ejs 局部視圖中可用。例如，blog/_nest.ejs 可能是這樣的：
<article>
<%- yield %>
</article>
這樣， blog/index 頁面將會(huì)正常渲染，而其他的頁面例如 blog/hello-world 將會(huì)如你在局部視圖文件里指定的被 <article> 標(biāo)簽包裹。在 the hb-simurai Harp 樣板上有一個(gè)關(guān)于這個(gè)的完整樣例，可以通過運(yùn)行下面的命令來嘗試：
harp init -b kennethormandy/hb-simurai my-nested-example
注意，_nest.js 文件可以命名成任何你想要的，它只是一個(gè)中規(guī)中矩的局部視圖。
更多建議：