Персонализираният елемент <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
За 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. Уверете се, че сте посочили множествения атрибут за всеки елемент <select> , за да сте сигурни, че генерираният потребителски интерфейс на филтъра е правилен.
Добавете елемент <option> за всяка стойност на филтъра в посоченото измерение на родителския елемент <select> . Посочете вашата филтрируема стойност в атрибута стойност на всяка <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, така и текстови параметри:
Този URL адрес избира подходящите квадратчета за отметка и попълва въвеждането на текст, както е показано в следната демонстрация.