本頁面由 Cloud Translation API 翻譯而成。

網頁中繼資料

DevSite 頁面是網站上的單一內容單位。網頁可以包含標題、內文、標頭元素和用來控制網站功能的中繼資料屬性，使用者造訪網頁的網址時，網站會根據內容頁面的屬性顯示完整的網頁，並加入標頭、頁尾和側欄等動態元素。預設行為已針對技術說明文件的網頁最佳化，但也可以針對行銷和到達網頁等其他用途進行設定。

頁面結構

DevSite 網頁是能讓一般外觀和功能由網站管理的網頁。Google Developers 上的網頁會顯示幾個共同區域。(並非所有網站都支援所有功能)。將滑鼠遊標懸停在圖表上，即可找到標籤。

site header

網站標誌、登入小工具、搜尋框和頂端導覽列。整個網站都會保持一致。

project bar

專案或產品名稱，以及專案專屬的小工具 (例如「意見回饋」連結)。這個區域是由專案中繼資料所定義。

sidebar

書籍通用的階層導覽。這個區域是由書籍中繼資料定義。

body

網頁標題和網頁內容。

page footer ("last updated")

網頁專用小工具 (例如「上次更新時間」通知)。還可能包含 CC 授權通知，這是專案中繼資料屬性。

site footer

網站頁尾連結，語言選取小工具。整個網站都會保持一致。

HTML 來源檔案

<html devsite>
  <head>
    <title>Page title</title>
    <meta name="project_path" value="/path/to/_project.yaml" />
    <meta name="book_path" value="/path/to/_book.yaml" />
  </head>
  <body>

    <p>Body content goes here, implemented as HTML.</p>

  </body>
</html>

<html> 元素的 devsite 屬性會指示 DevSite 應該是 DevSite 網頁應該顯示，而不是完整的 HTML 素材資源。如果你的網頁顯示時沒有格式、標題或頁尾，請檢查 <html devsite> 是否顯示在檔案頂端附近。

<html>、<head> 和 <body> 為必要元素，且必須包含開始和結束標記。

一般網頁的 <head> 內也必須包含 <title> 元素。請參閱「網頁標題」。

特定的 <meta> 標記控制網頁功能。詳見本參考資料。一般網頁都有 "project_path" 中繼標記 (參照 _project.yaml 中繼資料檔案) 和 "book_path" 中繼標記 (參照 _book.yaml 中繼資料檔案)。請參閱「專案和書籍」。DevSite 識別的 <meta> 代碼通常不會顯示在最終頁面中。

<head> 中的其他元素和 <body> 中的所有元素都會在最終頁面中轉譯。

Markdown 來源檔案


Project: /path/to/_project.yaml
Book: /path/to/_book.yaml

# Page title

Body content, specified in Markdown, goes here.

