ข้อมูลเมตาของหน้า
หน้า DevSite เป็นหน่วยเนื้อหาเดียวในเว็บไซต์ หน้าเว็บอาจมีชื่อ เนื้อหา องค์ประกอบส่วนหัว และแอตทริบิวต์ข้อมูลเมตาที่ควบคุมฟีเจอร์ของเว็บไซต์ เมื่อผู้ใช้เข้าชม URL ของหน้าเว็บ เว็บไซต์จะแสดงหน้าเว็บที่สมบูรณ์ตามคุณสมบัติของหน้าเนื้อหา โดยเพิ่มองค์ประกอบแบบไดนามิก เช่น ส่วนหัว ส่วนท้าย และแถบด้านข้าง ระบบจะเพิ่มประสิทธิภาพลักษณะการทำงานเริ่มต้นให้เหมาะกับหน้าเอกสารทางเทคนิค แต่คุณก็สามารถกำหนดค่าหน้าเว็บสำหรับการใช้งานอื่นๆ ได้ด้วย เช่น หน้าการตลาดและหน้า Landing Page
โครงสร้างของหน้าเว็บ
หน้า 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>
แอตทริบิวต์ devsite ขององค์ประกอบ <html> จะบอก DevSite ว่าควรแสดงผลเป็นหน้า DevSite ไม่ใช่เนื้อหา HTML แบบคำต่อคำ หากหน้าเว็บปรากฏขึ้นโดยไม่มีการจัดรูปแบบหรือไม่มีส่วนหัวหรือส่วนท้าย ให้ตรวจสอบว่า <html devsite> ปรากฏอยู่บริเวณด้านบนของไฟล์
ต้องมีองค์ประกอบ <html>, <head> และ <body> และต้องมีแท็กเปิดและปิด
หน้าเว็บทั่วไปต้องมีองค์ประกอบ <title> ภายใน <head> ด้วย ดูชื่อหน้า
แท็ก <meta> เฉพาะจะควบคุมฟีเจอร์ของหน้า มีคำอธิบายอยู่ในข้อมูลอ้างอิงนี้ หน้าเว็บทั่วไปจะมีเมตาแท็ก "project_path" ซึ่งอ้างถึงไฟล์ข้อมูลเมตา _project.yaml และเมตาแท็ก "book_path" ซึ่งหมายถึงไฟล์ข้อมูลเมตา _book.yaml ดูโครงการและหนังสือ แท็ก <meta> ที่ DevSite รู้จักมักไม่ปรากฏในหน้าสุดท้าย
องค์ประกอบอื่นๆ ใน <head> และองค์ประกอบทั้งหมดใน <body> จะแสดงในหน้าสุดท้าย
ไฟล์ต้นฉบับมาร์กดาวน์
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>
หรือใช้เอลิเมนต์ <h1> ที่มีคลาส page-title ใน <body> ของหน้า
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 และจะแสดงโดยอัตโนมัติในหน้า Landing Page ของ DevSite กล่าวคือ หน้าเว็บที่สร้างขึ้นโดยใช้เทมเพลตของ _index.yaml จะแสดงคำอธิบายในส่วนหัวโดยอัตโนมัติซึ่งตั้งค่าไว้ในไฟล์ _project.yaml
คุณลบล้างคำอธิบายนี้สำหรับหน้านี้ได้โดยตั้งค่า description ที่รูทของไฟล์ _index.yaml หรือหยุดโดยการตั้งค่า hide_description: true ภายในออบเจ็กต์ header ของออบเจ็กต์ landing_page
รูปแบบความกว้างเต็ม
หากต้องมีการควบคุมเลย์เอาต์มากขึ้น คุณสามารถบอก 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 เป็นเส้นทางไปยังรูปภาพที่แสดงถึงหน้านี้ในโซเชียลมีเดียและฟีเจอร์ของ DevSite เช่น 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 ทั้ง 2 ประเภทลงในช่องคีย์เวิร์ดใดก็ได้
หากเก็บคีย์เวิร์ดที่ไม่เป็นไปตามข้อกำหนดการจัดรูปแบบ คุณจะเห็นคำเตือนพร้อมคีย์เวิร์ดเวอร์ชันที่มีการจัดรูปแบบอย่างถูกต้องในเอาต์พุตของเครื่องมือที่คุณใช้ (โดยปกติจะเป็นเครื่องมือบรรทัดคำสั่ง DevSite หรือผู้เผยแพร่เนื้อหา DevSite)
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean