Siêu dữ liệu trang
Trang DevSite là một đơn vị nội dung duy nhất trên trang web. Một trang có thể có các thuộc tính như tiêu đề, nội dung, tiêu đề và siêu dữ liệu kiểm soát các tính năng của trang web. Khi người dùng truy cập URL của một trang, trang web đó sẽ hiển thị một trang web hoàn chỉnh dựa trên các thuộc tính của trang nội dung, thêm các phần tử động như tiêu đề, chân trang và thanh bên. Chế độ mặc định được tối ưu hoá cho các trang tài liệu kỹ thuật. Tuy nhiên, bạn cũng có thể thiết lập một trang cho các mục đích khác, chẳng hạn như tiếp thị và trang đích.
Cấu trúc của trang
Trang DevSite là một trang web có giao diện và các tính năng chung do trang web quản lý. Một trang trên Google Developers hiển thị với một số khu vực chung. (Không phải trang web nào cũng hỗ trợ mọi tính năng.) Di chuột qua biểu đồ để xem nhãn.
site header
Biểu trưng trang web, tiện ích đăng nhập, hộp tìm kiếm và thanh điều hướng trên cùng. Phổ biến trên toàn bộ trang web.
project bar
Tiêu đề dự án hoặc sản phẩm và các tiện ích dành riêng cho dự án (chẳng hạn như liên kết "Phản hồi"). Khu vực này được xác định theo siêu dữ liệu dự án.
sidebar
Điều hướng theo thứ bậc trên toàn sách. Khu vực này được xác định bằng siêu dữ liệu về sách.
body
Tiêu đề trang và nội dung của trang.
page footer ("last updated")
Tiện ích theo trang cụ thể (chẳng hạn như thông báo "Cập nhật lần gần đây nhất"). Có thể cũng chứa thông báo về giấy phép CC, một thuộc tính siêu dữ liệu của dự án.
site footer
Các đường liên kết ở chân trang web, tiện ích chọn ngôn ngữ. Phổ biến trên toàn bộ trang web.
Tệp nguồn 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>
Thuộc tính devsite của phần tử <html> cho DevSite biết rằng trang này nên được hiển thị dưới dạng trang DevSite chứ không phải nguyên văn dưới dạng tài sản HTML. Nếu trang của bạn xuất hiện mà không có định dạng hoặc không có đầu trang hoặc chân trang, hãy kiểm tra để đảm bảo rằng <html devsite> xuất hiện gần đầu tệp của bạn.
Các phần tử <html>, <head> và <body> là bắt buộc, đồng thời phải có thẻ mở và thẻ đóng.
Một trang thông thường cũng phải có phần tử <title>, bên trong <head>. Xem phần Tiêu đề trang.
Những thẻ <meta> cụ thể kiểm soát các tính năng của trang. Các chi tiết này được mô tả trong tài liệu tham khảo này. Một trang thông thường có thẻ meta "project_path" là tệp siêu dữ liệu _project.yaml và thẻ meta "book_path" là tệp siêu dữ liệu _book.yaml. Xem Dự án và sách. Những thẻ <meta> được DevSite công nhận thường không xuất hiện trên trang cuối cùng.
Các phần tử khác trong <head> và tất cả phần tử trong <body> sẽ hiển thị trên trang cuối cùng.
Tệp nguồn Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Một trang thông thường phải có tiêu đề (ví dụ: # Page title). Xem Tiêu đề trang.
Các thẻ meta cụ thể kiểm soát các tính năng của trang. Các chi tiết này được mô tả trong tài liệu tham khảo này. Một trang thông thường có thẻ meta Project: là tệp siêu dữ liệu _project.yaml và thẻ meta Book: là tệp siêu dữ liệu _book.yaml. Xem Dự án và sách. Những thẻ meta được DevSite công nhận thường không xuất hiện trong trang cuối cùng.
Dự án và sách
Mỗi dự án được mô tả bằng tệp siêu dữ liệu dự án có tên _project.yaml. Sách được mô tả bằng tệp siêu dữ liệu về sách có tên _book.yaml. Những tệp này được xuất bản lên trang web cùng với tệp trang và tệp nội dung, đồng thời có thể được dịch sang nhiều ngôn ngữ. Xem Siêu dữ liệu dự án và Siêu dữ liệu về sách để biết thông tin về cấu trúc và thuộc tính của những tệp này.
Để liên kết một trang với một dự án, hãy cung cấp thuộc tính project_path. Giá trị của lớp này là đường dẫn nội dung đến tệp _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Nếu một trang không có thuộc tính project_path thì trang đó sẽ xuất hiện mà không có khu vực project bar (thanh dự án) và các tính năng tương ứng. Trang đó sẽ không được xem là một phần của dự án.
Để liên kết một trang với sách, hãy cung cấp thuộc tính book_path. Giá trị của lớp này là đường dẫn nội dung đến tệp _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Tiêu đề trang
<head>
<title>Page title</title>
...
</head>
Bạn cũng có thể sử dụng một phần tử <h1> có lớp page-title trong <body> của trang.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
Trang chủ dự án không cần tiêu đề,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
Trong các trường hợp đặc biệt mà bạn không muốn <h1> tự động cho một bố cục đặc biệt nhưng trang vẫn cần tiêu đề cửa sổ, bạn có thể giữ tiêu đề nhưng ẩn tiêu đề bằng thuộc tính "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Mô tả tiêu đề
Nhiều trang web DevSite có mô tả trong tiêu đề. Thông tin này được thiết lập trong tệp siêu dữ liệu _project.yaml và tự động xuất hiện trên các trang đích của DevSite. Nói cách khác, các trang được tạo bằng mẫu _index.yaml sẽ tự động hiển thị nội dung mô tả trong tiêu đề, như được đặt trong tệp _project.yaml.
Bạn có thể ghi đè nội dung mô tả này cho trang bằng cách đặt description ở gốc của tệp _index.yaml hoặc chặn bằng cách đặt hide_description: true trong đối tượng header của đối tượng landing_page.
Bố cục có chiều rộng đầy đủ
Nếu cần có nhiều quyền kiểm soát hơn đối với bố cục, bạn có thể yêu cầu DevSite từ bỏ quyền kiểm soát bố cục cho khu vực bên dưới tiêu đề trang web và thanh dự án và phía trên chân trang của trang web. Để làm như vậy, hãy đặt thuộc tính siêu dữ liệu "full_width" thành "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Ngày cập nhật gần đây nhất
Theo mặc định, ngoại trừ trên các trang full-width, phần chân trang sẽ có thêm một "lần cập nhật gần đây nhất" tự động . Trong hầu hết các trường hợp, điều này cung cấp cho người dùng một tín hiệu đơn giản về mức độ mới mẻ của nội dung trên trang.
Trong một số trường hợp, thông tin này có thể gây nhầm lẫn hoặc có thể được nhóm sản phẩm xem là bí mật. Để tắt thông báo cập nhật gần đây nhất trên một trang, hãy đặt thuộc tính hide_last_updated thành 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
Bạn có thể ghi đè giá trị "lần cập nhật gần nhất" được tính toán tự động ngày bằng cách đặt thẻ meta Refresh_date thành ngày ở định dạng 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
Mô tả trang
Mô tả trang là bản tóm tắt bằng văn bản về nội dung của trang. Để đặt nội dung mô tả cho trang, hãy cung cấp phần tử <meta name="description" content="DESCRIPTION" />. Lưu ý rằng văn bản mô tả nằm trong thuộc tính có tên content chứ không phải value; URL này khớp với thuộc tính tiêu chuẩn web.
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...
Việc đặt nội dung mô tả trang sẽ khiến thẻ <meta> được thêm vào trang cuối cùng
Đường dẫn hình ảnh
image_path là đường dẫn đến hình ảnh đại diện cho trang này trong mạng xã hội và các tính năng của DevSite như recommendations và dynamic content. Khi được đặt, hình ảnh này sẽ được dùng làm hình ảnh OpenGraph của trang, ghi đè chế độ cài đặt social media của dự án và chế độ cài đặt thương hiệu của tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Từ khóa
Trường keywords là một danh sách được phân tách bằng dấu phẩy gồm các chuỗi mô tả trang, đồng thời được dùng trong các tính năng tìm kiếm và khám phá như tìm kiếm trang web và Dynamic Content.
Trường keywords hỗ trợ từ khoá cố định không có mối liên kết về phương diện (ví dụ: gettingstarted) và từ khoá có cấu trúc dùng không gian tên phương diện để thể hiện mối quan hệ giữa tài liệu và các thực thể thực tế như ngôn ngữ lập trình, sản phẩm và sự kiện (ví dụ: product:ComputeEngine hoặc language:Python3). Bạn có thể thêm cả hai loại keywords vào bất kỳ trường từ khoá nào.
Nếu bạn đưa từ khoá không tuân thủ các yêu cầu về định dạng, bạn sẽ thấy một cảnh báo với phiên bản từ khoá được định dạng chính xác trong kết quả của công cụ mà bạn đã sử dụng (thường là công cụ dòng lệnh DevSite hoặc DevSite Nhà xuất bản nội dung).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean