विजेट: कैटलॉग

<devsite-catalog> कस्टम एलिमेंट से, फ़िल्टर किया जा सकने वाला डाइनैमिक कॉन्टेंट मिलता है. इसमें पूरे प्लैटफ़ॉर्म के लिए फ़िल्टर करने वाला यूज़र इंटरफ़ेस (यूआई) होता है. यह DevSite के मालिकाना हक वाले कॉन्टेंट के बारे में क्वेरी करता है, ताकि DevSite के पेज पर किसी खास विषय से जुड़े संसाधनों को लोड किया जा सके. यह कस्टम एलिमेंट, किसी भी DevSite टेनेंट से रिसॉर्स लोड कर सकता है. साथ ही, ऐसे बाहरी संसाधन भी लोड कर सकता है जो DevSite के बाहरी कॉन्टेंट के संग्रह में जोड़े गए हैं.

इस्तेमाल

<devsite-catalog> कस्टम एलिमेंट का इस्तेमाल शुरू करने के लिए, यह तरीका अपनाएं:

  1. अपने पेज में कस्टम एलिमेंट जोड़ें.
  2. डाइनैमिक कॉन्टेंट क्वेरी वाले अपने डेटा सेट को अलग करें.
  3. फ़िल्टर जोड़ना.
  4. रेंडरिंग के विकल्प चुनें.
  5. अपना कॉन्टेंट टैग करें.
  6. लेआउट में बदलाव करें.

कस्टम एलिमेंट जोड़ें

अपने पेज में अपनी पसंद की जगह पर <devsite-catalog> कस्टम एलिमेंट जोड़ें.

एचटीएमएल

एचटीएमएल पेजों के लिए, कस्टम एलिमेंट को किसी भी दूसरे एचटीएमएल एलिमेंट की तरह ही जोड़ा जा सकता है:

<devsite-catalog query="project_url:/devsite"></devsite-catalog>

YAML

अगर किसी लैंडिंग पेज की लाइन में, कस्टम एलिमेंट से जुड़ा ज़्यादा कॉन्टेंट मौजूद है, तो लैंडिंग पेज पर मौजूद लाइन के विकल्पों से, ब्यौरा-100 विकल्प के साथ एक आइटम वाली लाइन का इस्तेमाल करें.

rows:
- options:
  - description-100
  heading: Row-level heading
  description: >
    Row-level description with an overview of the catalog.
  items:
  - heading: Catalog heading
    description: >
      <p>Additional lead-in copy.</p>
      <devsite-catalog query="project_url:/devsite"></devsite-catalog>

अगर आपको heading या description जैसे किसी दूसरे आइटम-लेवल फ़ील्ड की ज़रूरत नहीं है, तो custom_html फ़ील्ड का इस्तेमाल भी किया जा सकता है:

rows:
- custom_html: >
    <devsite-catalog query="project_url:/devsite"></devsite-catalog>

Markdown

Markdown फ़ाइलों के लिए कस्टम एलिमेंट को <div> या <section> एलिमेंट में रैप किया जाना चाहिए:

<div>
  <devsite-catalog query="project_url:/devsite"></devsite-catalog>
</div>

अपने डेटा सेट को अलग करें

डाइनैमिक कॉन्टेंट क्वेरी तय करें. यह उस पूरे डेटासेट को अलग करती है जिसे आपको अपने कैटलॉग में उपलब्ध कराना है और उसे अपने नए कैटलॉग में क्वेरी एट्रिब्यूट में जोड़ें.

उदाहरण के लिए, Developers.google.com पर दी गई सूची में मौजूद सभी प्रॉडक्ट को अपने पेज पर जोड़ने के लिए, नीचे दिए गए कैटलॉग को अपने पेज पर जोड़ें.

<devsite-catalog query="type:product"></devsite-catalog>

फ़िल्टर जोड़ना

अपने कैटलॉग में फ़िल्टर जोड़ने के लिए, इन विकल्पों में से हर एक के लिए नीचे दिए गए निर्देशों का पालन करें:

टेक्स्ट इनपुट बॉक्स किनारे पर मौजूद चेकबॉक्स फ़िल्टर का एक सेक्शन

टेक्स्ट इनपुट फ़िल्टर

