पेज का मेटाडेटा

DevSite पेज, साइट पर कॉन्टेंट की एक इकाई होती है. किसी पेज में ऐसा टाइटल, मुख्य हिस्सा, हेडर एलिमेंट, और मेटाडेटा एट्रिब्यूट हो सकते हैं जो साइट की सुविधाओं को कंट्रोल करते हैं. जब कोई उपयोगकर्ता किसी पेज के यूआरएल पर जाता है, तो साइट कॉन्टेंट पेज की प्रॉपर्टी के आधार पर एक पूरा वेब पेज रेंडर करती है. इसमें हेडर, फ़ुटर, और साइडबार जैसे डाइनैमिक एलिमेंट जोड़े जाते हैं. डिफ़ॉल्ट व्यवहार, तकनीकी दस्तावेज़ वाले पेजों के लिए ऑप्टिमाइज़ किए जाते हैं. हालांकि, पेज को मार्केटिंग और लैंडिंग पेज जैसे दूसरे इस्तेमाल के लिए भी कॉन्फ़िगर किया जा सकता है.

पेज का स्ट्रक्चर

DevSite पेज एक ऐसा वेब पेज होता है जिसके सामान्य दिखने के तरीके और सुविधाओं को साइट मैनेज करती है. Google Developers पर मौजूद किसी पेज पर, कई चीज़ें एक जैसी होती हैं. (सभी साइटें सभी सुविधाओं का समर्थन नहीं करती हैं.) लेबल के लिए बनाए गए डायग्राम पर कर्सर घुमाएं.

site header

साइट का लोगो, साइन-इन विजेट, खोज बॉक्स, और टॉप नेविगेशन. पूरी साइट पर एक जैसा.

project bar

प्रोजेक्ट या प्रॉडक्ट का टाइटल और प्रोजेक्ट के हिसाब से विजेट (जैसे, "फ़ीडबैक" लिंक). इस सेक्शन को प्रोजेक्ट मेटाडेटा से तय किया जाता है.

sidebar

किताब के हिसाब से नेविगेशन की सुविधा. इस सेक्शन को किताब के मेटाडेटा से तय किया जाता है.

body

पेज का टाइटल और पेज का कॉन्टेंट.

page footer ("last updated")

पेज के हिसाब से विजेट (जैसे कि "पिछली बार अपडेट किया गया" की सूचना). इसमें कॉपी लाइसेंस की सूचना भी शामिल हो सकती है, जो प्रोजेक्ट मेटाडेटा का एक एट्रिब्यूट है.

site footer

साइट फ़ुटर लिंक, भाषा चुनने वाला विजेट. पूरी साइट पर एक जैसा.

एचटीएमएल सोर्स फ़ाइलें

<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 के पेज के तौर पर रेंडर किया जाना चाहिए, न कि एचटीएमएल ऐसेट के तौर पर. अगर आपका पेज, बिना किसी फ़ॉर्मैट या हेडर या फ़ुटर के दिख रहा है, तो यह देख लें कि आपकी फ़ाइल में सबसे ऊपर <html devsite> दिख रहा हो.

<html>, <head>, और <body> एलिमेंट ज़रूरी हैं. साथ ही, इनके खुलने और बंद होने वाले टैग होने चाहिए.

किसी सामान्य पेज के <head> के अंदर, <title> एलिमेंट भी होना चाहिए. पेज का टाइटल देखें.

खास <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 फ़ाइल का कॉन्टेंट पाथ होता है.

एचटीएमएल

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

Markdown

Project: /path/to/_project.yaml

अगर किसी पेज में project_path एट्रिब्यूट नहीं है, तो उसे प्रोजेक्ट बार क्षेत्र और उसकी सुविधाओं के बिना रेंडर किया जाएगा. पेज को प्रोजेक्ट का हिस्सा नहीं माना जाएगा.

किसी पेज को किसी किताब से जोड़ने के लिए, book_path एट्रिब्यूट की वैल्यू दें. इसकी वैल्यू, _book.yaml फ़ाइल का कॉन्टेंट पाथ होता है.

एचटीएमएल

<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> एलिमेंट का इस्तेमाल किया जा सकता है.

एचटीएमएल

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

Markdown

# Page title

प्रोजेक्ट के होम पेज के लिए टाइटल की ज़रूरत नहीं होती.

एचटीएमएल

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

Markdown

no_page_title: true

कुछ खास मामलों में, जहां ऑटोमैटिक <h1> किसी खास लेआउट के लिए नहीं चाहिए, लेकिन पेज को अब भी विंडो के टाइटल की ज़रूरत है, तब आपके पास टाइटल को बनाए रखने, लेकिन "hide_page_heading" एट्रिब्यूट का इस्तेमाल करके हेडिंग को छिपाने का विकल्प होता है:

एचटीएमएल

<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" पर सेट करें.

एचटीएमएल

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

Markdown

full_width: true

पिछली बार अपडेट करने की तारीख

डिफ़ॉल्ट रूप से, full-width पेजों को छोड़कर, पेज फ़ुटर क्षेत्र में "पिछली बार अपडेट किया गया" अपने-आप शामिल होता है सूचना. ज़्यादातर मामलों में, इससे उपयोगकर्ताओं को साफ़ तौर पर पता चलता है कि पेज का कॉन्टेंट कितना नया है.

कुछ मामलों में, यह जानकारी भ्रम की स्थिति पैदा कर सकती है या प्रॉडक्ट टीम इसे गोपनीय मान सकती है. किसी पेज पर, पिछली बार अपडेट की गई सूचना को बंद करने के लिए, hide_last_updated एट्रिब्यूट को true पर सेट करें:

एचटीएमएल

<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

अपने-आप कैलकुलेट हुई "पिछली बार अपडेट किया गया" सेटिंग को बदला जा सकता है रीफ़्रेश_date मेटा टैग को ISO 8601 फ़ॉर्मैट में तारीख पर सेट करके तारीख:

एचटीएमएल

<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 में; यह वेब स्टैंडर्ड एट्रिब्यूट से मेल खाता है.

एचटीएमएल

<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 ब्रैंडिंग सेटिंग बदल जाएंगी.

एचटीएमएल

<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 पब्लिशर.

एचटीएमएल

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

Markdown

keywords: spacetime, timetravel, product:Delorean