Цю сторінку перекладено за допомогою Cloud Translation API.

Віджети: Каталог

Спеціальний елемент <devsite-catalog> надає фільтрований динамічний вміст, який включає інтерфейс користувача для фільтрації на всій платформі. Він запитує вміст, що належить DevSite, щоб завантажити ресурси, пов’язані з певною темою, на сторінці DevSite. Цей спеціальний елемент може завантажувати ресурси з будь-якого клієнта DevSite, а також зовнішні ресурси , додані до корпусу зовнішнього вмісту DevSite.

Використання

Щоб почати використовувати спеціальний елемент <devsite-catalog> , виконайте такі дії:

Додайте настроюваний елемент

Додайте спеціальний елемент <devsite-catalog> на свою сторінку в потрібному місці.

HTML

Для сторінок HTML спеціальний елемент можна додати так само, як і будь-який інший елемент HTML:

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

YAML

Для рядка цільової сторінки з додатковим вмістом, пов’язаним із настроюваним елементом, використовуйте рядок з одним елементом із опцією description-100 у параметрах рядка цільової сторінки.

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>

Ви також можете використовувати поле custom_html , якщо вам не потрібні інші поля на рівні елемента, такі як heading або description :

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

Уцінка

Для файлів Markdown настроюваний елемент має бути загорнутий в елемент <div> або <section> :

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

Ізолюйте свій набір даних

Визначте запит динамічного вмісту , який ізолює повний набір даних, який ви хочете отримати у вашому каталозі, і додайте його до атрибута запиту у вашому новому каталозі.

Наприклад, щоб додати на свою сторінку каталог усіх продуктів, перелічених на developers.google.com, додайте на свою сторінку наступний каталог.

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

Додайте фільтри

Щоб додати фільтри до свого каталогу, виконайте наведені нижче інструкції для кожного з наведених нижче параметрів.

Поле введення тексту Розділ фільтрів для прапорців збоку

Фільтр введення тексту

Додайте поле введення, яке фільтрує результати, коли користувач вводить текст. Поле фільтрації збігається з текстом користувача в заголовку, описі та ключових словах кожного результату.

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

Фільтри прапорців

У своєму елементі <devsite-catalog> додайте елемент <select> для кожного параметра, який можна фільтрувати, наприклад типу документа, продукту та мови програмування. Атрибут name визначає розмір фільтрації, який відповідає структурованому простору імен ключових слів або імені поля DevSite, наприклад, keywords . Укажіть мітку розміру для читачів за допомогою атрибута label. Обов’язково вкажіть атрибут multiple для кожного елемента <select> , щоб переконатися, що створений інтерфейс користувача фільтра правильний.

Додайте елемент <option> для кожного значення фільтра в указаному вимірі до батьківського елемента <select> . Укажіть значення, яке можна фільтрувати, в атрибуті value для кожного параметра <option> . Додайте читабельні мітки фільтрів між тегами <option> ; вони будуть перекладені, якщо ваша сторінка локалізована.

Наступний код додає розділ фільтрів типів документів і фільтрів за ключовими словами в інтерфейсі користувача фільтрації збоку від результатів:

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

Початкові фільтри прапорців

Атрибут initial-checkbox-filters визначає кількість фільтрів прапорців, які відображатимуться під час початкового завантаження. За замовчуванням 3 .

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

Виберіть параметри візуалізації

<devsite-catalog> підтримує всі параметри візуалізації та настроювані атрибути елементів для віджета динамічного вмісту.

Використовуйте атрибут fields , щоб указати, які дані потрібно відображати на картці вашого каталогу. На додаток до fields , задокументованих для <devsite-dynamic-content> , ви можете вказати будь-який із задокументованих структурованих просторів імен ключових слів для відтворення тегів, застосованих до кожного документа в цьому просторі імен. Наприклад, якщо вказати product , усі теги продукту, застосовані до кожної сторінки, відображатимуться на картці цієї сторінки. Ви також можете вказати tags , щоб побачити всі теги номенклатури , застосовані до документа.

Наступний код налаштовує наведений вище приклад для надання максимум 1000 результатів, відсортованих за останнім часом, із нумерованим інтерфейсом користувача з розбивкою на сторінки, починаючи з 9 результатів і 9 додаткових результатів на сторінку. Він налаштовує результати, які відображаються у вигляді карток із заголовком, підсумком і кнопкою з позначкою «Дізнатися більше», а також тегами для product та 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>