एक इनपुट बॉक्स जोड़ें, जो उपयोगकर्ता के टेक्स्ट डालने पर नतीजों को फ़िल्टर करता है. फ़िल्टर करने वाला बॉक्स, हर नतीजे के टाइटल, ब्यौरे, और कीवर्ड में मौजूद उपयोगकर्ता के टेक्स्ट से मैच करता है.

<devsite-catalog query="type:product">
  <input type="text" placeholder="Filter results">
</devsite-catalog>

चेकबॉक्स फ़िल्टर

अपने <devsite-catalog> एलिमेंट में, फ़िल्टर किए जा सकने वाले हर डाइमेंशन के लिए एक <select> एलिमेंट जोड़ें. जैसे, दस्तावेज़ का टाइप, प्रॉडक्ट, और प्रोग्रामिंग भाषा. name एट्रिब्यूट, फ़िल्टर करने वाले डाइमेंशन को तय करता है. यह एक स्ट्रक्चर्ड कीवर्ड नेमस्पेस या DevSite फ़ील्ड के नाम, जैसे कि keywords से जुड़ा होता है. लेबल एट्रिब्यूट का इस्तेमाल करके, अपनी ऑडियंस के लिए डाइमेंशन लेबल तय करें. पक्का करें कि आपने हर <select> एलिमेंट के लिए एक से ज़्यादा एट्रिब्यूट सबमिट किए हों. इससे यह भी पक्का हो सकेगा कि जनरेट किया गया फ़िल्टर यूज़र इंटरफ़ेस (यूआई) सही है.

पैरंट <select> एलिमेंट में, बताए गए डाइमेंशन में हर फ़िल्टर वैल्यू के लिए <option> एलिमेंट जोड़ें. हर <option> के लिए वैल्यू एट्रिब्यूट में, फ़िल्टर की जा सकने वाली वैल्यू बताएं. अपने <option> टैग के बीच में, पढ़ने लायक फ़िल्टर लेबल जोड़ें; अगर आपके पेज का स्थानीय भाषा में अनुवाद किया जाता है, तो इनका अनुवाद हो जाएगा.

यह कोड, नतीजों की साइड में फ़िल्टर के यूज़र इंटरफ़ेस (यूआई) में दस्तावेज़ के टाइप के हिसाब से फ़िल्टर और कीवर्ड फ़िल्टर का एक सेक्शन जोड़ता है:

<devsite-catalog query="project_url:/devsite">
  <select name="doctype" label="Choose a content type" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
  <select name="keywords" label="Choose a keyword" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
</devsite-catalog>

शुरुआती चेकबॉक्स फ़िल्टर

initial-checkbox-filters एट्रिब्यूट, शुरुआती लोड पर दिखाने के लिए संख्या वाले चेकबॉक्स के फ़िल्टर तय करता है. डिफ़ॉल्ट वैल्यू 3 है.

<devsite-catalog query="project_url:/devsite" initial-checkbox-filters="5">
  ...
</devsite-catalog>

रेंडरिंग के विकल्प चुनें

<devsite-catalog>, डाइनैमिक कॉन्टेंट विजेट के लिए रेंडरिंग के सभी विकल्पों और कस्टम एलिमेंट एट्रिब्यूट के साथ काम करता है.

fields एट्रिब्यूट का इस्तेमाल करके यह तय करें कि आपको अपने कैटलॉग के कार्ड पर कौनसा डेटा दिखाना है. <devsite-dynamic-content> के लिए दस्तावेज़ित fields के अलावा, उस नेमस्पेस में मौजूद हर दस्तावेज़ पर लागू किए गए टैग को रेंडर करने के लिए, किसी भी दस्तावेज़ किए गए स्ट्रक्चर्ड कीवर्ड नेमस्पेस के बारे में बताया जा सकता है. उदाहरण के लिए, product की जानकारी देने से, उस पेज के हर पेज पर रेंडर किए जाने वाले सभी प्रॉडक्ट के टैग लागू हो जाएंगे. दस्तावेज़ पर लागू किए गए सभी नामावली टैग देखने के लिए, tags भी तय किया जा सकता है.

