Widgets: Katalog

Det tilpassede elementet <devsite-catalog> gir filtrerbart dynamisk innhold som inkluderer et plattformomfattende filtreringsgrensesnitt. Den spør etter DevSite-eid innhold for å laste ressurser relatert til et bestemt emne på en DevSite-side. Dette tilpassede elementet kan laste ressurser fra enhver DevSite-leietaker, så vel som eksterne ressurser som er lagt til DevSite External Content-korpuset.

Bruk

For å komme i gang med å bruke det tilpassede elementet <devsite-catalog> , gjør følgende:

  1. Legg til det egendefinerte elementet på siden din.
  2. Isoler datasettet ditt med en dynamisk innhold-spørring.
  3. Legg til filtre.
  4. Velg gjengivelsesalternativene dine.
  5. Merk innholdet ditt.
  6. Juster layout.

Legg til det egendefinerte elementet

Legg til det tilpassede elementet <devsite-catalog> på siden din på ønsket sted.

HTML

For HTML-sider kan det tilpassede elementet legges til akkurat som alle andre HTML-elementer:

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

YAML

For en landingssiderad med tilleggsinnhold relatert til det egendefinerte elementet, bruk en enkeltelementrad med beskrivelse-100-alternativet fra alternativene for landingssiderader .

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>

Du kan også bruke et custom_html- felt hvis du ikke trenger andre varenivåfelt, for eksempel heading eller description :

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

Markdown

For Markdown-filer må det tilpassede elementet pakkes inn i et <div> eller <section> -element:

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

Isoler datasettet ditt

Bestem en dynamisk innhold-spørring som isolerer hele datasettet du vil ha tilgjengelig for katalogen din, og legg det til spørringsattributtet på den nye katalogen.

Hvis du for eksempel vil legge til en katalog over alle produktene som er oppført på developers.google.com på siden din, legger du til følgende katalog på siden din.

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

Legg til filtre

For å legge til filtre i katalogen din, følg instruksjonene nedenfor for hvert av følgende alternativer:

En tekstinntastingsboks En del av avmerkingsboksfiltre på siden

Tekstinndatafilter

Legg til en inndataboks som filtrerer resultatene når brukeren skriver inn tekst. Filtreringsboksen samsvarer med brukerens tekst i tittelen, beskrivelsen og nøkkelordene for hvert resultat.

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

Avmerkingsboksfiltre

Innenfor <devsite-catalog> -elementet ditt legger du til et <select> -element for hver filtrerbare dimensjon som dokumenttype, produkt og programmeringsspråk. name attributtet bestemmer filtreringsdimensjonen, som tilsvarer et strukturert nøkkelordnavneområde eller et DevSite-feltnavn, for eksempel keywords . Angi en dimensjonsetikett for leserne dine ved å bruke etikettattributtet. Pass på å spesifisere multiple-attributtet for hvert <select> -element også for å sikre at det genererte filter-UI er riktig.

Legg til et <option> -element for hver filterverdi i den angitte dimensjonen på det overordnede <select> -elementet. Spesifiser den filtrerbare verdien i verdiattributtet på hvert <option> . Legg til lesbare filteretiketter mellom <option> -taggene dine; disse vil bli oversatt hvis siden din er lokalisert.

Følgende kode legger til en del av dokumenttypefiltre og nøkkelordfiltre i et filtreringsgrensesnitt ved siden av resultatene:

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

Innledende avmerkingsboksfiltre

initial-checkbox-filters attributtet bestemmer antallet avkrysningsboksfiltre som skal vises ved første lasting. Standard er 3 .

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

Velg gjengivelsesalternativene dine

<devsite-catalog> støtter alle gjengivelsesalternativene og egendefinerte elementattributter for Dynamic Content-widgeten.

Bruk fields for å spesifisere hvilke data du vil vise på katalogens kort. I tillegg til fields som er dokumentert for <devsite-dynamic-content> , kan du spesifisere hvilke som helst av de dokumenterte strukturerte nøkkelordnavnerommene for å gjengi kodene som er brukt på hvert dokument i det navnerommet. Hvis du for eksempel spesifiserer product , vil alle produkttaggene som brukes på hver side, gjengis på kortet for den siden. Du kan også spesifisere tags for å se alle nomenklaturmerker som er brukt på dokumentet.

