Widgeti: Katalog

Prilagođeni element <devsite-catalog> pruža dinamički sadržaj koji se može filtrirati i koji uključuje korisničko sučelje za filtriranje na cijeloj platformi. Upituje sadržaj u vlasništvu DevSite kako bi učitao resurse povezane s određenom temom na stranici DevSite. Ovaj prilagođeni element može učitati resurse iz bilo kojeg stanara DevSite kao i vanjske resurse koji su dodani korpusu vanjskog sadržaja DevSite.

Korištenje

Da biste počeli koristiti prilagođeni element <devsite-catalog> , učinite sljedeće:

  1. Dodajte prilagođeni element na svoju stranicu.
  2. Izolirajte svoj skup podataka s upitom dinamičkog sadržaja.
  3. Dodajte filtre.
  4. Odaberite svoje opcije iscrtavanja.
  5. Označite svoj sadržaj.
  6. Podesite izgled.

Dodajte prilagođeni element

Dodajte prilagođeni element <devsite-catalog> na svoju stranicu na željenom mjestu.

HTML

Za HTML stranice, prilagođeni element se može dodati baš kao i bilo koji drugi HTML element:

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

YAML

Za redak odredišne ​​stranice s dodatnim sadržajem koji se odnosi na prilagođeni element upotrijebite redak s jednom stavkom s opcijom description-100 iz opcija retka odredišne ​​stranice.

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>

Također možete koristiti polje custom_html ako vam nisu potrebna druga polja na razini stavke kao što su heading ili description :

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

Smanjenje

Za Markdown datoteke, prilagođeni element mora biti zamotan u <div> ili <section> element:

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

Izolirajte svoj skup podataka

Odredite upit dinamičkog sadržaja koji izolira puni skup podataka koji želite da bude dostupan vašem katalogu i dodajte ga atributu upita u svom novom katalogu.

Na primjer, da dodate katalog svih proizvoda navedenih nadevelopers.google.com na svoju stranicu, dodajte sljedeći katalog na svoju stranicu.

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

Dodajte filtre

Da biste dodali filtre u svoj katalog, slijedite upute u nastavku za svaku od sljedećih opcija:

Okvir za unos teksta Dio filtera potvrdnog okvira sa strane

Filtar za unos teksta

Dodajte okvir za unos koji filtrira rezultate dok korisnik unosi tekst. Okvir za filtriranje odgovara tekstu korisnika unutar naslova, opisa i ključnih riječi svakog rezultata.

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

Filtri potvrdnih okvira

Unutar svog elementa <devsite-catalog> dodajte element <select> za svaku dimenziju koju je moguće filtrirati kao što je vrsta dokumenta, proizvod i programski jezik. Atribut name određuje dimenziju filtriranja, koja odgovara strukturiranom prostoru imena ključne riječi ili nazivu polja DevSite kao što su keywords . Odredite oznaku dimenzije za svoje čitatelje pomoću atributa oznake. Obavezno navedite višestruki atribut za svaki element <select> kako biste bili sigurni da je generirano korisničko sučelje filtra ispravno.

Dodajte element <option> za svaku vrijednost filtra u navedenoj dimenziji na roditeljskom elementu <select> . Navedite svoju vrijednost koja se može filtrirati u atributu vrijednosti na svakoj <option> . Dodajte čitljive oznake filtera između svojih oznaka <option> ; oni će biti prevedeni ako je vaša stranica lokalizirana.

Sljedeći kod dodaje odjeljak filtara vrste dokumenta i filtara ključnih riječi u korisničkom sučelju za filtriranje na stranu rezultata:

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

Početni filtri potvrdnog okvira

Atribut initial-checkbox-filters određuje broj filtara potvrdnih okvira koji će se prikazati pri početnom učitavanju. Zadano je 3 .

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

Odaberite svoje opcije iscrtavanja

<devsite-catalog> podržava sve opcije iscrtavanja i prilagođene atribute elemenata za widget dinamičkog sadržaja.

Upotrijebite atribut fields kako biste odredili koje podatke želite prikazati na kartici svog kataloga. Uz fields dokumentirana za <devsite-dynamic-content> , možete navesti bilo koji od dokumentiranih strukturiranih prostora imena ključnih riječi za prikaz oznaka primijenjenih na svaki dokument u tom prostoru imena. Na primjer, navođenje product rezultirat će prikazom svih oznaka proizvoda primijenjenih na svaku stranicu na kartici za tu stranicu. Također možete odrediti tags da biste vidjeli sve oznake nomenklature primijenjene na dokument.

