Widgety: Katalóg

Vlastný prvok <devsite-catalog> poskytuje filtrovateľný dynamický obsah, ktorý zahŕňa používateľské rozhranie filtrovania pre celú platformu. Dopytuje obsah vlastnený DevSite, aby načítal zdroje súvisiace s konkrétnou témou na stránke DevSite. Tento vlastný prvok môže načítať zdroje od ktoréhokoľvek nájomníka DevSite, ako aj externé zdroje , ktoré boli pridané do korpusu externého obsahu DevSite.

Použitie

Ak chcete začať používať vlastný prvok <devsite-catalog> , postupujte takto:

  1. Pridajte na svoju stránku vlastný prvok.
  2. Izolujte svoju množinu údajov pomocou dopytu dynamického obsahu.
  3. Pridajte filtre.
  4. Vyberte možnosti vykresľovania.
  5. Označte svoj obsah.
  6. Upravte rozloženie.

Pridajte vlastný prvok

Pridajte vlastný prvok <devsite-catalog> na svoju stránku na požadované miesto.

HTML

Pre stránky HTML možno vlastný prvok pridať rovnako ako ktorýkoľvek iný prvok HTML:

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

YAML

Pre riadok vstupnej stránky s ďalším obsahom súvisiacim s vlastným prvkom použite riadok s jednou položkou s možnosťou description-100 z možností riadka vstupnej stránky .

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>

Môžete tiež použiť pole custom_html , ak nepotrebujete žiadne ďalšie polia na úrovni položky, ako je heading alebo description :

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

Markdown

V prípade súborov Markdown musí byť vlastný prvok zabalený do prvku <div> alebo <section> :

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

Izolujte svoju množinu údajov

Určite dotaz na dynamický obsah , ktorý izoluje celú množinu údajov, ktorú chcete mať k dispozícii pre váš katalóg, a pridajte ho do atribútu dotazu vo vašom novom katalógu.

Ak chcete napríklad na svoju stránku pridať katalóg všetkých produktov uvedených na developers.google.com, pridajte na svoju stránku nasledujúci katalóg.

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

Pridajte filtre

Ak chcete do katalógu pridať filtre, postupujte podľa pokynov nižšie pre každú z nasledujúcich možností:

Pole na zadávanie textu Časť filtrov začiarkavacích políčok na boku

Filter vstupu textu

Pridajte vstupné pole, ktoré filtruje výsledky, keď používateľ zadáva text. Pole filtrovania sa zhoduje s textom používateľa v rámci názvu, popisu a kľúčových slov každého výsledku.

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

Filtre začiarkavacieho políčka

V rámci prvku <devsite-catalog> pridajte prvok <select> pre každú filtrovateľnú dimenziu, ako je typ dokumentu, produkt a programovací jazyk. Atribút name určuje dimenziu filtrovania, ktorá zodpovedá štruktúrovanému priestoru názvov kľúčových slov alebo názvu poľa DevSite, ako sú keywords . Zadajte štítok rozmeru pre vaše čítačky pomocou atribútu štítok. Nezabudnite zadať aj atribút multiple pre každý prvok <select> , aby ste sa uistili, že vygenerované používateľské rozhranie filtra je správne.

Pridajte prvok <option> pre každú hodnotu filtra v zadanej dimenzii nadradeného prvku <select> . Zadajte svoju filtrovateľnú hodnotu v atribúte value na každej <option> . Pridajte čitateľné štítky filtrov medzi značky <option> ; tieto budú preložené, ak je vaša stránka lokalizovaná.

Nasledujúci kód pridá časť filtrov typu dokumentu a filtrov kľúčových slov v používateľskom rozhraní filtrovania na stranu výsledkov:

<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čiatočné filtre začiarkavacích políčok

Atribút initial-checkbox-filters určuje počet filtrov začiarkavacích políčok, ktoré sa zobrazia pri počiatočnom načítaní. Predvolená hodnota je 3 .

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

Vyberte možnosti vykresľovania

<devsite-catalog> podporuje všetky možnosti vykresľovania a atribúty vlastných prvkov pre widget Dynamický obsah.

Pomocou atribútu fields zadajte, aké údaje chcete zobraziť na karte katalógu. Okrem fields zdokumentovaných pre <devsite-dynamic-content> môžete zadať ktorýkoľvek zo zdokumentovaných štruktúrovaných priestorov názvov kľúčových slov na vykreslenie značiek použitých na každý dokument v tomto priestore názvov. Napríklad zadanie product povedie k tomu, že všetky značky produktu použité na každej stránke sa vykreslia na karte pre túto stránku. Môžete tiež zadať tags , aby ste videli všetky značky nomenklatúry použité v dokumente.

Nasledujúci kód konfiguruje vyššie uvedený príklad tak, aby poskytoval maximálne 1 000 výsledkov zoradených podľa aktuálnosti s číselným používateľským rozhraním stránkovania začínajúcim 9 výsledkami a 9 ďalšími výsledkami na stránku. Konfiguruje výsledky tak, aby sa vykreslili ako karty s názvom, súhrnom a tlačidlom s označením „Viac informácií“, ako aj značkami product a 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>

