องค์ประกอบที่กำหนดเองของ <devsite-catalog> มีเนื้อหาแบบไดนามิกที่กรองได้ รวมถึง UI การกรองทั่วทั้งแพลตฟอร์ม โดยจะค้นหาเนื้อหาของ DevSite เพื่อโหลดทรัพยากรที่เกี่ยวข้องกับหัวข้อหนึ่งๆ ในหน้า DevSite องค์ประกอบที่กำหนดเองนี้โหลดทรัพยากรจากกลุ่มผู้ใช้ของ DevSite ได้ รวมถึงทรัพยากรภายนอกที่เพิ่มลงในคลังเนื้อหาภายนอกของ DevSite

การใช้งาน

หากต้องการเริ่มต้นใช้งานองค์ประกอบที่กำหนดเอง <devsite-catalog> ให้ทำดังนี้

1. เพิ่มองค์ประกอบที่กำหนดเองลงในหน้าเว็บ
2. แยกชุดข้อมูลด้วยการค้นหาเนื้อหาแบบไดนามิก
3. เพิ่มตัวกรอง
4. เลือกตัวเลือกการแสดงผล
5. ติดแท็กเนื้อหา
6. ปรับเลย์เอาต์

เพิ่มองค์ประกอบที่กำหนดเอง

เพิ่มองค์ประกอบที่กำหนดเอง <devsite-catalog> ลงในหน้าเว็บในตำแหน่งที่ต้องการ

HTML

สำหรับหน้า HTML คุณสามารถเพิ่มองค์ประกอบที่กำหนดเองได้เช่นเดียวกับองค์ประกอบ HTML อื่นๆ ดังนี้

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

YAML

สำหรับแถวหน้า Landing Page ที่มีเนื้อหาเพิ่มเติมที่เกี่ยวข้องกับองค์ประกอบที่กำหนดเอง ให้ใช้แถวสินค้ารายการเดียวที่มีตัวเลือก description-100 จากตัวเลือกแถวของหน้า Landing Page

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>

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> แต่ละรายการ รวมถึงตรวจสอบว่า UI ตัวกรองที่สร้างขึ้นถูกต้อง

เพิ่มองค์ประกอบ <option> สำหรับค่าตัวกรองแต่ละค่าในมิติข้อมูลที่ระบุในองค์ประกอบ <select> ระดับบนสุด ระบุค่าที่กรองได้ในแอตทริบิวต์ค่าบน <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 เพื่อระบุข้อมูลที่ต้องการให้แสดงในการ์ดของแคตตาล็อก นอกเหนือจาก fields ที่บันทึกไว้ในเอกสารสำหรับ <devsite-dynamic-content> แล้ว คุณยังระบุเนมสเปซของคีย์เวิร์ดที่มีโครงสร้างที่บันทึกไว้เพื่อแสดงแท็กที่ใช้กับเอกสารแต่ละรายการในเนมสเปซดังกล่าวได้ด้วย เช่น การระบุ product จะส่งผลให้แท็กผลิตภัณฑ์ทั้งหมดที่ใช้กับแต่ละหน้าแสดงผลบนการ์ดสำหรับหน้านั้น นอกจากนี้คุณยังระบุ tags เพื่อดูแท็ก Nomenclature ทั้งหมดที่ใช้กับเอกสารได้

โค้ดต่อไปนี้กำหนดค่าตัวอย่างด้านบนให้แสดงผลลัพธ์สูงสุด 1000 รายการซึ่งจัดเรียงตามความใหม่ด้วย UI แบบใส่เลขหน้าที่เป็นตัวเลขซึ่งเริ่มต้นด้วยผลลัพธ์ 9 รายการ และผลลัพธ์เพิ่มเติม 9 รายการต่อหน้า โดยจะกำหนดค่าผลลัพธ์ให้แสดงเป็นการ์ดที่มีชื่อ ข้อมูลสรุป และปุ่มที่มีป้ายกำกับ "ดูข้อมูลเพิ่มเติม" รวมถึงแท็กสำหรับ 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 เป็น "จริง" ในหน้านั้น

ปรับเลย์เอาต์