Sljedeći kod konfigurira gornji primjer za pružanje najviše 1000 rezultata razvrstanih po nedavnosti s korisničkim sučeljem numeričke paginacije koje počinje s 9 rezultata i 9 dodatnih rezultata po stranici. Konfigurira rezultate koji se prikazuju kao kartice s naslovom, sažetkom i gumbom s oznakom "Saznajte više", kao i oznakama za 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>

Ako vaš tim ima UXE podršku, možete izraditi prilagođeni predložak za svoje kataloške kartice dodavanjem novog Soy predloška u prilagođeni element i navođenje vašeg novog predloška pomoću atributa predloška u vašem katalogu.

Označite svoj sadržaj

Sadržaj je moguće filtrirati samo ako je označen prema vašim filtrima. Moguće je dodati filtere pomoću sljedećih dimenzija:

eksplicitno označene strukturirane ključne riječi (nestrukturirane) ključne riječi page_type strukturirane ključne riječi izvedene iz grafikona nomenklature Većina potvrdnih okvira i filtara stila odabira filtrirat će sadržaj prema strukturiranim ključnim riječima, pri čemu dimenzija filtra mora odgovarati prostoru imena strukturirane ključne riječi, a vrijednost filtra mora odgovarati ostatku strukturirana ključna riječ. Pogledajte dokumentaciju Nomenklature za više informacija o strukturiranim ključnim riječima i podržanim imenskim prostorima.

Da biste sakrili stranicu iz svih kataloga, postavite oznaku metapodataka hide_from_catalogs na true na toj stranici.

Podesite izgled

Da biste promijenili zadani raspored stupaca (koji su ili dva stupca za template="activity" ili tri stupca inače), dodajte atribut items-across s vrijednošću 1 , 2 , 3 ili 4 . 

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

Kako se okvir za prikaz sužava, raspored stavki se prilagođava kako bi sadržaj stavki ostao dostupan. Za items-across vrijednosti 3 ili 4 , izgled se prebacuje u dva stupca na tabletima, a svi izgledi prebacuju se u jedan stupac na mobilnim uređajima.

Primjeri

Slijede primjeri koji pokazuju izgled i funkcionalnost osnovnih značajki prilagođenog elementa <devsite-catalog> .

Cloud Architecture Center

Slijedi primjer kataloga koji se koristi za Cloud Architecture Center. Osim title i summary , specificira product i api u atributu fields za dodavanje oznaka za ove prostore imena na kartice.

Demo

Pogledaj u punoj veličini 

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

Codelabs katalog

Slijedi primjer kataloga kodnih laboratorija koji koriste ravne ključne riječi, nenumerirane paginacije i bez unosa tekstualnog filtra.

Demo

Pogledaj u punoj veličini

Unaprijed primijenjeni filtri

Widget Kataloga prati stanje filtara koje je korisnik primijenio u URL-u stranice, dopuštajući označavanje ili dijeljenje određenih konfiguracija filtara. Svaka dimenzija filtra predstavljena je URL parametrom. Parametri URL-a strukturirani su na sljedeći način:

Za kontrole filtra koje imaju jednu vrijednost poput filtara stila odabira, vrijednost parametra URL-a normalizirana je vrijednost filtra. Za kontrole filtera koje podržavaju višestruke vrijednosti kao što su potvrdni okviri, vrijednost parametra URL-a je popis normaliziranih vrijednosti filtera odvojenih zarezima. Widget Kataloga ne utječe na sve druge parametre URL-a (bez filtera). Na primjer, ako je korisnik unio "Big Data" u tekstualni filtar i odabrao Python i JavaScript iz potvrdnih okvira Jezik, URL stranice odražava te filtre s nizom upita "text=Big%20Data&language=python,javascript".

Kada se stranica koja sadrži widget kataloga učita s parametrima filtra u URL-u, widget kataloga unaprijed popunjava odgovarajuće kontrole filtera i filtrira rezultate na odgovarajući način.

Na primjer, ovo je URL za demo Cloud Architecture Center :

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

Evo nekoliko primjera nizova upita koje možete dodati tom URL-u:

?doctype=bestpractices označava potvrdni okvir Najbolje prakse u odjeljku Odaberi vrstu sadržaja , koji odgovara dimenziji filtera doctype . ?doctype=bestpractices,blueprint provjerava potvrdne okvire Best Practices i Blueprint u istom odjeljku. ?text=Cloud%20SQL popunjava unos tekstualnog filtra s "Cloud SQL".

Dimenzije parametara filtra također se mogu kombinirati. Sljedeći URL sadrži i doctype i tekstualne parametre:

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

Ovaj URL odabire odgovarajuće potvrdne okvire i popunjava unos teksta, kao što je prikazano u sljedećoj demonstraciji.

Pogledaj u punoj veličini