Element niestandardowy <devsite-catalog> zawiera możliwą do filtrowania zawartość dynamiczną, która zawiera interfejs filtrowania obejmujący całą platformę. Odpytuje treści należące do DevSite, aby wczytać zasoby związane z danym tematem na stronie DevSite. Ten element niestandardowy może wczytywać zasoby z dowolnego najemcy DevSite, a także zasoby zewnętrzne, które zostały dodane do korpusu treści zewnętrznych DevSite.

Wykorzystanie

Aby zacząć korzystać z elementu niestandardowego <devsite-catalog>:

1. Dodaj element niestandardowy do swojej strony.
2. Wyizoluj zbiór danych za pomocą zapytania dotyczącego zawartości dynamicznej.
3. Dodaj filtry.
4. Wybierz opcje renderowania.
5. Dodaj tagi do swoich treści.
6. Dostosowywanie układu.

Dodawanie elementu niestandardowego

Dodaj element niestandardowy <devsite-catalog> do swojej strony w wybranym miejscu.

HTML

Na stronach HTML element niestandardowy można dodać tak samo jak każdy inny element HTML:

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

YAML

W przypadku wiersza strony docelowej z dodatkową treścią związaną z elementem niestandardowym użyj wiersza pojedynczego elementu z opcją opisu-100 w opcjach wierszy strony docelowej.

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>

Możesz też użyć pola custom_html, jeśli nie potrzebujesz żadnych innych pól na poziomie produktu, np. heading czy description:

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

Markdown

W przypadku plików Markdown element niestandardowy musi być zawarty w elemencie <div> lub <section>:

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

Wyizoluj zbiór danych

Określ zapytanie dotyczące zawartości dynamicznej, które wyodrębnia pełny zbiór danych, który chcesz udostępnić w katalogu, i dodaj go do atrybutu zapytania w nowym katalogu.

Aby na przykład dodać do strony katalog wszystkich produktów wymienionych na developers.google.com, dodaj do strony poniższy katalog.

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

Dodaj filtry

Aby dodać filtry do katalogu, postępuj zgodnie z instrukcjami poniżej w przypadku każdej z tych opcji:

pole do wprowadzania tekstu, z boku sekcji filtrów pól wyboru,

Filtr wprowadzania tekstu

Dodaj pole do wprowadzania danych, które filtruje wyniki podczas wpisywania tekstu przez użytkownika. Pole filtrowania dopasowuje tekst użytkownika w tytule, opisie i słowach kluczowych poszczególnych wyników.

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

Filtry pól wyboru

W elemencie <devsite-catalog> dodaj element <select> dla każdego możliwego do filtrowania wymiaru, takiego jak typ dokumentu, usługa i język programowania. Atrybut name określa wymiar filtrowania, który odpowiada przestrzeni nazw uporządkowanych słów kluczowych lub nazwie pola DevSite, takiej jak keywords. Określ etykietę wymiaru dla czytelników za pomocą atrybutu label. Pamiętaj, aby określić wiele atrybutów dla każdego elementu <select>. Zapewni to prawidłowe działanie wygenerowanego interfejsu filtra.

Dodaj element <option> dla każdej wartości filtra w określonym wymiarze w nadrzędnym elemencie <select>. Określ możliwą do filtrowania wartość w atrybucie wartość w każdym tagu <option>. Dodaj czytelne etykiety filtra między tagami <option>. zostaną przetłumaczone, jeśli strona jest zlokalizowana.

Ten kod dodaje z boku wyników sekcję filtrów typów dokumentów i filtrów słów kluczowych w interfejsie filtrowania z boku wyników:

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

Początkowe filtry pól wyboru

Atrybut initial-checkbox-filters określa filtry pól wyboru z liczbą, które będą wyświetlane przy początkowym wczytywaniu. Wartość domyślna to 3.

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

Wybieranie opcji renderowania

<devsite-catalog> obsługuje wszystkie opcje renderowania i atrybuty elementów niestandardowych w widżecie Treści dynamiczne.

Aby określić, jakie dane mają się wyświetlać na karcie katalogu, użyj atrybutu fields. Oprócz fields udokumentowanego dla <devsite-dynamic-content> możesz określić dowolną z udokumentowanych przestrzeni nazw uporządkowanych słów kluczowych, aby wyrenderować tagi zastosowane do każdego dokumentu w tej przestrzeni nazw. Jeśli na przykład określisz atrybut product, wszystkie tagi produktów zostaną zastosowane do każdej strony na jej karcie. Możesz też określić atrybut tags, aby wyświetlić wszystkie tagi Nomenclature zastosowane do dokumentu.

Następujący kod konfiguruje powyższy przykład tak, aby wyświetlić maksymalnie 1000 wyników posortowanych według czasu od poprzedniej wizyty z numerycznym interfejsem podziału na strony rozpoczynającymi się od 9 wyników i 9 dodatkowych wyników na stronie. Konfiguruje on wyświetlanie wyników w postaci kart z tytułem, podsumowaniem i przyciskiem „Więcej informacji” oraz tagi product i 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>