यह कोड ऊपर दिए गए उदाहरण को कॉन्फ़िगर करता है, ताकि रीसेंसी के आधार पर क्रम से लगाए गए ज़्यादा से ज़्यादा 1,000 नतीजे दिखाए जा सकें. यूज़र इंटरफ़ेस (यूआई) में, हर पेज पर नौ नतीजे और नौ अतिरिक्त नतीजों से शुरू होने वाले न्यूमेरिक पेजनेशन यूज़र इंटरफ़ेस (यूआई) होता है. यह नतीजों को कॉन्फ़िगर करके, उन्हें कार्ड के तौर पर दिखाता है. इनमें टाइटल, खास जानकारी, और "ज़्यादा जानें" लेबल वाले बटन शामिल होते हैं और साथ ही product और api के लिए टैग.

<devsite-catalog query="project_url:/devsite"
                 maxresults="1000"
                 sortorder="recency"
                 items-per-page="9"
                 fields="title summary product api"
                 pagination-type="numeric"
                 link-type="button"
                 button-label="Learn more"
                 template="card">
  <select name="doctype" label="Choose a content type" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
  <select name="keywords" label="Choose a keyword" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
</devsite-catalog>

अगर आपकी टीम के पास UXE की सुविधा है, तो आपके पास अपने कैटलॉग कार्ड के लिए कस्टम टेंप्लेट बनाने का विकल्प है. इसके लिए, कस्टम एलिमेंट में नया Soy टेंप्लेट जोड़ा जा सकता है. साथ ही, अपने कैटलॉग में मौजूद टेंप्लेट एट्रिब्यूट का इस्तेमाल करके नया टेंप्लेट तय किया जा सकता है.

अपना कॉन्टेंट टैग करें

कॉन्टेंट को सिर्फ़ तब फ़िल्टर किया जा सकता है, जब उसे आपके फ़िल्टर के हिसाब से टैग किया गया हो. इन डाइमेंशन का इस्तेमाल करके फ़िल्टर जोड़े जा सकते हैं:

साफ़ तौर पर टैग किए गए स्ट्रक्चर्ड कीवर्ड (असंरचित) कीवर्ड page_type नामांकरण ग्राफ़ से अनुमानित संरचित कीवर्ड ज़्यादातर चेकबॉक्स और चुनने की शैली वाले फ़िल्टर, स्ट्रक्चर्ड कीवर्ड के हिसाब से कॉन्टेंट को फ़िल्टर करेंगे. यहां फ़िल्टर डाइमेंशन का, स्ट्रक्चर्ड कीवर्ड के नेमस्पेस से मेल खाना ज़रूरी है और फ़िल्टर की वैल्यू, स्ट्रक्चर्ड कीवर्ड के बाकी हिस्से से मैच होनी चाहिए. स्ट्रक्चर्ड कीवर्ड और इस्तेमाल किए जा सकने वाले नेमस्पेस के बारे में ज़्यादा जानकारी के लिए, नामकरण का दस्तावेज़ देखें.

किसी पेज को सभी कैटलॉग से छिपाने के लिए, उस पेज पर hide_from_catalogs मेटाडेटा टैग को 'सही' पर सेट करें.

लेआउट में बदलाव करें

डिफ़ॉल्ट कॉलम लेआउट को बदलने के लिए (यह template="activity" आइटम के लिए दो कॉलम है या तीन कॉलम हैं). इसके लिए, एट्रिब्यूट में 1, 2, 3 या 4 की वैल्यू वाले आइटम जोड़ें.

<devsite-catalog items-across="2" query="type:product"></devsite-catalog>

जैसे-जैसे व्यूपोर्ट छोटा होता जाता है, आइटम का लेआउट यह पक्का करने के लिए एडजस्ट हो जाता है कि कॉन्टेंट को ऐक्सेस किया जा सकता है. 3 या 4 की items-across वैल्यू के लिए, लेआउट, टैबलेट पर दो कॉलम में बदल जाता है और सभी लेआउट, मोबाइल डिवाइसों पर एक कॉलम में स्विच हो जाते हैं.

उदाहरण

<devsite-catalog> कस्टम एलिमेंट की बुनियादी सुविधाओं के दिखने और काम करने के तरीके के बारे में बताने के लिए, यहां कुछ उदाहरण दिए गए हैं.