หากต้องการเปลี่ยนเลย์เอาต์คอลัมน์เริ่มต้น (อาจเป็น 2 คอลัมน์สําหรับสินค้า template="activity" หรือ 3 คอลัมน์) ให้เพิ่มแอตทริบิวต์สินค้าซึ่งมีค่า 1, 2, 3 หรือ 4

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

เมื่อวิวพอร์ตแคบลง การจัดวางรายการจะปรับเปลี่ยนเพื่อให้รายการ เนื้อหายังคงเข้าถึงได้ สำหรับค่า items-across ของ 3 หรือ 4 เลย์เอาต์จะเปลี่ยนเป็น 2 คอลัมน์ในแท็บเล็ต และเลย์เอาต์ทั้งหมดจะเปลี่ยนเป็นคอลัมน์เดียวในอุปกรณ์เคลื่อนที่

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่แสดงให้เห็นลักษณะและฟังก์ชันการทำงานของฟีเจอร์พื้นฐานขององค์ประกอบที่กำหนดเอง <devsite-catalog>

Cloud Architecture Center

ต่อไปนี้คือตัวอย่างของแคตตาล็อกที่ใช้สำหรับศูนย์สถาปัตยกรรมระบบคลาวด์ นอกเหนือจาก title และ summary แล้ว แอตทริบิวต์ยังระบุ product และ api ในแอตทริบิวต์ fields เพื่อเพิ่มแท็กสำหรับเนมสเปซเหล่านี้ลงในการ์ด

สาธิต

แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ

ดูขนาดเต็ม

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

แคตตาล็อก Codelabs

ต่อไปนี้เป็นตัวอย่างแคตตาล็อกของ Codelab ที่ใช้คีย์เวิร์ดแบบคงที่ การใส่เลขหน้าที่ไม่ใช่ตัวเลข และไม่มีการป้อนตัวกรองข้อความ

สาธิต

แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ

ดูขนาดเต็ม

ตัวกรองที่ใช้ล่วงหน้า

วิดเจ็ตแคตตาล็อกจะติดตามสถานะของตัวกรองที่ผู้ใช้ใช้ใน URL ของหน้าเว็บ ซึ่งช่วยให้บุ๊กมาร์กหรือแชร์การกำหนดค่าตัวกรองบางอย่างได้ มิติข้อมูลตัวกรองแต่ละรายการจะแสดงด้วยพารามิเตอร์ URL พารามิเตอร์ของ URL มีโครงสร้างดังนี้

สำหรับการควบคุมตัวกรองที่มีค่าเดียว เช่น ตัวกรองรูปแบบที่เลือก ค่าพารามิเตอร์ของ URL จะเป็นค่าตัวกรองมาตรฐาน สำหรับการควบคุมตัวกรองที่รองรับหลายค่า เช่น ช่องทำเครื่องหมาย ค่าพารามิเตอร์ของ URL จะเป็นรายการที่คั่นด้วยคอมมาของค่าตัวกรองมาตรฐาน พารามิเตอร์ของ URL (ที่ไม่ใช่ตัวกรอง) อื่นๆ ทั้งหมดจะไม่ได้รับผลกระทบจากวิดเจ็ตแคตตาล็อก เช่น หากผู้ใช้ป้อน "Big Data" ลงในตัวกรองข้อความ แล้วเลือก Python และ JavaScript จากช่องทำเครื่องหมายภาษา 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 จะเติมอินพุตตัวกรองข้อความด้วย "Cloud SQL"

คุณยังรวมมิติข้อมูลพารามิเตอร์ของตัวกรองได้ด้วย URL ต่อไปนี้มีทั้งพารามิเตอร์ DOCTYPE และข้อความ

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

URL นี้จะเลือกช่องทําเครื่องหมายที่เหมาะสมและป้อนข้อมูลข้อความ ดังที่แสดงในการสาธิตต่อไปนี้

แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ แนวทางปฏิบัติแนะนำ พิมพ์เขียว แนวคิด รูปแบบ สถาปัตยกรรมอ้างอิง บทแนะนำ

ดูขนาดเต็ม