Widgetek: Katalógus

A <devsite-catalog> egyéni elem szűrhető dinamikus tartalmat biztosít, amely egy platformszintű szűrőfelületet is tartalmaz. Lekérdezi a DevSite tulajdonában lévő tartalmat, hogy egy adott témához kapcsolódó erőforrásokat töltsön be egy DevSite oldalon. Ez az egyéni elem bármely DevSite-bérlőtől, valamint a DevSite külső tartalom korpuszhoz hozzáadott külső erőforrásokból tölthet be erőforrásokat.

Használat

A <devsite-catalog> egyéni elem használatának megkezdéséhez tegye a következőket:

  1. Adja hozzá az egyéni elemet az oldalához.
  2. Dinamikus tartalom lekérdezéssel különítse el adatkészletét.
  3. Szűrők hozzáadása.
  4. Válassza ki a megjelenítési beállításokat.
  5. Jelölje meg a tartalmat.
  6. Állítsa be az elrendezést.

Adja hozzá az egyéni elemet

Adja hozzá a <devsite-catalog> egyéni elemet az oldalához a kívánt helyen.

HTML

HTML-oldalakhoz az egyéni elem ugyanúgy hozzáadható, mint bármely más HTML-elem:

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

YAML

Az egyéni elemhez kapcsolódó további tartalommal rendelkező céloldal során használjon egy egyelemes sort a céloldal soropciói közül a description-100 opcióval.

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>

Használhat custom_html mezőt is, ha nincs szüksége más elemszintű mezőkre, például heading vagy description :

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

Árleszállítás

Markdown fájlok esetén az egyéni elemet <div> vagy <section> elembe kell csomagolni:

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

Különítse el adatkészletét

Határozzon meg egy dinamikus tartalom lekérdezést , amely elkülöníti a katalógusban elérhetővé kívánt teljes adatkészletet, és adja hozzá az új katalógus lekérdezési attribútumához.

Ha például a developers.google.com oldalon felsorolt ​​összes termék katalógusát szeretné hozzáadni az oldalához, adja hozzá a következő katalógust az oldalához.

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

Szűrők hozzáadása

Ha szűrőket szeretne hozzáadni a katalógushoz, kövesse az alábbi utasításokat az alábbi lehetőségek mindegyikéhez:

Szövegbeviteli mező A jelölőnégyzet-szűrők egy része az oldalán

Szövegbeviteli szűrő

Adjon hozzá egy beviteli mezőt, amely szűri az eredményeket, amikor a felhasználó szöveget ír be. A szűrőmező megfelel a felhasználó szövegének az egyes találatok címében, leírásában és kulcsszavaiban.

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

Jelölőnégyzet-szűrők

<devsite-catalog> elemen belül adjon hozzá egy <select> elemet minden szűrhető dimenzióhoz, például dokumentumtípushoz, termékhez és programozási nyelvhez. A name attribútum határozza meg a szűrési dimenziót, amely egy strukturált kulcsszó névterének vagy egy DevSite mezőnévnek, például keywords felel meg. Adjon meg dimenziócímkét olvasói számára a label attribútum használatával. Ügyeljen arra, hogy minden egyes <select> elemhez megadja a többszörös attribútumot is, hogy a generált szűrőfelület megfelelő legyen.

Adjon hozzá egy <option> elemet minden szűrőértékhez a szülő <select> elem megadott dimenziójában. Adja meg a szűrhető értéket az érték attribútumban minden <option> esetén. Adjon hozzá olvasható szűrőcímkéket az <option> címkék közé; ezeket lefordítják, ha az oldal honosított.

A következő kód hozzáadja a dokumentumtípus-szűrők és a kulcsszószűrők egy részét a szűrőfelületen az eredmények oldalához:

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

Kezdeti jelölőnégyzet-szűrők

A initial-checkbox-filters attribútum határozza meg a kezdeti betöltéskor megjelenítendő jelölőnégyzet-szűrők számát. Az alapértelmezett a 3 .

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

Válassza ki a megjelenítési beállításokat

<devsite-catalog> támogatja a dinamikus tartalom widget összes megjelenítési beállítását és egyéni elemattribútumát .

A fields attribútum segítségével adja meg, hogy milyen adatokat kíván megjeleníteni a katalógus kártyáján. <devsite-dynamic-content> számára dokumentált fields kívül bármely dokumentált strukturált kulcsszónévteret megadhat az adott névtérben lévő egyes dokumentumokra alkalmazott címkék megjelenítéséhez. Például product megadása azt eredményezi, hogy az egyes oldalakon alkalmazott összes termékcímke megjelenik az adott oldal kártyáján. tags is megadhat a dokumentumra alkalmazott összes nómenklatúra- címke megtekintéséhez.

