وجیٹس: کیٹلاگ

<devsite-catalog> حسب ضرورت عنصر فلٹر کے قابل متحرک مواد فراہم کرتا ہے جس میں پلیٹ فارم وسیع فلٹرنگ UI شامل ہوتا ہے۔ یہ DevSite صفحہ پر کسی خاص موضوع سے متعلق وسائل لوڈ کرنے کے لیے DevSite کی ملکیت والے مواد سے استفسار کرتا ہے۔ یہ حسب ضرورت عنصر کسی بھی DevSite کرایہ دار سے وسائل کے ساتھ ساتھ بیرونی وسائل کو لوڈ کر سکتا ہے جو DevSite External Content Corpus میں شامل کیے گئے ہیں۔

استعمال

<devsite-catalog> کسٹم عنصر کا استعمال شروع کرنے کے لیے، درج ذیل کام کریں:

  1. اپنے صفحہ پر حسب ضرورت عنصر شامل کریں۔
  2. ڈائنامک مواد کے استفسار کے ساتھ اپنے ڈیٹا سیٹ کو الگ کریں۔
  3. فلٹرز شامل کریں۔
  4. اپنے رینڈرنگ کے اختیارات منتخب کریں۔
  5. اپنے مواد کو ٹیگ کریں۔
  6. لے آؤٹ کو ایڈجسٹ کریں۔

حسب ضرورت عنصر شامل کریں۔

مطلوبہ مقام پر اپنے صفحہ پر <devsite-catalog> حسب ضرورت عنصر شامل کریں۔

ایچ ٹی ایم ایل

HTML صفحات کے لیے، حسب ضرورت عنصر کسی دوسرے HTML عنصر کی طرح شامل کیا جا سکتا ہے:

<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 :

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

مارک ڈاؤن

مارک ڈاؤن فائلوں کے لیے، حسب ضرورت عنصر کو <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> عنصر کے لیے ایک سے زیادہ وصف کی وضاحت کرنے کے ساتھ ساتھ یہ یقینی بنانے کے لیے کہ تیار کردہ فلٹر UI درست ہے۔

پیرنٹ <select> عنصر پر مخصوص جہت میں ہر فلٹر قدر کے لیے ایک <option> عنصر شامل کریں۔ ہر ایک <option> پر ویلیو انتساب میں اپنی فلٹر ایبل قدر کی وضاحت کریں۔ اپنے <option> ٹیگز کے درمیان پڑھنے کے قابل فلٹر لیبلز شامل کریں۔ اگر آپ کا صفحہ مقامی ہے تو ان کا ترجمہ کیا جائے گا۔

مندرجہ ذیل کوڈ دستاویزات کی قسم کے فلٹرز اور مطلوبہ الفاظ کے فلٹرز کے ایک حصے کو فلٹرنگ UI میں نتائج کے پہلو میں شامل کرتا ہے۔

<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> Dynamic Content ویجیٹ کے لیے رینڈرنگ کے تمام اختیارات اور حسب ضرورت عنصر کی خصوصیات کو سپورٹ کرتا ہے۔

آپ اپنے کیٹلاگ کے کارڈ پر کون سا ڈیٹا ڈسپلے کرنا چاہتے ہیں اس کی وضاحت کرنے کے لیے fields وصف کا استعمال کریں۔ <devsite-dynamic-content> کے لیے دستاویز کردہ fields کے علاوہ، آپ اس نام کی جگہ میں ہر دستاویز پر لاگو ٹیگز کو رینڈر کرنے کے لیے دستاویزی ساختہ مطلوبہ الفاظ کے نام کی جگہوں میں سے کسی کی بھی وضاحت کر سکتے ہیں۔ مثال کے طور پر، product وضاحت کرنے کے نتیجے میں ہر صفحہ پر لاگو تمام پروڈکٹ ٹیگز اس صفحہ کے کارڈ پر پیش کیے جائیں گے۔ آپ دستاویز پر لاگو کردہ تمام ناموں کے ٹیگز کو دیکھنے کے لیے tags بھی بتا سکتے ہیں۔