Følgende kode konfigurerer eksempelet ovenfor til å gi maksimalt 1000 resultater sortert etter nylig med et numerisk pagineringsgrensesnitt som begynner med 9 resultater og 9 ekstra resultater per side. Den konfigurerer resultater til å gjengis som kort med en tittel, sammendrag og knapp merket "Les mer" samt koder for product og 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>

Hvis teamet ditt har UXE-støtte, kan du lage en egendefinert mal for katalogkortene dine ved å legge til en ny soyamal i tilpasset element og spesifisere den nye malen ved hjelp av malattributtet i katalogen.

Merk innholdet ditt

Innhold kan bare filtreres hvis det er merket i henhold til filtrene dine. Det er mulig å legge til filtre ved å bruke følgende dimensjoner:

eksplisitt taggede strukturerte søkeord (ustrukturerte) søkeord page_type strukturerte søkeord utledet fra nomenklaturdiagrammet De fleste avmerkingsbokser og utvalgte filtre vil filtrere innhold i henhold til strukturerte søkeord, der filterdimensjonen må samsvare med et strukturert søkeordnavneområde og filterverdien må samsvare med resten av det strukturerte søkeordet. Se Nomenklaturdokumentasjonen for mer informasjon om strukturerte nøkkelord og støttede navnerom.

For å skjule en side fra alle kataloger, sett hide_from_catalogs-metadatakoden til true på den siden.

Juster layout

For å endre standard kolonneoppsett (som enten er to kolonner for template="activity" -elementer eller tre kolonner ellers), legg til et elementer-på-tvers-attributt med verdien 1 , 2 , 3 eller 4 . 

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

Etter hvert som visningsporten blir smalere, justeres utformingen av elementene for å sikre at elementenes innhold forblir tilgjengelig. For items-across verdier på 3 eller 4 bytter oppsettet til to kolonner på nettbrett, og alle oppsett bytter til én enkelt kolonne på mobile enheter.

Eksempler

Følgende er eksempler for å demonstrere utseendet og funksjonaliteten til de grunnleggende funksjonene til det tilpassede elementet <devsite-catalog> .

Cloud Architecture Center

Følgende er et eksempel på katalogen som brukes for Cloud Architecture Center. I tillegg til title og summary spesifiserer den product og api i fields for å legge til tagger for disse navneområdene til kortene.

Demo

Se full størrelse 

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

Codelabs katalog

Følgende er et eksempel på katalogen over kodelaber som bruker flate nøkkelord, ikke-nummerert paginering og ingen tekstfilterinndata.

Demo

Se full størrelse

Forhåndspåførte filtre

Katalog-widgeten sporer tilstanden til brukertilpassede filtre i sidens URL, slik at spesifikke filterkonfigurasjoner kan bokmerkes eller deles. Hver filterdimensjon er representert av en URL-parameter. URL-parametrene er strukturert som følger:

For filterkontroller som har én enkelt verdi, for eksempel filtre i utvalgsstil, er URL-parameterverdien den normaliserte filterverdien. For filterkontroller som støtter flere verdier som avmerkingsbokser, er URL-parameterverdien en kommadelt liste over de normaliserte filterverdiene. Alle andre (ikke-filter) URL-parametere påvirkes ikke av Catalog-widgeten. For eksempel, hvis en bruker har skrevet inn "Big Data" i tekstfilteret og valgt Python og JavaScript fra Språk-avmerkingsboksene, gjenspeiler sidens URL disse filtrene med søkestrengen 'text=Big%20Data&language=python,javascript'.

Når en side som inneholder Catalog-widgeten er lastet med filterparametere i URL-en, forhåndsutfyller Catalog-widgeten de tilsvarende filterkontrollene og filtrerer resultatene på riktig måte.

Følgende er for eksempel URL-en til Cloud Architecture Center-demoen :

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

Her er noen eksempler på søkestrenger du kan legge til den nettadressen:

?doctype=bestpractices merker av for Beste praksis i delen Velg en innholdstype , som tilsvarer doctype filterdimensjonen. ?doctype=bestpractices,blueprint merker av for både Best Practices og Blueprint i samme seksjon. ?text=Cloud%20SQL fyller inn tekstfilteret med "Cloud SQL".

Filterparameterdimensjonene kan også kombineres. Følgende URL inneholder både doctype- og tekstparametere:

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

Denne URL-adressen merker av de riktige avmerkingsboksene og fyller ut teksten, som vist i følgende demo.

Se full størrelse