Jeśli Twój zespół obsługuje UXE, możesz utworzyć niestandardowy szablon dla kart katalogu, dodając nowy szablon Soy do elementu niestandardowego i określając nowy szablon za pomocą atrybutu szablonu w katalogu.

Dodawanie tagów do treści

Treści można filtrować tylko wtedy, gdy są otagowane zgodnie z wybranymi filtrami. Możesz dodawać filtry, korzystając z tych wymiarów:

wyraźnie otagowane uporządkowane słowa kluczowe słowa kluczowe (nieuporządkowane) page_type uporządkowane słowa kluczowe uzyskane z wykresu nomenklatury Większość filtrów wyboru i pola wyboru stylu służy do filtrowania treści według uporządkowanych słów kluczowych, przy czym wymiar filtra musi pasować do przestrzeni nazw uporządkowanych słów kluczowych, a wartość filtra musi odpowiadać pozostałej części tego słowa. Więcej informacji o uporządkowanych słowach kluczowych i obsługiwanych przestrzeniach nazw znajdziesz w dokumentacji nomenklatury.

Aby ukryć stronę we wszystkich katalogach, ustaw na tej stronie wartość parametru hide_from_catalogs metadanych na wartość „true”.

Dostosuj układ

Aby zmienić domyślny układ kolumn (czyli dwie kolumny dla pozycji template="activity" lub 3 kolumny), dodaj atrybut „między elementami” o wartości 1, 2, 3 lub 4.

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

W miarę jak widoczny obszar się zmniejsza, układ elementów dostosowuje się, czy treści pozostają dostępne. W przypadku wartości items-across o wartości 3 lub 4 układ na tabletach przełącza się na 2 kolumny, a na urządzeniach mobilnych wszystkie układy wyświetlają się w jednej kolumnie.

Przykłady

Poniżej znajdziesz przykłady pokazujące wygląd i funkcjonalność podstawowych funkcji elementu niestandardowego <devsite-catalog>.

Centrum architektury Cloud

Poniżej znajdziesz przykład katalogu używanego na potrzeby Centrum architektury Cloud. Oprócz title i summary wskazuje product i api w atrybucie fields, by dodać tagi dla tych przestrzeni nazw do kart.

Prezentacja

Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek

Wyświetl w pełnym rozmiarze

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

Katalog Codelabs

Poniżej znajduje się przykład katalogu ćwiczeń z programowania, w którym wykorzystano płaskie słowa kluczowe, nieponumerowany podział na strony i brak filtra tekstu.

Prezentacja

Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek

Wyświetl w pełnym rozmiarze

Wstępnie zastosowane filtry

Widżet Katalog śledzi stan filtrów zastosowanych przez użytkowników w adresie URL strony, umożliwiając tworzenie zakładek lub udostępnianie określonych konfiguracji filtrów. Każdy wymiar filtra jest reprezentowany przez parametr adresu URL. Parametry adresu URL mają taką strukturę:

W przypadku ustawień filtra, które mają pojedynczą wartość, np. filtry stylu wyboru, wartością parametru adresu URL jest znormalizowana wartość filtra. W przypadku ustawień filtra, które obsługują wiele wartości, np. pola wyboru, wartość parametru adresu URL jest rozdzielaną przecinkami listą znormalizowanych wartości filtra. Widżet katalogu nie ma wpływu na żadne inne (niefiltrowane) parametry adresu URL. Jeśli na przykład użytkownik wpisał „Duże dane” do filtra tekstu i w polach Język zaznaczono Python i JavaScript, a te filtry zostaną uwzględnione w URL-u strony jako ciąg zapytania „text=Big%20Data&language=python,javascript”.

Gdy strona zawierająca widżet katalogu jest wczytywana z parametrami filtra w adresie URL, widżet katalogu wstępnie wypełnia odpowiednie ustawienia filtra i odpowiednio filtruje wyniki.

Oto przykładowy adres URL prezentacji Centrum architektury Cloud:

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

Oto kilka przykładów ciągów zapytań, które możesz dołączyć do tego adresu URL:

?doctype=bestpractices zaznacza pole wyboru Sprawdzone metody w sekcji Wybierz typ treści, która odpowiada wymiarowi filtra doctype. ?doctype=bestpractices,blueprint zaznacza pola wyboru Sprawdzone metody i Plan w tej samej sekcji. ?text=Cloud%20SQL wypełnia dane wejściowe filtra tekstu „Cloud SQL”.

Wymiary z parametrów filtra można też łączyć. Następujący adres URL zawiera parametry doctype i text:

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

Ten URL zaznacza odpowiednie pola wyboru i wypełnia pole tekstowe, co pokazano w poniższej prezentacji.

Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek Sprawdzone metody Plan Pomysł Wzór Architektura referencyjna Samouczek

Wyświetl w pełnym rozmiarze