<devsite-catalog> কাস্টম উপাদান ফিল্টারযোগ্য গতিশীল বিষয়বস্তু প্রদান করে যাতে একটি প্ল্যাটফর্ম-ব্যাপী ফিল্টারিং UI অন্তর্ভুক্ত থাকে। এটি একটি DevSite পৃষ্ঠায় একটি নির্দিষ্ট বিষয়ের সাথে সম্পর্কিত সংস্থানগুলি লোড করার জন্য DevSite-মালিকানাধীন সামগ্রীকে জিজ্ঞাসা করে৷ এই কাস্টম উপাদানটি যেকোনও DevSite ভাড়াটে থেকে রিসোর্স লোড করতে পারে সেইসাথে ডেভসাইট এক্সটার্নাল কন্টেন্ট কর্পাসে যোগ করা বাহ্যিক রিসোর্স ।
ব্যবহার
<devsite-catalog> কাস্টম উপাদান ব্যবহার শুরু করতে, নিম্নলিখিতগুলি করুন:
- আপনার পৃষ্ঠায় কাস্টম উপাদান যোগ করুন.
- একটি ডায়নামিক কন্টেন্ট ক্যোয়ারী দিয়ে আপনার ডেটা সেট আলাদা করুন।
- ফিল্টার যোগ করুন।
- আপনার রেন্ডারিং বিকল্প নির্বাচন করুন.
- আপনার বিষয়বস্তু ট্যাগ.
- লেআউট সামঞ্জস্য করুন।
কাস্টম উপাদান যোগ করুন
পছন্দসই অবস্থানে আপনার পৃষ্ঠায় <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>
আপনি একটি custom_html ক্ষেত্র ব্যবহার করতে পারেন যদি আপনার অন্য কোনো আইটেম-স্তরের ক্ষেত্র যেমন 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 বৈশিষ্ট্য ফিল্টারিং মাত্রা নির্ধারণ করে, যা একটি কাঠামোগত কীওয়ার্ড নেমস্পেস বা keywords মতো একটি DevSite ক্ষেত্রের নামের সাথে মিলে যায়। লেবেল বৈশিষ্ট্য ব্যবহার করে আপনার পাঠকদের জন্য একটি মাত্রা লেবেল নির্দিষ্ট করুন। তৈরি হওয়া ফিল্টার UI সঠিক কিনা তা নিশ্চিত করতে প্রতিটি <select> উপাদানের জন্য একাধিক বৈশিষ্ট্য উল্লেখ করতে ভুলবেন না।
প্যারেন্ট <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> ডায়নামিক কন্টেন্ট উইজেটের জন্য সমস্ত রেন্ডারিং বিকল্প এবং কাস্টম উপাদান বৈশিষ্ট্য সমর্থন করে।
আপনি আপনার ক্যাটালগের কার্ডে কোন ডেটা প্রদর্শন করতে চান তা নির্দিষ্ট করতে fields বৈশিষ্ট্য ব্যবহার করুন। <devsite-dynamic-content> এর জন্য নথিভুক্ত fields ছাড়াও, আপনি সেই নেমস্পেসে প্রতিটি নথিতে প্রয়োগ করা ট্যাগগুলি রেন্ডার করার জন্য নথিভুক্ত কাঠামোগত কীওয়ার্ড নেমস্পেসগুলির যে কোনও একটি নির্দিষ্ট করতে পারেন৷ উদাহরণস্বরূপ, product নির্দিষ্ট করার ফলে প্রতিটি পৃষ্ঠায় প্রয়োগ করা সমস্ত পণ্য ট্যাগ সেই পৃষ্ঠার জন্য কার্ডে রেন্ডার করা হবে। নথিতে প্রয়োগ করা সমস্ত নামকরণ ট্যাগ দেখতে আপনি tags নির্দিষ্ট করতে পারেন।
নিম্নোক্ত কোডটি 9টি ফলাফল এবং 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 সমর্থন থাকে, তাহলে আপনি আপনার ক্যাটালগ কার্ডগুলির জন্য একটি নতুন Soy টেমপ্লেট যোগ করে একটি কাস্টম টেমপ্লেট তৈরি করতে পারেন
আপনার বিষয়বস্তু ট্যাগ
বিষয়বস্তু শুধুমাত্র ফিল্টারযোগ্য যদি এটি আপনার ফিল্টার অনুযায়ী ট্যাগ করা হয়। নিম্নলিখিত মাত্রা ব্যবহার করে ফিল্টার যোগ করা সম্ভব:
স্পষ্টভাবে ট্যাগ করা স্ট্রাকচার্ড কীওয়ার্ড (আনস্ট্রাকচার্ড) কীওয়ার্ড 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>
কোডল্যাব ক্যাটালগ
নিম্নে ফ্ল্যাট কীওয়ার্ড, অ-সংখ্যাযুক্ত পৃষ্ঠাবিন্যাস এবং কোন টেক্সট ফিল্টার ইনপুট ব্যবহার করে কোডল্যাবগুলির ক্যাটালগের একটি উদাহরণ।
ডেমো
প্রাক-প্রয়োগকৃত ফিল্টার
ক্যাটালগ উইজেট পৃষ্ঠা URL-এ ব্যবহারকারী-প্রয়োগকৃত ফিল্টারগুলির অবস্থা ট্র্যাক করে, নির্দিষ্ট ফিল্টার কনফিগারেশনগুলিকে বুকমার্ক বা শেয়ার করার অনুমতি দেয়। প্রতিটি ফিল্টার মাত্রা একটি URL প্যারামিটার দ্বারা উপস্থাপিত হয়। ইউআরএল প্যারামিটারগুলি নিম্নরূপ গঠন করা হয়েছে:
সিলেক্ট-স্টাইল ফিল্টারের মতো একটি একক মান আছে এমন ফিল্টার নিয়ন্ত্রণের জন্য, ইউআরএল প্যারামিটার মান হল স্বাভাবিক ফিল্টার মান। চেকবক্সের মতো একাধিক মান সমর্থন করে এমন ফিল্টার নিয়ন্ত্রণের জন্য, ইউআরএল প্যারামিটার মান হল স্বাভাবিক ফিল্টার মানগুলির একটি কমা দ্বারা পৃথক করা তালিকা। অন্য সব (নন-ফিল্টার) ইউআরএল প্যারামিটার ক্যাটালগ উইজেট দ্বারা প্রভাবিত হয় না। উদাহরণস্বরূপ, যদি কোনও ব্যবহারকারী পাঠ্য ফিল্টারে "বিগ ডেটা" প্রবেশ করে এবং ভাষা চেকবক্স থেকে পাইথন এবং জাভাস্ক্রিপ্ট নির্বাচন করে, পৃষ্ঠার URL সেই ফিল্টারগুলিকে ক্যোয়ারী স্ট্রিং 'text=Big%20Data&language=python,javascript' দ্বারা প্রতিফলিত করে৷
যখন ক্যাটালগ উইজেট সম্বলিত একটি পৃষ্ঠা URL-এ ফিল্টার পরামিতি সহ লোড করা হয়, তখন ক্যাটালগ উইজেট সংশ্লিষ্ট ফিল্টার নিয়ন্ত্রণ এবং ফিল্টার ফলাফলগুলিকে যথাযথভাবে প্রি-পপুলেট করে।
উদাহরণস্বরূপ, ক্লাউড আর্কিটেকচার সেন্টার ডেমোর জন্য নিম্নলিখিতটি URL:
https://developers.google.com/devsite/reference/widgets/catalog/architecture
এখানে ক্যোয়ারী স্ট্রিংগুলির কিছু উদাহরণ রয়েছে যা আপনি সেই URL এ যুক্ত করতে পারেন:
?doctype=bestpractices একটি বিষয়বস্তু প্রকার চয়ন বিভাগে সেরা অনুশীলন চেকবক্স চেক করে, যা doctype ফিল্টার মাত্রার সাথে মিলে যায়। ?doctype=bestpractices,blueprint একই বিভাগে সেরা অনুশীলন এবং ব্লুপ্রিন্ট চেকবক্স উভয়ই পরীক্ষা করে। ?text=Cloud%20SQL টেক্সট ফিল্টার ইনপুটকে "ক্লাউড এসকিউএল" দিয়ে পূরণ করে।
ফিল্টার পরামিতি মাত্রাগুলিও একত্রিত করা যেতে পারে। নিম্নলিখিত URL-এ ডকটাইপ এবং টেক্সট প্যারামিটার উভয়ই রয়েছে:
এই ইউআরএলটি উপযুক্ত চেকবক্স নির্বাচন করে এবং টেক্সট ইনপুট পূরণ করে, যেমনটি নিম্নলিখিত ডেমোতে দেখানো হয়েছে।