مندرجہ ذیل کوڈ اوپر دی گئی مثال کو ترتیب دیتا ہے تاکہ 9 نتائج اور 9 اضافی نتائج فی صفحہ کے ساتھ شروع ہونے والے عددی صفحہ بندی UI کے ساتھ تازہ کاری کے لحاظ سے ترتیب دیئے گئے زیادہ سے زیادہ 1000 نتائج فراہم کریں۔ یہ نتائج کو ایک عنوان، خلاصہ، اور بٹن کے ساتھ کارڈز کے طور پر پیش کرنے کے لیے ترتیب دیتا ہے جس پر "مزید جانیں" کا لیبل لگا ہوا ہے نیز 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 سپورٹ حاصل ہے، تو آپ اپنے کیٹلاگ کارڈز کے لیے ایک نیا سویا ٹیمپلیٹ شامل کر کے اپنی مرضی کے مطابق ٹیمپلیٹ بنا سکتے ہیں۔ حسب ضرورت عنصر اور آپ کے کیٹلاگ پر ٹیمپلیٹ انتساب کا استعمال کرتے ہوئے اپنے نئے ٹیمپلیٹ کی وضاحت کرنا۔

اپنے مواد کو ٹیگ کریں۔

مواد صرف فلٹر کے قابل ہے اگر اسے آپ کے فلٹرز کے مطابق ٹیگ کیا گیا ہو۔ درج ذیل جہتوں کا استعمال کرتے ہوئے فلٹرز کو شامل کرنا ممکن ہے:

واضح طور پر ٹیگ کردہ سٹرکچرڈ کلیدی الفاظ (غیر ساختہ) مطلوبہ الفاظ page_type سٹرکچرڈ کلیدی الفاظ جو نام کے گراف سے اندازہ لگایا گیا ہے زیادہ تر چیک باکس اور سلیکٹ اسٹائل فلٹر مواد کو سٹرکچرڈ کلیدی الفاظ کے مطابق فلٹر کریں گے، جہاں فلٹر کا طول و عرض ایک منظم مطلوبہ الفاظ کے نام کی جگہ سے مماثل ہونا چاہیے اور فلٹر کی قدر باقی ماندہ الفاظ سے مماثل ہونی چاہیے۔ ساختہ مطلوبہ لفظ. ساختی مطلوبہ الفاظ اور معاون نام کی جگہوں کے بارے میں مزید معلومات کے لیے نام کی دستاویزات دیکھیں۔

تمام کیٹلاگ سے کسی صفحہ کو چھپانے کے لیے، hide_from_catalogs میٹا ڈیٹا ٹیگ کو اس صفحہ پر درست پر سیٹ کریں۔

لے آؤٹ کو ایڈجسٹ کریں۔

پہلے سے طے شدہ کالم لے آؤٹ کو تبدیل کرنے کے لیے (جو template="activity" آئٹمز کے لیے یا تو دو کالم ہیں یا بصورت دیگر تین کالم)، 1 , 2 , 3 , یا 4 کی قدر کے ساتھ ایک آئٹم-کراس وصف شامل کریں۔ 

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

جیسے جیسے ویو پورٹ تنگ ہوتا جاتا ہے، آئٹمز کی ترتیب اس بات کو یقینی بنانے کے لیے ایڈجسٹ ہو جاتی ہے کہ آئٹمز کا مواد قابل رسائی رہے۔ items-across 3 یا 4 کی قدروں میں، لے آؤٹ ٹیبلیٹ پر دو کالموں میں بدل جاتا ہے، اور تمام لے آؤٹس موبائل آلات پر ایک کالم میں بدل جاتے ہیں۔

مثالیں

<devsite-catalog> کسٹم عنصر کی بنیادی خصوصیات کی ظاہری شکل اور فعالیت کو ظاہر کرنے کے لیے درج ذیل مثالیں ہیں۔

کلاؤڈ آرکیٹیکچر سینٹر

ذیل میں کلاؤڈ آرکیٹیکچر سینٹر کے لیے استعمال ہونے والے کیٹلاگ کی ایک مثال ہے۔ title اور summary کے علاوہ، یہ کارڈز میں ان نام کی جگہوں کے لیے ٹیگ شامل کرنے کے لیے fields انتساب میں product اور api تعین کرتا ہے۔

