Widgetit: Katalogi

Mukautettu <devsite-catalog> -elementti tarjoaa suodatettavan dynaamisen sisällön, joka sisältää alustanlaajuisen suodatuskäyttöliittymän. Se kysyy DevSiten omistamaa sisältöä ladatakseen resursseja, jotka liittyvät tiettyyn aiheeseen DevSite-sivulla. Tämä mukautettu elementti voi ladata resursseja mistä tahansa DevSite-vuokraajalta sekä ulkoisista resursseista , jotka on lisätty DevSite External Content -korpukseen.

Käyttö

Aloita mukautetun <devsite-catalog> -elementin käyttö seuraavasti:

  1. Lisää mukautettu elementti sivullesi.
  2. Eristä tietojoukkosi dynaamisen sisällön kyselyllä.
  3. Lisää suodattimia.
  4. Valitse renderöintivaihtoehdot.
  5. Merkitse sisältösi.
  6. Säädä asettelua.

Lisää mukautettu elementti

Lisää <devsite-catalog> mukautettu elementti sivullesi haluamaasi paikkaan.

HTML

HTML-sivuille mukautettu elementti voidaan lisätä aivan kuten mikä tahansa muu HTML-elementti:

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

YAML

Jos aloitussivurivillä on mukautettuun elementtiin liittyvää lisäsisältöä, käytä aloitussivun rivivaihtoehdoista yhden kohteen riviä, jossa on kuvaus-100-vaihtoehto.

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>

Voit myös käyttää custom_html- kenttää, jos et tarvitse muita nimiketason kenttiä, kuten heading tai description :

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

Markdown

Markdown-tiedostoissa mukautettu elementti on käärittävä <div> - tai <section> -elementtiin:

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

Eristä tietojoukkosi

Määritä dynaamisen sisällön kysely , joka eristää koko tietojoukon, jonka haluat olevan luettelossasi, ja lisää se uuden luettelosi kyselymääritteeseen.

Jos haluat esimerkiksi lisätä sivullesi luettelon kaikista osoitteessa developers.google.com luetelluista tuotteista, lisää sivullesi seuraava luettelo.

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

Lisää suodattimia

Jos haluat lisätä suodattimia luetteloosi, seuraa alla olevia ohjeita kullekin seuraavista vaihtoehdoista:

Tekstinsyöttöruutu Sivussa oleva osa valintaruutusuodattimia

Tekstinsyöttösuodatin

Lisää syöttöruutu, joka suodattaa tulokset käyttäjän kirjoittaessa tekstiä. Suodatusruutu vastaa käyttäjän tekstiä kunkin tuloksen otsikossa, kuvauksessa ja avainsanoissa.

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

Valintaruudun suodattimet

Lisää <devsite-catalog> -elementtiin <select> -elementti jokaiselle suodatettavalle ulottuvuudelle, kuten asiakirjatyypille, tuotteelle ja ohjelmointikielelle. Attribuutti name määrittää suodatusulottuvuuden, joka vastaa jäsenneltyä avainsanan nimiavaruutta tai DevSite-kentän nimeä, kuten keywords . Määritä mittatunniste lukijoillesi etikettiattribuutin avulla. Muista määrittää myös useat attribuutit kullekin <select> -elementille varmistaaksesi, että luotu suodattimen käyttöliittymä on oikea.

Lisää <option> -elementti kullekin suodatinarvolle määritetyssä ulottuvuudessa ylätason <select> -elementissä. Määritä suodatettava arvo kunkin <option> arvo-attribuutissa. Lisää luettavia suodatintarroja <option> -tunnisteiden väliin; nämä käännetään, jos sivusi on lokalisoitu.

Seuraava koodi lisää tulosten viereen osion dokumenttityyppisiä suodattimia ja avainsanasuodattimia suodatuskäyttöliittymässä:

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

Alkuperäiset valintaruutusuodattimet

Attribuutti initial-checkbox-filters määrittää alkuperäisen latauksen yhteydessä näytettävien valintaruutusuodattimien lukumäärän. Oletus on 3 .

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

Valitse renderöintivaihtoehdot

<devsite-catalog> tukee kaikkia dynaamisen sisällön widgetin renderöintiasetuksia ja mukautettuja elementtiattribuutteja .

Käytä fields attribuuttia määrittääksesi, mitä tietoja haluat näyttää luettelon kortissa. Kohdalle <devsite-dynamic-content> dokumentoitujen fields lisäksi voit määrittää minkä tahansa dokumentoidun jäsennellyn avainsanan nimiavaruuden, jotta jokaiseen asiakirjaan käytetyt tunnisteet hahmonnetaan kyseisessä nimiavaruudessa. Esimerkiksi product määrittäminen johtaa siihen, että kaikki kullekin sivulle lisätyt tuotetunnisteet hahmonnetaan kyseisen sivun kortilla. Voit myös määrittää tags nähdäksesi kaikki asiakirjassa käytetyt nimikkeistön tunnisteet.

Seuraava koodi määrittää yllä olevan esimerkin tarjoamaan enintään 1 000 viimeaikaisuuden mukaan lajiteltua tulosta numeerisella sivutusliittymällä, joka alkaa 9 tuloksella ja 9 lisätuloksella sivua kohden. Se määrittää tulokset hahmonnettaviksi korteiksi, joissa on otsikko, yhteenveto ja painike, jossa on "Lisätietoja", sekä product ja 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>

