Valdikliai: Katalogas

Pasirinktinis elementas <devsite-catalog> suteikia filtruojamą dinaminį turinį, apimantį visos platformos filtravimo vartotojo sąsają. Ji užklausia „DevSite“ priklausančio turinio, kad įkeltų išteklius, susijusius su tam tikra tema „DevSite“ puslapyje. Šis tinkintas elementas gali įkelti išteklius iš bet kurio „DevSite“ nuomininko ir išorinių išteklių , kurie buvo įtraukti į „DevSite“ išorinio turinio korpusą.

Naudojimas

Norėdami pradėti naudoti pasirinktinį elementą <devsite-catalog> , atlikite šiuos veiksmus:

  1. Pridėkite tinkintą elementą prie savo puslapio.
  2. Išskirkite duomenų rinkinį naudodami dinaminio turinio užklausą.
  3. Pridėti filtrus.
  4. Pasirinkite atvaizdavimo parinktis.
  5. Pažymėkite savo turinį.
  6. Koreguokite išdėstymą.

Pridėkite pasirinktinį elementą

Pridėkite pasirinktinį elementą <devsite-catalog> į savo puslapį norimoje vietoje.

HTML

HTML puslapiuose tinkintą elementą galima pridėti kaip ir bet kurį kitą HTML elementą:

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

YAML

Nukreipimo puslapio eilutėje su papildomu turiniu, susijusiu su tinkintu elementu, naudokite vieno elemento eilutę su 100 aprašymo parinktimi iš nukreipimo puslapio eilutės parinkčių .

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>

Taip pat galite naudoti custom_html lauką, jei jums nereikia jokių kitų elemento lygio laukų, pvz., heading ar description :

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

Pažymėjimas

„Markdown“ failams pasirinktinis elementas turi būti suvyniotas į <div> arba <section> elementą:

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

Išskirkite duomenų rinkinį

Nustatykite dinaminio turinio užklausą , kuri išskiria visą duomenų rinkinį, kurį norite pasiekti jūsų kataloge, ir pridėkite jį prie užklausos atributo naujame kataloge.

Pavyzdžiui, norėdami į savo puslapį įtraukti visų produktų, pateiktų adresu developers.google.com, katalogą, prie puslapio pridėkite šį katalogą.

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

Pridėti filtrus

Norėdami į katalogą įtraukti filtrų, vadovaukitės toliau pateiktomis kiekvienos iš šių parinkčių instrukcijomis:

Teksto įvesties laukelis Žymimųjų laukelių filtrų dalis šone

Teksto įvesties filtras

Pridėkite įvesties laukelį, kuris filtruoja rezultatus, kai vartotojas įveda tekstą. Filtravimo laukelis atitinka vartotojo tekstą kiekvieno rezultato pavadinime, apraše ir raktiniuose žodžiuose.

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

Žymėjimo laukelio filtrai

Elemente <devsite-catalog> pridėkite elementą <select> kiekvienam filtruojamam aspektui, pvz., dokumento tipui, produktui ir programavimo kalbai. name atributas nustato filtravimo aspektą, atitinkantį struktūrinio raktinio žodžio vardų erdvę arba „DevSite“ lauko pavadinimą, pvz., keywords . Nurodykite dimensijos etiketę savo skaitytojams naudodami etiketės atributą. Taip pat būtinai nurodykite kelis atributus kiekvienam <select> elementui, kad sugeneruota filtro vartotojo sąsaja būtų teisinga.

Pridėkite elementą <option> kiekvienai filtro vertei nurodytame pagrindiniame elemente <select> . Nurodykite filtruojamą vertę kiekvienos <option> vertės atribute. Įtraukite skaitomas filtrų etiketes tarp <option> žymų; jie bus išversti, jei jūsų puslapis yra lokalizuotas.

Šis kodas prideda dokumentų tipo filtrų ir raktinių žodžių filtrų skiltį filtravimo vartotojo sąsajoje prie rezultatų šono:

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

Pradiniai žymės langelio filtrai

Atributas initial-checkbox-filters nustato žymimųjų laukelių filtrų skaičių, kurie bus rodomi pradinio įkėlimo metu. Numatytasis yra 3 .

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

Pasirinkite atvaizdavimo parinktis

<devsite-catalog> palaiko visas dinaminio turinio valdiklio atvaizdavimo parinktis ir pasirinktinius elementų atributus .

Naudokite fields atributą, kad nurodytumėte, kokius duomenis norite rodyti katalogo kortelėje. Be <devsite-dynamic-content> dokumentuotų fields , galite nurodyti bet kurią dokumentuotą struktūrizuotą raktinių žodžių vardų sritį , kad būtų pateiktos kiekvienam toje vardų erdvėje esančiam dokumentui pritaikytos žymos. Pavyzdžiui, nurodant product visos produkto žymos, pritaikytos kiekvienam puslapiui, bus pateiktos to puslapio kortelėje. Taip pat galite nurodyti tags kad matytumėte visas dokumentui pritaikytas nomenklatūros žymas.

