Pripomočki: Katalog

Element po meri <devsite-catalog> zagotavlja dinamično vsebino, ki jo je mogoče filtrirati in vključuje uporabniški vmesnik za filtriranje na ravni platforme. Poizveduje po vsebini v lasti DevSite za nalaganje virov, povezanih z določeno temo na strani DevSite. Ta element po meri lahko naloži vire iz katerega koli najemnika DevSite kot tudi zunanje vire , ki so bili dodani v korpus zunanje vsebine DevSite.

Uporaba

Če želite začeti uporabljati element po meri <devsite-catalog> , naredite naslednje:

  1. Dodajte element po meri na svojo stran.
  2. Izolirajte svoj nabor podatkov s poizvedbo dinamične vsebine.
  3. Dodajte filtre.
  4. Izberite svoje možnosti upodabljanja.
  5. Označite svojo vsebino.
  6. Prilagodite postavitev.

Dodajte element po meri

Dodajte element po meri <devsite-catalog> na svojo stran na želeno mesto.

HTML

Za strani HTML lahko element po meri dodate tako kot kateri koli drug element HTML:

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

YAML

Za vrstico ciljne strani z dodatno vsebino, povezano z elementom po meri, uporabite vrstico z enim elementom z možnostjo description-100 v možnostih vrstice ciljne strani.

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>

Uporabite lahko tudi polje custom_html , če ne potrebujete drugih polj na ravni elementa, kot sta heading ali description :

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

Markdown

Za datoteke Markdown mora biti element po meri zavit v element <div> ali <section> :

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

Izolirajte svoj nabor podatkov

Določite poizvedbo dinamične vsebine , ki izolira celoten nabor podatkov, za katerega želite, da je na voljo vašemu katalogu, in ga dodajte atributu poizvedbe v svojem novem katalogu.

Če želite na svojo stran na primer dodati katalog vseh izdelkov, navedenih na developers.google.com, na svojo stran dodajte naslednji katalog.

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

Dodajte filtre

Če želite v svoj katalog dodati filtre, sledite spodnjim navodilom za vsako od naslednjih možnosti:

Polje za vnos besedila Del filtrov potrditvenih polj ob strani

Filter za vnos besedila

Dodajte polje za vnos, ki filtrira rezultate, ko uporabnik vnese besedilo. Polje za filtriranje se ujema z besedilom uporabnika v naslovu, opisu in ključnih besedah ​​vsakega rezultata.

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

Filtri potrditvenih polj

Znotraj elementa <devsite-catalog> dodajte element <select> za vsako dimenzijo, ki jo je mogoče filtrirati, kot je vrsta dokumenta, izdelek in programski jezik. Atribut name določa dimenzijo filtriranja, ki ustreza strukturiranemu imenskemu prostoru ključnih besed ali imenu polja DevSite, kot so keywords . Z atributom label določite oznako razsežnosti za svoje bralce. Ne pozabite določiti več atributov za vsak element <select> , da zagotovite pravilen uporabniški vmesnik generiranega filtra.

Dodajte element <option> za vsako vrednost filtra v določeni dimenziji nadrejenega elementa <select> . Določite vrednost, ki jo je mogoče filtrirati, v atributu vrednosti na vsaki <option> . Dodajte berljive oznake filtrov med oznake <option> ; ti bodo prevedeni, če je vaša stran lokalizirana.

Naslednja koda doda razdelek filtrov vrste dokumentov in filtrov ključnih besed v uporabniškem vmesniku za filtriranje ob strani rezultatov:

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

Začetni filtri potrditvenih polj

Atribut initial-checkbox-filters določa število filtrov potrditvenih polj, ki se prikažejo ob začetnem nalaganju. Privzeto je 3 .

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

Izberite svoje možnosti upodabljanja

<devsite-catalog> podpira vse možnosti upodabljanja in atribute elementov po meri za gradnik dinamične vsebine.

Z atributom fields določite, katere podatke želite prikazati na kartici vašega kataloga. Poleg fields , dokumentiranih za <devsite-dynamic-content> , lahko podate katerega koli od dokumentiranih strukturiranih imenskih prostorov ključnih besed za upodobitev oznak, uporabljenih za vsak dokument v tem imenskem prostoru. Če na primer navedete product , bodo vse oznake izdelkov, uporabljene za vsako stran, upodobljene na kartici za to stran. Določite lahko tudi tags , če si želite ogledati vse oznake nomenklature , uporabljene v dokumentu.

Naslednja koda konfigurira zgornji primer za zagotavljanje največ 1000 rezultatov, razvrščenih po nedavnosti z uporabniškim vmesnikom s številčnimi stranmi, ki se začne z 9 rezultati in 9 dodatnimi rezultati na stran. Konfigurira rezultate tako, da so upodobljeni kot kartice z naslovom, povzetkom in gumbom z oznako »Več o tem« ter oznakami za product in 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>