Jos tiimilläsi on UXE-tuki, voit luoda mukautetun mallin luettelokorteillesi lisäämällä uuden Soy-mallin mukautettu elementti ja määritä uusi malli käyttämällä mallin attribuuttia luettelossasi.

Merkitse sisältösi

Sisältö on suodatettavissa vain, jos se on merkitty suodattimiesi mukaan. On mahdollista lisätä suodattimia seuraavilla mitoilla:

eksplisiittisesti koodatut jäsennellyt avainsanat (strukturoimattomat) avainsanat page_type jäsennellyt avainsanat päätelty Nimikkeistökaaviosta Useimmat valintaruudut ja valintatyyppiset suodattimet suodattavat sisällön jäsenneltyjen avainsanojen mukaan, joissa suodatinulottuvuuden on vastattava jäsenneltyä avainsanan nimiavaruutta ja suodattimen arvon on vastattava loput jäsennelty avainsana. Katso Nomenclature-dokumentaatiosta lisätietoja jäsennellyistä avainsanoista ja tuetuista nimiavaruudesta.

Jos haluat piilottaa sivun kaikista luetteloista, aseta hide_from_catalogs-metatietotunnisteen arvoksi tosi kyseisellä sivulla.

Säädä asettelua

Jos haluat muuttaa oletusarvoista sarakeasettelua (joka on joko kaksi saraketta template="activity" -kohdille tai kolme saraketta muussa tapauksessa), lisää items-across-attribuutti, jonka arvo on 1 , 2 , 3 tai 4 . 

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

Kun näkymä kapenee, kohteiden asettelu mukautuu varmistaakseen, että kohteiden sisältö pysyy käytettävissä. items-across 3 tai 4 asettelu vaihtuu kahteen sarakkeeseen tableteissa ja kaikki asettelut yhdeksi sarakkeeksi mobiililaitteissa.

Esimerkkejä

Seuraavat ovat esimerkkejä mukautetun <devsite-catalog> -elementin perusominaisuuksien ulkonäön ja toimivuuden osoittamiseksi.

Pilviarkkitehtuurikeskus

Seuraavassa on esimerkki Cloud Architecture Centerissä käytetystä luettelosta. title ja summary lisäksi se määrittää product ja api fields attribuutissa, jotta kortteihin voidaan lisätä tunnisteita näille nimiavaruksille.

Demo

Näytä täysikokoinen 

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

Codelabsin katalogi

Seuraavassa on esimerkki koodilabojen luettelosta, jossa käytetään tasaisia ​​avainsanoja, numeroimatonta sivutusta ja ilman tekstisuodatinta.

Demo

Näytä täysikokoinen

Valmiiksi asennetut suodattimet

Katalogi-widget seuraa käyttäjän käyttämien suodattimien tilaa sivun URL-osoitteessa, mikä mahdollistaa tiettyjen suodatinmääritysten lisäämisen kirjanmerkkeihin tai jakamisen. Jokainen suodatinulottuvuus esitetään URL-parametrilla. URL-parametrit on rakennettu seuraavasti:

Suodatinelementeissä, joilla on yksi arvo, kuten valintatyylisuodattimissa, URL-parametrin arvo on normalisoitu suodatinarvo. Useita arvoja, kuten valintaruutuja, tukevien suodatinohjainten URL-parametrin arvo on pilkuilla eroteltu luettelo normalisoiduista suodatinarvoista. Luettelo-widget ei vaikuta kaikkiin muihin (ei-suodattaviin) URL-parametreihin. Jos käyttäjä on esimerkiksi syöttänyt tekstisuodattimeen "Big Data" ja valinnut Pythonin ja JavaScriptin Kieli-valintaruuduista, sivun URL-osoite heijastaa näitä suodattimia kyselymerkkijonolla "text=Big%20Data&language=python,javascript".

Kun Katalogi-widgetin sisältävä sivu ladataan suodatinparametreilla URL-osoitteessa, Katalogi-widget esitäyttää vastaavat suodatinohjaimet ja suodattaa tulokset asianmukaisesti.

Esimerkiksi seuraava on Cloud Architecture Centerin demon URL-osoite :

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

Tässä on esimerkkejä kyselymerkkijonoista, jotka voit liittää kyseiseen URL-osoitteeseen:

?doctype=bestpractices tarkistaa Parhaat käytännöt -valintaruudun Valitse sisältötyyppi -osiossa , joka vastaa doctype suodattimen ulottuvuutta. ?doctype=bestpractices,blueprint tarkistaa sekä Best Practices- että Blueprint- valintaruudut samassa osiossa. ?text=Cloud%20SQL täyttää tekstisuodattimen syötteen "Cloud SQL:llä".

Suodatinparametrien mitat voidaan myös yhdistää. Seuraava URL-osoite sisältää sekä doctype- että text-parametrit:

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

Tämä URL-osoite valitsee sopivat valintaruudut ja täyttää tekstisyötteen seuraavan esittelyn mukaisesti.

Näytä täysikokoinen