Logrīki: Katalogs

Pielāgotais elements <devsite-catalog> nodrošina filtrējamu dinamisku saturu, kas ietver platformas mēroga filtrēšanas lietotāja saskarni. Tas vaicā DevSite piederošo saturu, lai ielādētu resursus, kas saistīti ar noteiktu tēmu DevSite lapā. Šis pielāgotais elements var ielādēt resursus no jebkura DevSite nomnieka, kā arī ārējos resursus , kas ir pievienoti DevSite ārējā satura korpusam.

Lietošana

Lai sāktu lietot pielāgoto elementu <devsite-catalog> , rīkojieties šādi:

  1. Pievienojiet savai lapai pielāgoto elementu.
  2. Izolējiet savu datu kopu, izmantojot dinamiskā satura vaicājumu.
  3. Pievienojiet filtrus.
  4. Atlasiet renderēšanas opcijas.
  5. Atzīmējiet saturu.
  6. Pielāgojiet izkārtojumu.

Pievienojiet pielāgoto elementu

Pievienojiet savai lapai pielāgoto elementu <devsite-catalog> vēlamajā vietā.

HTML

HTML lapām pielāgoto elementu var pievienot tāpat kā jebkuru citu HTML elementu:

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

YAML

Galvenās lapas rindai ar papildu saturu, kas saistīts ar pielāgoto elementu, izmantojiet viena vienuma rindu ar opciju apraksts 100 no galvenās lapas rindas opcijām .

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>

Varat arī izmantot custom_html lauku, ja jums nav nepieciešami citi vienuma līmeņa lauki, piemēram, heading vai description :

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

Markdown

Markdown failiem pielāgotais elements ir jāiesaiņo elementā <div> vai <section> :

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

Izolējiet savu datu kopu

Nosakiet dinamiskā satura vaicājumu , kas izolē visu datu kopu, kuru vēlaties darīt pieejamu jūsu katalogam, un pievienojiet to vaicājuma atribūtam jaunajā katalogā.

Piemēram, lai savai lapai pievienotu visu vietnē developers.google.com norādīto produktu katalogu, pievienojiet savai lapai šādu katalogu.

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

Pievienojiet filtrus

Lai savam katalogam pievienotu filtrus, izpildiet tālāk sniegtos norādījumus katrai no šīm opcijām.

Teksta ievades lodziņš Izvēles rūtiņu filtru sadaļa sānos

Teksta ievades filtrs

Pievienojiet ievades lodziņu, kas filtrē rezultātus, kad lietotājs ievada tekstu. Filtrēšanas lodziņš atbilst lietotāja tekstam katra rezultāta virsrakstā, aprakstā un atslēgvārdos.

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

Izvēles rūtiņas filtri

Elementā <devsite-catalog> pievienojiet elementu <select> katrai filtrējamai dimensijai, piemēram, dokumenta veidam, produktam un programmēšanas valodai. Atribūts name nosaka filtrēšanas dimensiju, kas atbilst strukturētai atslēgvārdu nosaukumvietai vai DevSite lauka nosaukumam, piemēram, keywords . Norādiet dimensijas iezīmi saviem lasītājiem, izmantojot etiķetes atribūtu. Noteikti norādiet arī vairāku atribūtu katram <select> elementam, lai nodrošinātu, ka ģenerētā filtra lietotāja saskarne ir pareiza.

Pievienojiet elementu <option> katrai filtra vērtībai norādītajā dimensijā vecāka <select> elementā. Norādiet filtrējamo vērtību vērtības atribūtā katrā <option> . Pievienojiet lasāmas filtra etiķetes starp <option> tagiem; tie tiks tulkoti, ja jūsu lapa ir lokalizēta.

Šis kods rezultātu malās pievieno dokumentu tipu filtru un atslēgvārdu filtru sadaļu filtrēšanas lietotāja saskarnē:

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

Sākotnējie izvēles rūtiņu filtri

Atribūts initial-checkbox-filters nosaka izvēles rūtiņu filtru skaitu, kas jāparāda sākotnējās ielādes laikā. Noklusējums ir 3 .

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

Atlasiet renderēšanas opcijas

<devsite-catalog> atbalsta visas dinamiskā satura logrīka renderēšanas opcijas un pielāgoto elementu atribūtus .

Izmantojiet fields atribūtu, lai norādītu, kādus datus vēlaties parādīt kataloga kartītē. Papildus fields , kas dokumentēti par <devsite-dynamic-content> , varat norādīt jebkuru no dokumentētajām strukturētajām atslēgvārdu nosaukumvietām , lai renderētu katram dokumentam lietotos tagus šajā nosaukumvietā. Piemēram, norādot product , visas katrai lapai pievienotās produktu atzīmes tiks renderētas šīs lapas kartītē. Varat arī norādīt tags , lai redzētu visus dokumentam lietotos nomenklatūras tagus.

Šis kods konfigurē iepriekš minēto piemēru, lai nodrošinātu ne vairāk kā 1000 rezultātu, kas sakārtoti pēc nesenības, ar ciparu lappušu kārtošanas lietotāja saskarni, kas sākas ar 9 rezultātiem un 9 papildu rezultātiem katrā lapā. Tas konfigurē rezultātus, lai tie tiktu renderēti kā kartītes ar nosaukumu, kopsavilkumu un pogu ar nosaukumu “Uzzināt vairāk”, kā arī product un api tagiem.

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

