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

如何在每一頁上獲取到自定義標題和描述

本篇文章將教你如何設置你的應用,讓你在每一頁設定自定義標題和描述,而且當沒有設定時有一個安全的默認值。

默認值將會在 _harp.json 文件中指定,然后我們將使用 _data.json 文件覆蓋哪些值。

你可以在文檔中找到更多關于 模板數(shù)據(jù) 的信息。

概覽

目錄結構:

_harp.json
_data.json
index.jade  // or index.ejs
about.jade  // or about.ejs

這個例子中,這是我們所希望的:如果一個訪問者請求 index 頁面,我們展示標題和描述的默認值,當他們請求 about 頁面,我們顯示自定義的值。

設置默認值

首先,我們將指定默認值,如果頁面沒有指定具體數(shù)值時,會用到。在你的 _harp.json 中:

{
  "globals": {
    "title": "My default title",
    "description": "My default description"
  }
}

設置 about 頁面的自定義值

_data.json 文件中添加你想要為 about 頁面添加的自定義值:

{
  "about": {
    "title": "Welcome to my about page",
    "description": "I’m awesome and so are you"
  }
}

在模板文件中使用

如果你正在使用 Jade

現(xiàn)在我們將在 _layout.jade 中使用我們剛剛添加到 _harp.json 中的標題和描述。

doctype
html(lang="en")
  head
    title= title
    meta(name="description" content="#{ description })
  body
    != yield

如果你正在使用 EJS

如果你正在使用 EJS,_layout.ejs 應該是這樣的:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= title %></title>
    <meta name="description" content="<%= description %>" />
  </head>
  <body> <%- yield %> </body>
</html>

結果

現(xiàn)在當你訪問 index 頁面時,Harp 將會渲染 _harp.json 中指定的默認值。

當你訪問 about 頁面時,Harp 將會用 _data.json 中指定的值覆蓋默認的標題和描述變量。

如果你希望在 index 頁面中顯示自定義值,你只需要在 _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"
  }
}

記住你并不需要同時覆蓋兩個變量。如果你只覆蓋 title 變量,模板文件將會仍然為 description 變量使用默認值。

這是如何做到的?

_harp.js 中指定的全局變量值,是可以作為模板變量使用的,所以它們可以在任何時候以及任何頁面使用。

當一個 Harp 應用試圖渲染一個頁面,它會嘗試將 url 路徑與 _data.json 中的數(shù)據(jù)進行匹配。在這種情況中,它將 URL 路徑中的 about 部分與 _data.json 文件中的 about 鍵值匹配起來。

當 Harp 找到一個匹配時,它會使得當前渲染的模板可訪問那些變量。并且在這種情況中,它會覆蓋我們之前在 _harp.json 中設置的變量。

你可以在文檔中找到更多關于 模板數(shù)據(jù) 的信息。

上一篇:部署到 Github Pages下一篇:Multihost