Această pagină a fost tradusă cu Cloud Translation API.

Widgeturi: Catalog

Elementul personalizat <devsite-catalog> oferă conținut dinamic filtrabil care include o interfață de utilizare de filtrare la nivel de platformă. Interogează conținutul deținut de DevSite pentru a încărca resurse legate de un anumit subiect pe o pagină DevSite. Acest element personalizat poate încărca resurse de la orice chiriaș DevSite, precum și resurse externe care au fost adăugate la corpus de conținut extern DevSite.

Utilizare

Pentru a începe să utilizați elementul personalizat <devsite-catalog> , faceți următoarele:

Adăugați elementul personalizat

Adăugați elementul personalizat <devsite-catalog> la pagina dvs. în locația dorită.

HTML

Pentru paginile HTML, elementul personalizat poate fi adăugat la fel ca orice alt element HTML:

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

YAML

Pentru un rând de pagină de destinație cu conținut suplimentar legat de elementul personalizat, utilizați un rând cu un singur articol cu opțiunea description-100 din opțiunile rândului paginii de destinație .

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>

De asemenea, puteți utiliza un câmp custom_html dacă nu aveți nevoie de alte câmpuri la nivel de articol, cum ar fi heading sau description :

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

Markdown

Pentru fișierele Markdown, elementul personalizat trebuie să fie împachetat într-un element <div> sau <section> :

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

Izolați-vă setul de date

Determinați o interogare de conținut dinamic care izolează setul de date complet pe care doriți să fie disponibil pentru catalogul dvs. și adăugați-l la atributul de interogare din noul dvs. catalog.

De exemplu, pentru a adăuga un catalog cu toate produsele listate pe developers.google.com la pagina dvs., adăugați următorul catalog pe pagina dvs.

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

Adăugați filtre

Pentru a adăuga filtre în catalogul dvs., urmați instrucțiunile de mai jos pentru fiecare dintre următoarele opțiuni:

O casetă de introducere a textului O secțiune de casete de selectare filtrează pe lateral

Filtru de introducere a textului

Adăugați o casetă de introducere care filtrează rezultatele pe măsură ce utilizatorul introduce text. Caseta de filtrare se potrivește cu textul utilizatorului din titlul, descrierea și cuvintele cheie ale fiecărui rezultat.

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

Filtre de casete de selectare

În elementul <devsite-catalog> , adăugați un element <select> pentru fiecare dimensiune filtrabilă, cum ar fi tipul de document, produsul și limbajul de programare. Atributul name determină dimensiunea de filtrare, care corespunde unui spațiu de nume de cuvinte cheie structurat sau unui nume de câmp DevSite, cum ar fi keywords . Specificați o etichetă de dimensiune pentru cititorii dvs. folosind atributul etichetă. Asigurați-vă că specificați atributul multiplu pentru fiecare element <select> , de asemenea, pentru a vă asigura că interfața de utilizare a filtrului generat este corectă.

Adăugați un element <option> pentru fiecare valoare de filtru din dimensiunea specificată pe elementul părinte <select> . Specificați valoarea dvs. filtrabilă în atributul value pentru fiecare <option> . Adăugați etichete de filtrare care pot fi citite între etichetele dvs. <option> ; acestea vor fi traduse dacă pagina dvs. este localizată.

Următorul cod adaugă o secțiune de filtre de tip de document și filtre de cuvinte cheie într-o interfață de utilizare de filtrare pe marginea rezultatelor:

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

Filtre inițiale pentru casetele de selectare

Atributul initial-checkbox-filters determină numărul de filtre casete de selectare care trebuie afișate la încărcarea inițială. Implicit este 3 .

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

Selectați opțiunile de randare

<devsite-catalog> acceptă toate opțiunile de randare și atributele de elemente personalizate pentru widgetul Conținut dinamic.

Utilizați atributul fields pentru a specifica ce date doriți să afișați pe cardul catalogului dvs. În plus față de fields documentate pentru <devsite-dynamic-content> , puteți specifica oricare dintre spațiile de nume de cuvinte cheie structurate documentate pentru a reda etichetele aplicate fiecărui document din acel spațiu de nume. De exemplu, specificarea product va duce la afișarea tuturor etichetelor de produs aplicate fiecărei pagini pe cardul pentru pagina respectivă. De asemenea, puteți specifica tags pentru a vedea toate etichetele de nomenclatură aplicate documentului.

Următorul cod configurează exemplul de mai sus pentru a furniza maximum 1000 de rezultate sortate după recentitate cu o interfață de utilizare cu paginare numerică care începe cu 9 rezultate și 9 rezultate suplimentare pe pagină. Configurați rezultatele pentru a fi redate ca carduri cu un titlu, un rezumat și un buton etichetat „Aflați mai multe”, precum și etichete pentru product și 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>