Cloud आर्किटेक्चर सेंटर

Cloud आर्किटेक्चर सेंटर के लिए इस्तेमाल किए जाने वाले कैटलॉग का एक उदाहरण नीचे दिया गया है. title और summary के अलावा, यह fields एट्रिब्यूट में product और api के बारे में बताता है, ताकि इन नेमस्पेस के लिए कार्ड में टैग जोड़े जा सकें.

डेमो

फ़ुल साइज़ देखें

<span class="devsite-heading" role="heading" aria-level="4">Source</span>

कोड लैब कैटलॉग

नीचे कोडलैब के कैटलॉग का एक उदाहरण दिया गया है, जिसमें फ़्लैट कीवर्ड, बिना नंबर वाले पेजिनेशन, और बिना टेक्स्ट फ़िल्टर इनपुट का इस्तेमाल किया गया है.

डेमो

फ़ुल साइज़ देखें

पहले से लागू किए गए फ़िल्टर

कैटलॉग विजेट, पेज के यूआरएल में उपयोगकर्ता के लागू किए गए फ़िल्टर की स्थिति को ट्रैक करता है. इससे खास फ़िल्टर कॉन्फ़िगरेशन को बुकमार्क या शेयर किया जा सकता है. हर फ़िल्टर डाइमेंशन को एक यूआरएल पैरामीटर से दिखाया जाता है. यूआरएल पैरामीटर इस तरह से तय किए जाते हैं:

चुनें-स्टाइल वाले फ़िल्टर जैसी सिंगल वैल्यू वाले फ़िल्टर कंट्रोल के लिए, यूआरएल पैरामीटर की वैल्यू सामान्य फ़िल्टर की वैल्यू होती है. चेकबॉक्स जैसी कई वैल्यू के साथ काम करने वाले फ़िल्टर कंट्रोल के लिए, यूआरएल पैरामीटर की वैल्यू, सामान्य फ़िल्टर वैल्यू की कॉमा-सेपरेटेड लिस्ट होती है. अन्य सभी (बिना फ़िल्टर वाले) यूआरएल पैरामीटर पर कैटलॉग विजेट का कोई असर नहीं होता है. उदाहरण के लिए, अगर किसी उपयोगकर्ता ने "बड़ा डेटा" डाला है टेक्स्ट फ़िल्टर करने और भाषा वाले चेकबॉक्स से Python और JavaScript चुनने पर, पेज का यूआरएल उन फ़िल्टर को क्वेरी स्ट्रिंग 'text=Big%20Data&language=python,JavaScript' के साथ दिखाता है.

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

उदाहरण के लिए, Cloud आर्किटेक्चर सेंटर के डेमो का यूआरएल यहां दिया गया है:

https://developers.google.com/devsite/reference/widgets/catalog/architecture

यहां क्वेरी स्ट्रिंग के कुछ ऐसे उदाहरण दिए गए हैं जिन्हें उस यूआरएल में जोड़ा जा सकता है:

?doctype=bestpractices, doctype फ़िल्टर डाइमेंशन से जुड़े कॉन्टेंट का टाइप चुनें सेक्शन में, सबसे सही तरीके चेकबॉक्स पर सही का निशान लगाता है. ?doctype=bestpractices,blueprint एक ही सेक्शन में, सबसे सही तरीके और ब्लूप्रिंट, दोनों चेकबॉक्स पर क्लिक करता है. ?text=Cloud%20SQL, टेक्स्ट फ़िल्टर इनपुट को "Cloud SQL" से अपने-आप भरता है.

फ़िल्टर पैरामीटर के डाइमेंशन को भी जोड़ा जा सकता है. नीचे दिए गए यूआरएल में doctype और टेक्स्ट पैरामीटर, दोनों शामिल हैं:

https://developers.google.com/devsite/reference/widgets/catalog/architecture?doctype=bestpractices%2Cblueprint&amp;text=Cloud%20SQL

यह यूआरएल सही चेकबॉक्स को चुनता है और टेक्स्ट इनपुट को पॉप्युलेट करता है, जैसा कि नीचे दिए गए डेमो में दिखाया गया है.

फ़ुल साइज़ देखें