Ak má váš tím podporu UXE, môžete si vytvoriť vlastnú šablónu pre svoje katalógové karty pridaním novej šablóny Soy do vlastný prvok a špecifikovanie vašej novej šablóny pomocou atribútu šablóny vo vašom katalógu.

Označte svoj obsah

Obsah je možné filtrovať iba vtedy, ak je označený podľa vašich filtrov. Je možné pridať filtre pomocou nasledujúcich rozmerov:

explicitne označené štruktúrované kľúčové slová (neštruktúrované) kľúčové slová štruktúrované kľúčové slová page_type odvodené z grafu nomenklatúry Väčšina filtrov začiarkavacích políčok a filtrov s výberovým štýlom bude filtrovať obsah podľa štruktúrovaných kľúčových slov, pričom dimenzia filtra sa musí zhodovať s priestorom názvov štruktúrovaného kľúčového slova a hodnota filtra sa musí zhodovať so zvyškom štruktúrované kľúčové slovo. Viac informácií o štruktúrovaných kľúčových slovách a podporovaných menných priestoroch nájdete v dokumentácii k nomenklatúre.

Ak chcete skryť stránku zo všetkých katalógov, nastavte značku metadát hide_from_catalogs na tejto stránke na hodnotu true.

Upravte rozloženie

Ak chcete zmeniť predvolené rozloženie stĺpcov (čo sú buď dva stĺpce pre template="activity" alebo inak tri stĺpce), pridajte atribút items-across s hodnotou 1 , 2 , 3 alebo 4 . 

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

Keď sa výrez zužuje, rozloženie položiek sa prispôsobuje tak, aby obsah položiek zostal prístupný. Pre items-across s hodnotami 3 alebo 4 sa rozloženie prepne na dva stĺpce na tabletoch a všetky rozloženia sa prepnú na jeden stĺpec na mobilných zariadeniach.

Príklady

Nasledujú príklady, ktoré demonštrujú vzhľad a funkčnosť základných funkcií vlastného prvku <devsite-catalog> .

Centrum cloudovej architektúry

Nasleduje príklad katalógu používaného pre Cloud Architecture Center. Okrem title a summary špecifikuje product a api v atribúte fields , aby sa na karty pridali značky pre tieto priestory názvov.

Demo

Zobraziť v plnej veľkosti 

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

Katalóg kódových laboratórií

Nasleduje príklad katalógu kódových laboratórií pomocou plochých kľúčových slov, nečíslovaného stránkovania a bez vstupu textového filtra.

Demo

Zobraziť v plnej veľkosti

Vopred aplikované filtre

Miniaplikácia Katalóg sleduje stav filtrov aplikovaných používateľom v adrese URL stránky, čo umožňuje pridanie alebo zdieľanie konkrétnych konfigurácií filtrov. Každá dimenzia filtra je reprezentovaná parametrom adresy URL. Parametre adresy URL sú štruktúrované takto:

V prípade ovládacích prvkov filtra, ktoré majú jednu hodnotu, ako sú filtre so štýlom výberu, je hodnotou parametra adresy URL normalizovaná hodnota filtra. V prípade ovládacích prvkov filtra, ktoré podporujú viacero hodnôt, ako sú začiarkavacie políčka, je hodnota parametra adresy URL zoznam normalizovaných hodnôt filtra oddelený čiarkami. Všetky ostatné (nefiltrované) parametre URL nie sú ovplyvnené widgetom Katalóg. Ak napríklad používateľ zadal do textového filtra „Veľké údaje“ a v začiarkavacích políčkach Jazyk vybral Python a JavaScript , adresa URL stránky odráža tieto filtre s reťazcom dopytu „text=Big%20Data&language=python,javascript“.

Keď sa stránka obsahujúca widget Katalóg načíta s parametrami filtra v adrese URL, widget Katalóg vopred vyplní zodpovedajúce ovládacie prvky filtra a vhodne filtruje výsledky.

Nasleduje napríklad adresa URL ukážky Centra cloudovej architektúry :

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

Tu je niekoľko príkladov reťazcov dopytov, ktoré môžete pripojiť k danej adrese URL:

?doctype=bestpractices začiarkne políčko Best Practices v časti Vyberte typ obsahu , ktoré zodpovedá dimenzii filtra doctype . ?doctype=bestpractices,blueprint zaškrtáva políčka Best Practices aj Blueprint v tej istej sekcii. ?text=Cloud%20SQL vyplní vstup textového filtra "Cloud SQL".

Rozmery parametrov filtra je možné aj kombinovať. Nasledujúca adresa URL obsahuje parametre doctype aj text:

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

Táto adresa URL vyberie príslušné začiarkavacie políčka a vyplní textový vstup, ako je znázornené v nasledujúcej ukážke.

Zobraziť v plnej veľkosti