典型的網頁必須包含標題 (例如# Page title)。請參閱「網頁標題」。

特定的中繼標記控制網頁功能。詳見本參考資料。一般網頁都有 Project: 中繼標記 (參照 _project.yaml 中繼資料檔案) 和 Book: 中繼標記 (參照 _book.yaml 中繼資料檔案)。查看專案和書籍。DevSite 識別的中繼標記通常不會顯示在最終網頁中。

專案與書籍

專案中繼資料檔案會使用名為 _project.yaml 的專案中繼資料檔案來描述。書籍是由名為「_book.yaml」的書籍中繼資料檔案描述。這些檔案會同時發布網頁和資產檔案，並翻譯成多種語言。如要瞭解這些檔案的結構和屬性，請參閱「專案中繼資料」和「書籍中繼資料」。

如要將頁面與專案建立關聯，請提供 project_path 屬性。其值是 _project.yaml 檔案的內容路徑。

HTML

<meta name="project_path" value="/path/to/_project.yaml" />

Markdown

Project: /path/to/_project.yaml

如果網頁沒有 project_path 屬性，就會在沒有專案列區域及其功能的情況下轉譯。系統不會將這個頁面視為專案的一部分。

如要將網頁與書籍建立關聯，請提供 book_path 屬性。其值是 _book.yaml 檔案的內容路徑。

HTML

<meta name="book_path" value="/path/to/_book.yaml" />

Markdown

Book: /path/to/_book.yaml

網頁標題

<head>
  <title>Page title</title>
  ...
</head>

或是在頁面的 <body> 中使用包含 page-title 類別的 <h1> 元素。

HTML

<h1 class="page-title">Page title</h1>

Markdown

# Page title

專案首頁不需要標題。

HTML

<meta name="no_page_title" value="true" />

Markdown

no_page_title: true

在特殊情況下，不需要自動為特殊版面配置使用 <h1>，但頁面仍需要視窗標題。您可以保留標題，但使用 "hide_page_heading" 屬性隱藏標題：

HTML

<title>Page title</title>
<meta name="hide_page_heading" value="true" />

Markdown

hide_page_heading: true
# Page title

標題說明

許多 DevSite 網站的標頭都有說明。這項設定會在 _project.yaml 中繼資料檔案中設定，並自動顯示在 DevSite 到達網頁上。換句話說，使用 _index.yaml 範本建立的網頁，會自動在標頭中轉譯說明 (位於 _project.yaml 檔案)。

只要在 _index.yaml 檔案的根層級設定 description，或在 landing_page 物件的 header 物件中設定 hide_description: true，即可覆寫網頁的說明。

全形版面配置

如果需要進一步控製版面配置，您可以指示 DevSite 會重新控制網站標頭列、專案列下方以及網站頁尾上方區域的版面配置。方法是將 "full_width" 中繼資料屬性設為 "true"。

HTML

<meta name="full_width" value="true" />

Markdown

full_width: true

上次更新日期

根據預設，full-width 頁面除外，頁面頁尾區域會有一個自動套用的「上次更新時間」變更。在多數情況下，這種做法能夠讓使用者知道網頁內容的時效性。

在少數情況下，這項資訊可能會令人困惑，或是產品團隊視為機密資訊。如要停用網頁上的上次更新通知，請將 hide_last_updated 屬性設為 true：

HTML

<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="hide_last_updated" value="true" />

Markdown

Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true

您可以覆寫系統自動計算出的「上次更新時間」日期，請將 refresh_date 中繼標記設為 ISO 8601 格式的日期：

HTML

<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="refresh_date" value="2017-03-27" />

Markdown

Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27

頁面說明

頁面說明是網頁內容的文字摘要，如要設定網頁的說明，請提供 <meta name="description" content="DESCRIPTION" /> 元素。請注意，說明文字位於名為 content 的屬性中，而非 value。這會與網路標準屬性相符

HTML

<meta name="description" content="It was the best of times, it was the blurst of times..." />

Markdown

description: It was the best of times, it was the blurst of times...

設定網頁說明後，系統會將 <meta> 標記加入最終頁面

映像檔路徑

image_path 是在社群媒體和 recommendations 和 dynamic content 等社群媒體中代表這個頁面的圖片路徑。設定後，這張圖片就會做為頁面的 OpenGraph 圖片，並覆寫專案的 social media 設定和 tenant site's 品牌宣傳設定。

HTML

<meta name="image_path" value="/site-assets/developers_64dp.png" />

Markdown

image_path: /site-assets/developers_64dp.png

關鍵字

keywords 欄位是以半形逗號分隔的字串清單，用於描述這個網頁，並用於站內搜尋和 Dynamic Content 等搜尋和探索功能。

keywords 欄位支援沒有維度關聯的平面關鍵字 (例如 gettingstarted)，以及使用維度命名空間表示文件與現實實體 (例如程式設計語言、產品和事件) 之間的關係 (例如 product:ComputeEngine 或 language:Python3)。您可以在任何關鍵字欄位中同時加入這兩種 keywords。

如果您所開發的關鍵字不符合格式規定，則在您使用的工具輸出內容 (通常是 DevSite 指令列工具或 DevSite Content Publisher) 的輸出結果中，會顯示包含關鍵字正確格式版本的警告。

HTML

<meta name="keywords" value="spacetime,timetravel,product:Delorean" />

Markdown

keywords: spacetime, timetravel, product:Delorean