免費AI編程助手
Harp 局部視圖
概述
局部視圖是 Harp 中的最重要地部分，并且在所有的模板語言中都以同樣的方式工作。一個局部視圖可以被放在 EJS 或 Jade 文件的任何地方，并且文件的內(nèi)容會被混合起來。
為了保持你的應(yīng)用或者站點 “不要自我重復(fù)（DRY）”，你需要一個復(fù)用內(nèi)容的方式。局部視圖提供了一個簡單的接口，在復(fù)用項目代碼塊方面有很大的靈活性，效率很高。
屬性
- 局部視圖路徑 - (String) 你想包含的文件的相對路徑。
- data [對象] - (String) 你希望傳入局部視圖的數(shù)據(jù)，可選
使用局部視圖
如果說你正在創(chuàng)建一個簡單的網(wǎng)站，并且希望包含一個會出現(xiàn)在每個頁面上的頭部。項目有一個 index.ejs 文件和一個 about.ejs 文件，想在兩個文件中都包含存儲在 _header.ejs 文件中的內(nèi)容。
由于 _header.ejs 文件以下劃線開頭，所以不會被直接對外服務(wù)。然而，你可以使用局部視圖函數(shù)將它包含到另一個文件中。
_header.ejs 文件的內(nèi)容可以隨你意地簡單或者復(fù)雜，例如：
<h1>This is my site</h1>
<p>This content is in a Partial.</p>
在 EJS 文件中使用局部視圖
index.ejs 文件中，調(diào)用 partial("_header") 將 _header.ejs 文件中的內(nèi)容包含進來：
<%- partial("_header") %>
這樣，Harp 會在 index.ejs 文件中渲染 _header.ejs 文件的內(nèi)容。你可以對 about.ejs 文件重復(fù)這一過程，但是如果你想在兩者之間做一些改變的話，該如何呢？
在 _header.ejs 文件中，<h1> 標(biāo)簽中的標(biāo)題時硬編碼的，但是如果你想根據(jù)它是哪個文件的部分來改變的話，該怎么做呢？使用局部視圖函數(shù)，這也是可以做到的。當(dāng)一個文件通過局部視圖被引用，數(shù)據(jù)也可以傳進來，代替局部視圖中的指定變量。
更新 _header.ejs 文件使得 <h1> 標(biāo)簽包含變量標(biāo)題：
<h1><%- title %></h1>
<p>This content is in a Partial.</p>
這樣，調(diào)用這個局部視圖時，把 title 變量傳進來：
<%- partial("_header", { title: "About me" }) %>
這里 title 是一個任意的變量名，取決于上下文，它可以被叫做任何你想要的。如果你更新文件，讓 <p> 標(biāo)簽包含一個叫做 description 的變量，那么局部視圖函數(shù)應(yīng)該是這樣的：
<%- partial("_header", { title: "About me", description: "This is my about page" }) %>
在 Jade 文件中使用局部視圖
在 Jade 中使用局部視圖與在 EJS 中使用非常相似。Jade 中的函數(shù)以 != 開頭，而不是像 EJS 包裹在 <%- %> 中。在兩種語言中，這都表明內(nèi)容應(yīng)該被渲染，這樣無論局部視圖中的是什么代碼，都會被渲染，而不會被過濾。
h1
!= title
p This content is in a Partial.
Jade 中可以引入 EJS 局部視圖，反之亦然。例如，創(chuàng)建一個 contact.jade 文件，然后在 Jade 中包含同樣的頭部局部視圖：
!= partial("_header")
數(shù)據(jù)可以用同樣的方式傳進來。要改變局部視圖中的標(biāo)題，只需要像在 EJS 文件中一樣，傳進來一個：
!= partial("_header", { title: "Contact me" })
也可以傳多個數(shù)據(jù)進來：
!= partial("_header", { title: "Contact me", description: "This is my Jade contact page with an EJS header" }) %>
如果你想為你的變量設(shè)置默認值——當(dāng)前的例子中，title 和 description 變量的默認值，以防你不給局部視圖傳任何數(shù)據(jù)——你可以通過設(shè)置全局變量來完成。
Markdown 和局部視圖
在 Markdown 文件中不太可能直接使用局部視圖函數(shù)，因為 Markdown 不是一個模板語言。 然而，仍然可以使用局部視圖函數(shù)將 Markdown 文件包含到 EJS 或者 Jade 文件中。在下面的例子中，_shared 目錄中有一個叫做 ?an-example.mdan-example.md 的內(nèi)容引入到一個 Jade 文件的 article 標(biāo)簽中，你可以使用下面的代碼：
article!= partial("_shared/an-example")
還可以在 Jade 中直接寫 Markdown，像這樣：
doctype
head
title An example
body
.main
:markdown
# now I can write Markdown here
This is my Markdown post.
1. Chocolate
2. Strawberry
3. Vanilla
使用一個或者多個這些方法，你應(yīng)該可以得到想要的輸出結(jié)果。
更多建議：