Ja jūsu komandai ir UXE atbalsts, varat izveidot pielāgotu veidni savām kataloga kartēm, pievienojot jaunu Soy veidni. pielāgotu elementu un norādot savu jauno veidni, izmantojot veidnes atribūtu savā katalogā.

Atzīmējiet saturu

Saturu var filtrēt tikai tad, ja tas ir atzīmēts atbilstoši jūsu filtriem. Ir iespējams pievienot filtrus, izmantojot šādus izmērus:

skaidri marķēti strukturēti atslēgvārdi (nestrukturēti) atslēgvārdi page_type strukturēti atslēgvārdi, kas izsecināti no nomenklatūras diagrammas Lielākā daļa izvēles rūtiņu un atlases stila filtru filtrēs saturu atbilstoši strukturētiem atslēgvārdiem, kur filtra dimensijai ir jāatbilst strukturēta atslēgvārda nosaukumvietai un filtra vērtībai ir jāatbilst atlikušajai strukturētais atslēgvārds. Plašāku informāciju par strukturētajiem atslēgvārdiem un atbalstītajām nosaukumvietām skatiet nomenklatūras dokumentācijā.

Lai paslēptu lapu no visiem katalogiem, iestatiet metadatu tagu hide_from_catalogs uz True šajā lapā.

Pielāgojiet izkārtojumu

Lai mainītu noklusējuma kolonnu izkārtojumu (kas ir vai nu divas kolonnas vienumiem template="activity" vai trīs kolonnas, citādi), pievienojiet atribūtu items-across ar vērtību 1 , 2 , 3 vai 4 . 

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

Skata logam kļūstot šaurākam, vienumu izkārtojums tiek pielāgots, lai nodrošinātu vienumu satura pieejamību. items-across vērtībām 3 vai 4 planšetdatoros izkārtojums tiek pārslēgts uz divām kolonnām, un mobilajās ierīcēs visi izkārtojumi tiek pārslēgti uz vienu kolonnu.

Piemēri

Tālāk ir sniegti piemēri, lai demonstrētu pielāgotā elementa <devsite-catalog> pamatfunkciju izskatu un funkcionalitāti.

Mākoņu arhitektūras centrs

Tālāk ir sniegts Mākoņu arhitektūras centram izmantotā kataloga piemērs. Papildus title un summary fields atribūtā ir norādīts product un api , lai kartītēm pievienotu tagus šīm nosaukumvietām.

Demonstrācija

Skatīt pilnā izmērā 

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

Codelabs katalogs

Tālāk ir sniegts koda laboratoriju kataloga piemērs, kurā tiek izmantoti vienoti atslēgvārdi, lappušu maiņa bez numurēšanas un bez teksta filtra ievades.

Demonstrācija

Skatīt pilnā izmērā

Iepriekš lietotie filtri

Kataloga logrīks izseko lietotāja lietoto filtru stāvokli lapas vietrādī URL, ļaujot konkrētas filtru konfigurācijas pievienot grāmatzīmēm vai koplietot. Katra filtra kategorija tiek attēlota ar URL parametru. URL parametri ir strukturēti šādi:

Filtru vadīklām, kurām ir viena vērtība, piemēram, atlases stila filtriem, URL parametra vērtība ir normalizētā filtra vērtība. Filtru vadīklām, kas atbalsta vairākas vērtības, piemēram, izvēles rūtiņas, URL parametra vērtība ir ar komatu atdalīts normalizēto filtru vērtību saraksts. Kataloga logrīks neietekmē visus pārējos (nefiltrētos) URL parametrus. Piemēram, ja lietotājs teksta filtrā ir ievadījis “Lieli dati” un izvēles rūtiņās Valoda atlasījis Python un JavaScript , lapas URL atspoguļo šos filtrus ar vaicājuma virkni “text=Big%20Data&language=python,javascript”.

Kad lapa, kurā ir Kataloga logrīks, tiek ielādēts ar filtra parametriem URL, Kataloga logrīks iepriekš aizpilda atbilstošās filtra vadīklas un atbilstoši filtrē rezultātus.

Piemēram, tālāk ir norādīts Cloud Architecture Center demonstrācijas URL:

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

Šeit ir daži piemēri vaicājumu virknēm, kuras varat pievienot šim URL:

?doctype=bestpractices atzīmē izvēles rūtiņu Paraugprakse sadaļā Satura veida izvēle , kas atbilst doctype filtra dimensijai. ?doctype=bestpractices,blueprint pārbauda gan labākās prakses , gan Blueprint izvēles rūtiņas vienā sadaļā. ?text=Cloud%20SQL aizpilda teksta filtra ievadi ar "Cloud SQL".

Filtra parametru izmērus var arī kombinēt. Šis URL satur gan doctype, gan teksta parametrus:

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

Šis URL atlasa atbilstošās izvēles rūtiņas un aizpilda teksta ievadi, kā parādīts nākamajā demonstrācijā.

Skatīt pilnā izmērā