Якщо ваша команда підтримує UXE, ви можете створити спеціальний шаблон для своїх карток каталогу, додавши новий шаблон Soy до настроюваний елемент і вказавши свій новий шаблон за допомогою атрибута шаблону у вашому каталозі.

Додайте теги до свого вмісту

Вміст можна фільтрувати, лише якщо він позначений тегами відповідно до ваших фільтрів. Можна додати фільтри за такими розмірами:

чітко позначені тегами структуровані ключові слова (неструктуровані) ключові слова page_type структуровані ключові слова, виведені з номенклатурного графіка. Більшість прапорців і фільтрів у стилі вибору фільтруватимуть вміст відповідно до структурованих ключових слів, де розмірність фільтра має відповідати простору імен структурованого ключового слова, а значення фільтра має відповідати решті структуроване ключове слово. Перегляньте документацію з номенклатури, щоб отримати додаткові відомості про структуровані ключові слова та підтримувані простори імен.

Щоб приховати сторінку від усіх каталогів, установіть для тегу метаданих hide_from_catalogs значення true на цій сторінці.

Налаштувати макет

Щоб змінити макет стовпця за замовчуванням (який складається з двох стовпців для елементів template="activity" або трьох стовпців в інших випадках), додайте атрибут items-across зі значенням 1 , 2 , 3 або 4 .

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

Коли область перегляду стає вужчою, макет елементів змінюється, щоб вміст елементів залишався доступним. Для items-across значеннями 3 або 4 макет перемикається на два стовпці на планшетах, а всі макети перемикаються на один стовпець на мобільних пристроях.

Приклади

Нижче наведено приклади для демонстрації зовнішнього вигляду та функціональності основних функцій спеціального елемента <devsite-catalog> .

Центр хмарної архітектури

Нижче наведено приклад каталогу, який використовується для Cloud Architecture Center. Окрім title та summary , він визначає product і api в атрибуті fields , щоб додати теги для цих просторів імен до карток.

Демо

Переглянути повний розмір

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

Каталог Codelabs

Нижче наведено приклад каталогу кодових лабораторій, які використовують одноразові ключові слова, ненумеровану розбивку сторінок і відсутність введення текстового фільтра.

Демо

Переглянути повний розмір

Попередньо застосовані фільтри

Віджет «Каталог» відстежує стан застосованих користувачем фільтрів в URL-адресі сторінки, дозволяючи створювати закладки для певних конфігурацій фільтрів або ділитися ними. Кожен параметр фільтра представлено параметром URL-адреси. Параметри URL-адреси структуровані таким чином:

Для елементів керування фільтрами, які мають одне значення, як-от фільтри в стилі вибору, значення параметра URL-адреси є нормалізованим значенням фільтра. Для елементів керування фільтрами, які підтримують кілька значень, як-от прапорці, значення параметра URL-адреси — це список нормалізованих значень фільтра, розділених комами. Віджет Каталогу не впливає на всі інші (не фільтровані) параметри URL-адреси. Наприклад, якщо користувач ввів «Великі дані» в текстовий фільтр і вибрав Python і JavaScript у полях «Мова», URL-адреса сторінки відображає ці фільтри за допомогою рядка запиту «text=Big%20Data&language=python,javascript».

Коли сторінка, що містить віджет «Каталог», завантажується з параметрами фільтра в URL-адресі, віджет «Каталог» попередньо заповнює відповідні елементи керування фільтром і відповідним чином фільтрує результати.

Наприклад, нижче наведено URL-адресу демонстрації Cloud Architecture Center :

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

Ось кілька прикладів рядків запиту, які можна додати до цієї URL-адреси:

?doctype=bestpractices встановлює прапорець «Рекомендації» в розділі «Вибрати тип вмісту» , який відповідає параметру фільтра doctype . ?doctype=bestpractices,blueprint позначає прапорці Best Practices і Blueprint в одному розділі. ?text=Cloud%20SQL заповнює вхідні дані текстового фільтра "Cloud SQL".

Розміри параметрів фільтра також можна комбінувати. Наступна URL-адреса містить параметри doctype і text:

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

Ця URL-адреса встановлює відповідні прапорці та заповнює введений текст, як показано в наступній демонстрації.

Переглянути повний розмір