Dacă echipa dvs. are suport UXE, puteți crea un șablon personalizat pentru cardurile dvs. de catalog adăugând un nou șablon Soy la element personalizat și specificarea noului șablon folosind atributul șablon din catalog.

Etichetează-ți conținutul

Conținutul poate fi filtrat numai dacă este etichetat conform filtrelor dvs. Este posibil să adăugați filtre folosind următoarele dimensiuni:

cuvinte cheie structurate etichetate explicit (nestructurate) cuvinte cheie page_type cuvinte cheie structurate deduse din graficul Nomenclaturii Cele mai multe casete de selectare și filtre de tip select vor filtra conținutul în funcție de cuvintele cheie structurate, unde dimensiunea filtrului trebuie să se potrivească cu un spațiu de nume structurat al cuvântului cheie, iar valoarea filtrului trebuie să se potrivească cu restul cuvântul cheie structurat. Consultați documentația Nomenclaturii pentru mai multe informații despre cuvintele cheie structurate și spațiile de nume acceptate.

Pentru a ascunde o pagină din toate cataloagele, setați eticheta de metadate hide_from_catalogs la true pe pagina respectivă.

Ajustați aspectul

Pentru a modifica aspectul implicit al coloanei (care este fie de două coloane pentru elementele template="activity" sau de trei coloane altfel), adăugați un atribut item-across cu o valoare de 1 , 2 , 3 sau 4 .

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

Pe măsură ce fereastra de vizualizare se îngustează, aspectul elementelor se ajustează pentru a se asigura că conținutul elementelor rămâne accesibil. Pentru items-across valori de 3 sau 4 , aspectul trece la două coloane pe tablete, iar toate aspectele trec la o singură coloană pe dispozitivele mobile.

Exemple

Următoarele sunt exemple pentru a demonstra aspectul și funcționalitatea caracteristicilor de bază ale elementului personalizat <devsite-catalog> .

Centrul de arhitectură în cloud

Următorul este un exemplu de catalog utilizat pentru Centrul de arhitectură în cloud. Pe lângă title și summary , specifică product și api în atributul fields pentru a adăuga etichete pentru aceste spații de nume pe carduri.

Demo

Vizualizați dimensiunea completă

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

Catalog Codelabs

Următorul este un exemplu de catalog de laboratoare de cod care utilizează cuvinte cheie plate, paginare nenumerată și fără introducere a filtrului de text.

Demo

Vizualizați dimensiunea completă

Filtre pre-aplicate

Widgetul Catalog urmărește starea filtrelor aplicate de utilizator în adresa URL a paginii, permițând marcarea sau partajarea anumitor configurații de filtre. Fiecare parametru de filtru este reprezentat de un parametru URL. Parametrii URL sunt structurați după cum urmează:

Pentru controalele de filtru care au o singură valoare, cum ar fi filtrele de tip select, valoarea parametrului URL este valoarea normalizată a filtrului. Pentru controalele de filtrare care acceptă mai multe valori, cum ar fi casetele de selectare, valoarea parametrului URL este o listă a valorilor normalizate ale filtrului, separate prin virgulă. Toți ceilalți parametri URL (fără filtrare) nu sunt afectați de widgetul Catalog. De exemplu, dacă un utilizator a introdus „Date mari” în filtrul de text și a selectat Python și JavaScript din casetele de selectare Limbă, adresa URL a paginii reflectă acele filtre cu șirul de interogare „text=Big%20Data&language=python,javascript”.

Când o pagină care conține widget-ul Catalog este încărcată cu parametri de filtru în URL, widget-ul Catalog completează în prealabil controalele de filtru corespunzătoare și filtrează rezultatele în mod corespunzător.

De exemplu, următoarea este adresa URL pentru demonstrația Cloud Architecture Center :

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

Iată câteva exemple de șiruri de interogare pe care le-ați putea adăuga la acea adresă URL:

?doctype=bestpractices bifează caseta de selectare Cele mai bune practici din secțiunea Alegeți un tip de conținut , care corespunde dimensiunii filtrului doctype . ?doctype=bestpractices,blueprint bifează casele de selectare Cele mai bune practici și Blueprint din aceeași secțiune. ?text=Cloud%20SQL completează intrarea filtrului de text cu „Cloud SQL”.

Dimensiunile parametrilor filtrului pot fi, de asemenea, combinate. Următoarea adresă URL conține atât parametrii doctype, cât și parametrii text:

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

Această adresă URL selectează casetele de selectare corespunzătoare și completează textul introdus, așa cum se arată în demonstrația următoare.

Vizualizați dimensiunea completă