ڈیمو

مکمل سائز دیکھیں 

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

Codelabs کیٹلوگ

ذیل میں فلیٹ کلیدی الفاظ، غیر نمبر والے صفحہ بندی، اور بغیر ٹیکسٹ فلٹر ان پٹ کا استعمال کرتے ہوئے کوڈ لیبز کے کیٹلاگ کی ایک مثال ہے۔

ڈیمو

مکمل سائز دیکھیں

پہلے سے لاگو فلٹرز

کیٹلاگ ویجیٹ صفحہ کے یو آر ایل میں صارف کے لاگو فلٹرز کی حالت کو ٹریک کرتا ہے، جس سے مخصوص فلٹر کنفیگریشنز کو بک مارک یا شیئر کیا جاسکتا ہے۔ ہر فلٹر کے طول و عرض کی نمائندگی یو آر ایل پیرامیٹر سے ہوتی ہے۔ یو آر ایل کے پیرامیٹرز کی تشکیل اس طرح کی گئی ہے:

فلٹر کنٹرولز کے لیے جن کی ایک ہی قدر ہوتی ہے جیسے سلیکٹ طرز کے فلٹرز، URL پیرامیٹر کی قدر عام فلٹر کی قدر ہوتی ہے۔ فلٹر کنٹرولز کے لیے جو چیک باکسز جیسی متعدد اقدار کو سپورٹ کرتے ہیں، یو آر ایل پیرامیٹر قدر عام فلٹر کی قدروں کی کوما سے الگ کردہ فہرست ہے۔ دیگر تمام (غیر فلٹر) URL پیرامیٹرز کیٹلاگ ویجیٹ سے متاثر نہیں ہوتے ہیں۔ مثال کے طور پر، اگر کسی صارف نے ٹیکسٹ فلٹر میں "بگ ڈیٹا" درج کیا ہے اور زبان کے چیک باکسز سے ازگر اور جاوا اسکرپٹ کو منتخب کیا ہے، تو صفحہ کا یو آر ایل ان فلٹرز کو استفسار کے سٹرنگ 'text=Big%20Data&language=python,javascript' کے ساتھ ظاہر کرتا ہے۔

جب کیٹلاگ ویجیٹ پر مشتمل صفحہ یو آر ایل میں فلٹر پیرامیٹرز کے ساتھ لوڈ ہوتا ہے، تو کیٹلاگ ویجیٹ متعلقہ فلٹر کنٹرولز اور فلٹر کے نتائج کو مناسب طریقے سے پہلے سے آباد کرتا ہے۔

مثال کے طور پر، کلاؤڈ آرکیٹیکچر سینٹر ڈیمو کا URL درج ذیل ہے:

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

یہاں استفسار کے تاروں کی کچھ مثالیں ہیں جو آپ اس URL میں شامل کر سکتے ہیں:

?doctype=bestpractices مواد کی قسم کا انتخاب کریں سیکشن میں بہترین طرز عمل کے چیک باکس کو چیک کرتا ہے، جو doctype فلٹر کے طول و عرض سے مطابقت رکھتا ہے۔ ?doctype=bestpractices,blueprint ایک ہی سیکشن میں بہترین پریکٹسز اور بلیو پرنٹ چیک باکس دونوں کو چیک کرتا ہے۔ ?text=Cloud%20SQL ٹیکسٹ فلٹر ان پٹ کو "کلاؤڈ ایس کیو ایل" کے ساتھ آباد کرتا ہے۔

فلٹر پیرامیٹر کے طول و عرض کو بھی ملایا جا سکتا ہے۔ درج ذیل URL میں doctype اور text پیرامیٹرز دونوں شامل ہیں:

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

یہ URL مناسب چیک باکسز کا انتخاب کرتا ہے اور ٹیکسٹ ان پٹ کو آباد کرتا ہے، جیسا کہ درج ذیل ڈیمو میں دکھایا گیا ہے۔

مکمل سائز دیکھیں