Deze pagina is vertaald door de Cloud Translation API.

Widgets: Catalogus

Het aangepaste element <devsite-catalog> biedt filterbare dynamische inhoud met een platformbrede filter-UI. Het vraagt naar inhoud die eigendom is van DevSite om bronnen met betrekking tot een bepaald onderwerp op een DevSite-pagina te laden. Dit aangepaste element kan bronnen laden van elke DevSite-tenant, evenals externe bronnen die zijn toegevoegd aan het DevSite External Content-corpus.

Gebruik

Ga als volgt te werk om aan de slag te gaan met het aangepaste element <devsite-catalog> :

Voeg het aangepaste element toe

Voeg het aangepaste element <devsite-catalog> toe aan uw pagina op de gewenste locatie.

HTML

Voor HTML-pagina's kan het aangepaste element net als elk ander HTML-element worden toegevoegd:

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

YAML

Voor een rij op de landingspagina met aanvullende inhoud gerelateerd aan het aangepaste element, gebruikt u een rij met één item met de optie description-100 uit de rijopties op de landingspagina.

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>

U kunt ook een custom_html- veld gebruiken als u geen andere velden op itemniveau nodig heeft, zoals heading of description :

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

Afwaardering

Voor Markdown-bestanden moet het aangepaste element worden verpakt in een <div> - of <section> -element:

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

Isoleer uw dataset

Bepaal een dynamische inhoudsquery die de volledige gegevensset isoleert die u beschikbaar wilt hebben voor uw catalogus en voeg deze toe aan het querykenmerk in uw nieuwe catalogus.

Als u bijvoorbeeld een catalogus met alle producten op ontwikkelaars.google.com aan uw pagina wilt toevoegen, voegt u de volgende catalogus aan uw pagina toe.

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

Voeg filters toe

Om filters aan uw catalogus toe te voegen, volgt u de onderstaande instructies voor elk van de volgende opties:

Een tekstinvoervak . Een gedeelte met selectievakjesfilters aan de zijkant

Tekstinvoerfilter

Voeg een invoervak toe dat de resultaten filtert terwijl de gebruiker tekst invoert. Het filtervak komt overeen met de tekst van de gebruiker binnen de titel, beschrijving en trefwoorden van elk resultaat.

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

Selectievakjesfilters

Voeg binnen uw <devsite-catalog> -element een <select> -element toe voor elke filterbare dimensie, zoals documenttype, product en programmeertaal. Het kenmerk name bepaalt de filterdimensie, die overeenkomt met een gestructureerde trefwoordnaamruimte of een DevSite-veldnaam, zoals keywords . Geef een dimensielabel op voor uw lezers met behulp van het labelkenmerk. Zorg ervoor dat u ook het meerdere attribuut voor elk <select> -element opgeeft om er zeker van te zijn dat de gegenereerde filter-UI correct is.

Voeg een <option> -element toe voor elke filterwaarde in de opgegeven dimensie van het bovenliggende <select> -element. Geef uw filterbare waarde op in het waardekenmerk op elke <option> . Voeg leesbare filterlabels toe tussen uw <option> -tags; deze worden vertaald als uw pagina is gelokaliseerd.

De volgende code voegt een sectie met documenttypefilters en trefwoordfilters in een filterinterface toe aan de zijkant van de resultaten:

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

Eerste selectievakjesfilters

Het initial-checkbox-filters attribuut bepaalt het aantal checkbox-filters dat moet worden weergegeven bij de eerste keer laden. De standaardwaarde is 3 .

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

Selecteer uw weergaveopties

<devsite-catalog> ondersteunt alle weergaveopties en aangepaste elementattributen voor de dynamische inhoudwidget.

Gebruik het fields attribuut om op te geven welke gegevens u op de kaart van uw catalogus wilt weergeven. Naast de fields die zijn gedocumenteerd voor <devsite-dynamic-content> , kunt u elk van de gedocumenteerde gestructureerde trefwoordnaamruimten opgeven om de tags weer te geven die op elk document in die naamruimte zijn toegepast. Als u bijvoorbeeld product specificeert, worden alle producttags die op elke pagina zijn toegepast, weergegeven op de kaart voor die pagina. U kunt ook tags opgeven om alle nomenclatuurtags te zien die op het document zijn toegepast.

De volgende code configureert het bovenstaande voorbeeld om maximaal 1000 resultaten te leveren, gesorteerd op recentheid, met een gebruikersinterface voor numerieke paginering, beginnend met 9 resultaten en 9 extra resultaten per pagina. Het configureert de resultaten die moeten worden weergegeven als kaarten met een titel, samenvatting en knop met het label "Meer informatie", evenals tags voor product en 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>

