מטא-נתונים של הדף

דף DevSite הוא יחידת תוכן יחידה באתר. דף יכול לכלול כותרת, גוף, רכיבי כותרת ומאפייני מטא נתונים ששולטים בתכונות של האתר. כשמשתמש מבקר בכתובת ה-URL של דף כלשהו, האתר מעבד דף אינטרנט מלא על סמך המאפיינים של דף התוכן, ומוסיף רכיבים דינמיים כמו הכותרת העליונה, הכותרת התחתונה וסרגל הצד. התנהגויות ברירת המחדל עוברות אופטימיזציה לדפים שיש בהם תיעוד טכני, אבל אפשר להגדיר את הדף גם לשימושים אחרים, כמו שיווק ודפי נחיתה.

מבנה הדף

דף 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> מעובדים בדף הסופי.

קובצי מקור של 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>

לחלופין, אפשר להשתמש ברכיב <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 ומוצג באופן אוטומטי בדפי הנחיתה של DevSite. במילים אחרות, בדפים שנוצרים בתבנית _index.yaml יוצג באופן אוטומטי תיאור בכותרת, שמוגדר בקובץ _project.yaml.

אפשר לשנות את התיאור הזה בדף על ידי הגדרה של description ברמה הבסיסית (root) של הקובץ _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 לכל שדה של מילות מפתח.

אם תבצעו את השלב של מילת מפתח שלא עומדת בדרישות הפורמט, תוצג אזהרה עם הגרסה בפורמט הנכון של מילת המפתח בפלט של הכלי שבו השתמשתם (בדרך כלל כלי שורת הפקודה DevSite או בעל התוכן הדיגיטלי של DevSite).

HTML

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

Markdown

keywords: spacetime, timetravel, product:Delorean