Če ima vaša ekipa podporo za UXE, lahko ustvarite predlogo po meri za svoje kataloške kartice, tako da dodate novo predlogo Soy v element po meri in določitev vaše nove predloge z uporabo atributa predloge v vašem katalogu.

Označite svojo vsebino

Vsebino je mogoče filtrirati le, če je označena v skladu z vašimi filtri. Možno je dodati filtre z uporabo naslednjih dimenzij:

izrecno označene strukturirane ključne besede (nestrukturirane) ključne besede page_type strukturirane ključne besede, izpeljane iz grafa nomenklature Večina potrditvenih polj in filtrov v slogu izbire filtrira vsebino glede na strukturirane ključne besede, kjer se mora dimenzija filtra ujemati z imenskim prostorom strukturirane ključne besede, vrednost filtra pa se mora ujemati s preostankom strukturirano ključno besedo. Za več informacij o strukturiranih ključnih besedah ​​in podprtih imenskih prostorih si oglejte dokumentacijo o nomenklaturi.

Če želite stran skriti pred vsemi katalogi, nastavite metapodatkovno oznako hide_from_catalogs na true na tej strani.

Prilagodite postavitev

Če želite spremeniti privzeto postavitev stolpcev (ki sta dva stolpca za elemente template="activity" ali trije stolpci sicer), dodajte atribut item-across z vrednostjo 1 , 2 , 3 ali 4 . 

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

Ko se vidno polje oži, se postavitev elementov prilagodi, da zagotovi, da vsebina elementov ostane dostopna. Za vrednosti items-across 3 ali 4 se postavitev preklopi v dva stolpca v tabličnih računalnikih, vse postavitve pa v enem samem stolpcu v mobilnih napravah.

Primeri

Sledijo primeri za prikaz videza in funkcionalnosti osnovnih funkcij elementa po meri <devsite-catalog> .

Cloud Architecture Center

Sledi primer kataloga, uporabljenega za Cloud Architecture Center. Poleg title in summary podaja product in api v atributu fields za dodajanje oznak za te imenske prostore na kartice.

Demo

Prikaži polno velikost 

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

Katalog Codelabs

Sledi primer kataloga kodnih laboratorijev, ki uporabljajo ravne ključne besede, neoštevilčeno paginacijo in brez vnosa besedilnega filtra.

Demo

Prikaži polno velikost

Vnaprej uporabljeni filtri

Pripomoček Katalog sledi stanju filtrov, ki jih uporabi uporabnik v URL-ju strani, kar omogoča dodajanje določenih konfiguracij filtrov med zaznamke ali skupno rabo. Vsaka dimenzija filtra je predstavljena s parametrom URL. Parametri URL-ja so strukturirani na naslednji način:

Za kontrolnike filtrov, ki imajo eno samo vrednost, kot so filtri v slogu izbire, je vrednost parametra URL normalizirana vrednost filtra. Za kontrolnike filtrov, ki podpirajo več vrednosti, kot so potrditvena polja, je vrednost parametra URL z vejicami ločen seznam normaliziranih vrednosti filtra. Gradnik Katalog ne vpliva na vse druge (brez filtra) parametre URL-ja. Če je uporabnik na primer v besedilni filter vnesel »Big Data« in v potrditvenih poljih Jezik izbral Python in JavaScript , URL strani odraža te filtre s poizvedbenim nizom »text=Big%20Data&language=python,javascript«.

Ko je stran, ki vsebuje gradnik Katalog, naložena s parametri filtra v URL-ju, gradnik Katalog vnaprej zapolni ustrezne kontrolnike filtrov in ustrezno filtrira rezultate.

To je na primer URL za predstavitev Cloud Architecture Center :

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

Tukaj je nekaj primerov poizvedbenih nizov, ki bi jih lahko dodali temu URL-ju:

?doctype=bestpractices potrdi potrditveno polje Najboljše prakse v razdelku Izberite vrsto vsebine , ki ustreza dimenziji filtra doctype . ?doctype=bestpractices,blueprint potrdi potrditveni polji Best Practices in Blueprint v istem razdelku. ?text=Cloud%20SQL zapolni vnos besedilnega filtra z "Cloud SQL".

Dimenzije parametrov filtra se lahko tudi kombinirajo. Naslednji URL vsebuje parametre doctype in text:

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

Ta URL izbere ustrezna potrditvena polja in zapolni vnos besedila, kot je prikazano v naslednji predstavitvi.

Prikaži polno velikost