Als uw team UXE-ondersteuning heeft, kunt u een aangepaste sjabloon voor uw cataloguskaarten maken door een nieuwe Soja-sjabloon toe te voegen aan de aangepast element en specificeer uw nieuwe sjabloon met behulp van het sjabloonkenmerk in uw catalogus.

Tag uw inhoud

Inhoud kan alleen worden gefilterd als deze is getagd volgens uw filters. Het is mogelijk om filters toe te voegen met de volgende afmetingen:

expliciet getagde gestructureerde trefwoorden (ongestructureerde) trefwoorden page_type gestructureerde trefwoorden afgeleid uit de nomenclatuurgrafiek De meeste checkbox- en select-style-filters filteren inhoud op basis van gestructureerde trefwoorden, waarbij de filterdimensie moet overeenkomen met een gestructureerde trefwoordnaamruimte en de filterwaarde moet overeenkomen met de rest van het gestructureerde trefwoord. Zie de nomenclatuurdocumentatie voor meer informatie over gestructureerde trefwoorden en ondersteunde naamruimten.

Als u een pagina uit alle catalogi wilt verbergen, stelt u de metadatatag hide_from_catalogs op die pagina in op true.

Indeling aanpassen

Als u de standaardkolomindeling wilt wijzigen (die bestaat uit twee kolommen voor template="activity" -items of anders uit drie kolommen), voegt u een item-across-attribuut toe met de waarde 1 , 2 , 3 of 4 .

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

Naarmate de viewport smaller wordt, wordt de lay-out van de items aangepast om ervoor te zorgen dat de inhoud van de items toegankelijk blijft. Voor items-across waarden van 3 of 4 schakelt de lay-out over naar twee kolommen op tablets en schakelen alle lay-outs over naar één kolom op mobiele apparaten.

Voorbeelden

Hieronder volgen voorbeelden om het uiterlijk en de functionaliteit van de basisfuncties van het aangepaste element <devsite-catalog> te demonstreren.

Centrum voor cloudarchitectuur

Het volgende is een voorbeeld van de catalogus die wordt gebruikt voor het Cloud Architecture Center. Naast title en summary specificeert het product en api in het fields om tags voor deze naamruimten aan de kaarten toe te voegen.

Demo

Bekijk volledige grootte

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

Codelabs-catalogus

Het volgende is een voorbeeld van de catalogus met codelabs die platte trefwoorden, niet-genummerde paginering en geen tekstfilterinvoer gebruiken.

Demo

Bekijk volledige grootte

Vooraf toegepaste filters

De Cataloguswidget houdt de status bij van door de gebruiker toegepaste filters in de pagina-URL, waardoor specifieke filterconfiguraties kunnen worden gemarkeerd of gedeeld. Elke filterdimensie wordt vertegenwoordigd door een URL-parameter. De URL-parameters zijn als volgt opgebouwd:

Voor filterbesturingselementen die één enkele waarde hebben, zoals filters met selectiestijl, is de waarde van de URL-parameter de genormaliseerde filterwaarde. Voor filterbesturingselementen die meerdere waarden ondersteunen, zoals selectievakjes, is de URL-parameterwaarde een door komma's gescheiden lijst met de genormaliseerde filterwaarden. Alle andere (niet-filter) URL-parameters worden niet beïnvloed door de Cataloguswidget. Als een gebruiker bijvoorbeeld 'Big Data' in het tekstfilter heeft ingevoerd en Python en JavaScript heeft geselecteerd in de selectievakjes Taal, geeft de pagina-URL deze filters weer met de querytekenreeks 'text=Big%20Data&taal=python,javascript'.

Wanneer een pagina met de Catalogus-widget wordt geladen met filterparameters in de URL, vult de Catalogus-widget vooraf de bijbehorende filterbesturingselementen in en filtert de resultaten op de juiste manier.

Dit is bijvoorbeeld de URL voor de Cloud Architecture Center-demo :

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

Hier volgen enkele voorbeelden van queryreeksen die u aan die URL kunt toevoegen:

?doctype=bestpractices schakelt het selectievakje Best Practices in de sectie Kies een inhoudstype in , dat overeenkomt met de doctype filterdimensie. ?doctype=bestpractices,blueprint vinkt de selectievakjes Best Practices en Blueprint in dezelfde sectie aan. ?text=Cloud%20SQL vult de tekstfilterinvoer in met "Cloud SQL".

De afmetingen van de filterparameters kunnen ook worden gecombineerd. De volgende URL bevat zowel de doctype- als de tekstparameters:

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

Deze URL selecteert de juiste selectievakjes en vult de tekstinvoer in, zoals weergegeven in de volgende demo.

Bekijk volledige grootte