Harp 如何獲取每頁(yè)的自定義標(biāo)題和描述
本篇文章將教你如何設(shè)置你的應(yīng)用，讓你在每一頁(yè)設(shè)定自定義標(biāo)題和描述，而且當(dāng)沒(méi)有設(shè)定時(shí)有一個(gè)安全的默認(rèn)值。
默認(rèn)值將會(huì)在 _harp.json 文件中指定，然后我們將使用 _data.json 文件覆蓋哪些值。
你可以在文檔中找到更多關(guān)于 模板數(shù)據(jù) 的信息。
概述
目錄結(jié)構(gòu)：
_harp.json
_data.json
index.jade // or index.ejs
about.jade // or about.ejs
這個(gè)例子中，這是我們所希望的：如果一個(gè)訪問(wèn)者請(qǐng)求 index 頁(yè)面，我們展示標(biāo)題和描述的默認(rèn)值，當(dāng)他們請(qǐng)求 about 頁(yè)面，我們顯示自定義的值。
設(shè)置默認(rèn)值
首先，我們將指定默認(rèn)值，如果頁(yè)面沒(méi)有指定具體數(shù)值時(shí)，會(huì)用到。在你的 _harp.json 中：
{
"globals": {
"title": "My default title",
"description": "My default description"
}
}
設(shè)置 about 頁(yè)面的自定義值
在 _data.json 文件中添加你想要為 about 頁(yè)面添加的自定義值：
{
"about": {
"title": "Welcome to my about page",
"description": "I’m awesome and so are you"
}
}
使用模板中的值
如果你正在使用 Jade
現(xiàn)在我們將在 _layout.jade 中使用我們剛剛添加到 _harp.json 中的標(biāo)題和描述。
doctype
html(lang="en")
head
title= title
meta(name="description" content="#{ description }")
body
!= yield
如果你正在使用 EJS
如果你正在使用 EJS，_layout.ejs 應(yīng)該是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body> <%- yield %> </body>
</html>
結(jié)果
現(xiàn)在當(dāng)你訪問(wèn) index 頁(yè)面時(shí)，Harp 將會(huì)渲染 _harp.json 中指定的默認(rèn)值。
當(dāng)你訪問(wèn) about 頁(yè)面時(shí)，Harp 將會(huì)用 _data.json 中指定的值覆蓋默認(rèn)的標(biāo)題和描述變量。
如果你希望在 index 頁(yè)面中顯示自定義值，你只需要在 _data.json 文件中添加 index 鍵值，像這樣：
{
"about": {
"title": "Welcome to my about page",
"description": "I’m awesome and so are you"
},
"index": {
"title": "This is my home page",
"description": "Best home page ever"
}
}
記住你并不需要同時(shí)覆蓋兩個(gè)變量。如果你只覆蓋 title 變量，模板文件將會(huì)仍然為 description 變量使用默認(rèn)值。
這是如何做到的？
_harp.js 中指定的全局變量值，是可以作為模板變量使用的，所以它們可以在任何時(shí)候以及任何頁(yè)面使用。
當(dāng)一個(gè) Harp 應(yīng)用試圖渲染一個(gè)頁(yè)面，它會(huì)嘗試將 url 路徑與 _data.json 中的數(shù)據(jù)進(jìn)行匹配。在這種情況中，它將 URL 路徑中的 about 部分與 _data.json 文件中的 about 鍵值匹配起來(lái)。
當(dāng) Harp 找到一個(gè)匹配時(shí)，它會(huì)使得當(dāng)前渲染的模板可訪問(wèn)那些變量。并且在這種情況中，它會(huì)覆蓋我們之前在 _harp.json 中設(shè)置的變量。
更多建議：