A következő kód úgy konfigurálja a fenti példát, hogy legfeljebb 1000 találatot jelenítsen meg, az aktuális idő szerint rendezve egy numerikus oldalszámozású felhasználói felülettel, amely 9 eredménnyel és 9 további találattal kezdődik oldalanként. Úgy konfigurálja az eredményeket, hogy kártyákként jelenjenek meg egy címmel, összefoglalóval és „További információ” feliratú gombbal, valamint product és api címkékkel.

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

Ha csapata rendelkezik UXE-támogatással, egyéni sablont hozhat létre a katalóguskártyáihoz úgy, hogy hozzáad egy új Soy sablont a egyéni elemet, és adja meg az új sablont a katalógusban található sablon attribútum használatával.

Jelölje meg a tartalmat

A tartalom csak akkor szűrhető, ha a szűrők szerint van megcímkézve. Lehetőség van szűrők hozzáadására a következő méretekkel:

kifejezetten címkézett strukturált kulcsszavak (strukturálatlan) kulcsszavak oldal_típusú strukturált kulcsszavak, amelyek a nómenklatúra grafikonjából következtetnek ki a strukturált kulcsszót. A strukturált kulcsszavakkal és a támogatott névterekkel kapcsolatos további információkért tekintse meg a Nomenklatúra dokumentációját.

Ha el szeretne rejteni egy oldalt az összes katalógusból, állítsa a hide_from_catalogs metaadat címkét igaz értékre azon az oldalon.

Állítsa be az elrendezést

Az alapértelmezett oszlopelrendezés módosításához (amely vagy két oszlop template="activity" elemekhez, vagy egyébként három oszlop), adjon hozzá egy items-across attribútumot 1 , 2 , 3 vagy 4 értékkel. 

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

Ahogy a nézeti ablak szűkül, az elemek elrendezése úgy módosul, hogy az elemek tartalma továbbra is elérhető maradjon. 3 vagy 4 items-across elemek esetén az elrendezés két oszlopra vált át táblagépeken, mobileszközökön pedig minden elrendezés egyetlen oszlopra.

Példák

Az alábbiakban példák mutatják be a <devsite-catalog> egyéni elem alapvető funkcióinak megjelenését és működését.

Cloud Architecture Center

A következő egy példa a Cloud Architecture Centerhez használt katalógusra. title és summary mellett megadja product és api a fields attribútumában, hogy ezekhez a névterekhez címkéket adjon a kártyákhoz.

Demó

Teljes méret megtekintése 

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

Codelabs katalógus

A következő egy példa a kódlaboratóriumok katalógusára, amely lapos kulcsszavakat, nem számozott oldalszámozást és szövegszűrő bevitelt nem használ.

Demó

Teljes méret megtekintése

Előre felhelyezett szűrők

A Katalógus widget nyomon követi a felhasználó által alkalmazott szűrők állapotát az oldal URL-jében, lehetővé téve bizonyos szűrőkonfigurációk könyvjelzővel való megosztását vagy megosztását. Minden szűrődimenziót egy URL-paraméter képvisel. Az URL-paraméterek felépítése a következő:

Az egyetlen értékű szűrővezérlőknél, például a kijelölési stílusú szűrőknél, az URL-paraméter értéke a normalizált szűrőérték. A több értéket, például a jelölőnégyzeteket támogató szűrővezérlők esetében az URL-paraméter értéke a normalizált szűrőértékek vesszővel elválasztott listája. Az összes többi (nem szűrő) URL-paraméterre nincs hatással a Katalógus widget. Például, ha egy felhasználó beírta a "Big Data" szót a szövegszűrőbe, és a Python és a JavaScript lehetőséget választotta a Nyelv jelölőnégyzetekből, az oldal URL-je ezeket a szűrőket a "text=Big%20Data&language=python,javascript" lekérdezési karakterlánccal tükrözi.

Amikor a Katalógus widgetet tartalmazó oldal betöltődik szűrőparaméterekkel az URL-ben, a Katalógus felületi elem előre kitölti a megfelelő szűrővezérlőket, és megfelelően szűri az eredményeket.

A következő például a Cloud Architecture Center bemutatójának URL-je:

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

Íme néhány példa a lekérdezési karakterláncokra, amelyeket hozzáfűzhet az URL-hez:

?doctype=bestpractices bejelöli a Bevált gyakorlatok jelölőnégyzetet a Válasszon tartalomtípust részben, amely megfelel a doctype szűrődimenziónak. ?doctype=bestpractices,blueprint bejelöli a Legjobb gyakorlatok és a Blueprint jelölőnégyzeteket is ugyanabban a részben. ?text=Cloud%20SQL kitölti a szövegszűrő bemenetet a "Cloud SQL"-lel.

A szűrőparaméterek méretei is kombinálhatók. A következő URL tartalmazza a doctype és a text paramétereket is:

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

Ez az URL bejelöli a megfelelő jelölőnégyzeteket, és kitölti a szövegbevitelt, ahogy az a következő bemutatón látható.

Teljes méret megtekintése