Šis kodas sukonfigūruoja anksčiau pateiktą pavyzdį, kad būtų pateikta daugiausia 1 000 rezultatų, surūšiuotų pagal naujausią skaičių su skaitine puslapių rūšiavimo sąsaja, prasidedančia 9 rezultatais ir 9 papildomais rezultatais puslapyje. Jis sukonfigūruoja rezultatus, kad jie būtų pateikiami kaip kortelės su pavadinimu, santrauka ir mygtuku, pažymėtu „Sužinokite daugiau“, taip pat product ir api žymomis.

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

Jei jūsų komanda palaiko UXE, galite sukurti pasirinktinį katalogo kortelių šabloną, pridėdami naują Soy šabloną prie pasirinktinį elementą ir nurodydami naują šabloną naudodami šablono atributą kataloge.

Pažymėkite savo turinį

Turinį galima filtruoti, tik jei jis pažymėtas pagal jūsų filtrus. Galima pridėti filtrų naudojant šiuos matmenis:

aiškiai pažymėti struktūriniai raktiniai žodžiai (nestruktūruoti) raktiniai žodžiai page_type struktūriniai raktiniai žodžiai, numanomi iš nomenklatūros schemos Dauguma žymimųjų laukelių ir pasirinkimo stiliaus filtrų filtruos turinį pagal struktūrinius raktinius žodžius, kur filtro aspektas turi atitikti struktūrinio raktinio žodžio vardų erdvę, o filtro reikšmė turi atitikti likusią struktūrinis raktinis žodis. Daugiau informacijos apie struktūrinius raktinius žodžius ir palaikomas vardų sritis rasite nomenklatūros dokumentacijoje.

Jei norite paslėpti puslapį visuose kataloguose, tame puslapyje nustatykite metaduomenų žymą hide_from_catalogs kaip true.

Koreguoti išdėstymą

Norėdami pakeisti numatytąjį stulpelių išdėstymą (kuris yra du stulpeliai template="activity" elementams arba trys stulpeliai kitu atveju), pridėkite elementų atributą, kurio vertė yra 1 , 2 , 3 arba 4 . 

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

Kai peržiūros sritis siaurėja, elementų išdėstymas koreguojamas taip, kad elementų turinys liktų pasiekiamas. Jei items-across reikšmės yra 3 arba 4 , planšetiniuose kompiuteriuose išdėstymas pakeičiamas į du stulpelius, o mobiliuosiuose įrenginiuose – į vieną stulpelį.

Pavyzdžiai

Toliau pateikiami pavyzdžiai, demonstruojantys pagrindinių priskirto elemento <devsite-catalog> funkcijų išvaizdą ir funkcionalumą.

Debesų architektūros centras

Toliau pateikiamas katalogo, naudojamo „Cloud Architecture Center“, pavyzdys. Be title ir summary , fields atribute nurodomas product ir api , kad kortelėse būtų galima pridėti šių vardų sričių žymas.

Demo

Žiūrėti viso dydžio 

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

Codelabs katalogas

Toliau pateikiamas kodų rinkinių, naudojančių vienodus raktinius žodžius, nenumeruojamą puslapių puslapius ir be teksto filtro įvesties, katalogo pavyzdys.

Demo

Žiūrėti viso dydžio

Iš anksto pritaikyti filtrai

Katalogo valdiklis stebi vartotojo taikomų filtrų būseną puslapio URL, leidžiantį pažymėti arba bendrinti konkrečias filtrų konfigūracijas. Kiekvienas filtro aspektas pateikiamas URL parametru. URL parametrų struktūra yra tokia:

Filtrų valdikliams, turintiems vieną reikšmę, pvz., pasirinkimo stiliaus filtrus, URL parametro vertė yra normalizuota filtro reikšmė. Filtrų valdiklių, palaikančių kelias vertes, pvz., žymimuosius laukelius, URL parametro reikšmė yra kableliais atskirtas normalizuotų filtrų verčių sąrašas. Visiems kitiems (nefiltruojantiems) URL parametrams Katalogo valdiklis įtakos neturi. Pavyzdžiui, jei vartotojas į teksto filtrą įvedė „Big Data“ ir žymimuosiuose laukeliuose „Kalba“ pasirinko Python ir JavaScript , puslapio URL atspindi tuos filtrus su užklausos eilute „text=Big%20Data&language=python,javascript“.

Kai į puslapį, kuriame yra katalogo valdiklis, įkeliami filtro parametrai URL, Katalogo valdiklis iš anksto užpildo atitinkamus filtro valdiklius ir atitinkamai filtruoja rezultatus.

Pavyzdžiui, toliau pateikiamas „Cloud Architecture Center“ demonstracinės versijos URL:

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

Štai keletas užklausų eilučių, kurias galite pridėti prie to URL, pavyzdžiai:

?doctype=bestpractices pažymi žymimąjį laukelį Geriausios praktikos skiltyje Pasirinkti turinio tipą , atitinkantį doctype filtro aspektą. ?doctype=bestpractices,blueprint pažymi ir Geriausios praktikos, ir Blueprint žymimuosius laukelius toje pačioje skiltyje. ?text=Cloud%20SQL užpildo teksto filtro įvestį „Cloud SQL“.

Filtro parametrų matmenis taip pat galima derinti. Šiame URL yra ir doctype, ir teksto parametrai:

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

Šis URL pasirenka atitinkamus žymimuosius laukelius ir užpildo teksto įvestį, kaip parodyta toliau pateiktoje demonstracijoje.

Žiūrėti viso dydžio