Виџети: Каталог

Прилагођени елемент <devsite-catalog> пружа динамички садржај који се може филтрирати и који укључује кориснички интерфејс за филтрирање на нивоу платформе. Он поставља упите за садржај у власништву ДевСите-а да би учитао ресурсе који се односе на одређену тему на страници ДевСите-а. Овај прилагођени елемент може да учитава ресурсе са било ког ДевСите закупца, као и екстерне ресурсе који су додати корпусу ДевСите спољног садржаја.

Употреба

Да бисте почели да користите прилагођени елемент <devsite-catalog> , урадите следеће:

  1. Додајте прилагођени елемент на своју страницу.
  2. Изолујте скуп података помоћу упита за динамички садржај.
  3. Додајте филтере.
  4. Изаберите своје опције за приказивање.
  5. Означите свој садржај.
  6. Подесите изглед.

Додајте прилагођени елемент

Додајте прилагођени елемент <devsite-catalog> на своју страницу на жељену локацију.

ХТМЛ

За ХТМЛ странице, прилагођени елемент се може додати као и сваки други ХТМЛ елемент:

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

ИАМЛ

За ред одредишне странице са додатним садржајем који се односи на прилагођени елемент, користите ред са једном ставком са опцијом десцриптион-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>

Такође можете да користите поље цустом_хтмл ако вам нису потребна никаква друга поља на нивоу ставке као што су heading или description :

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

Маркдовн

За Маркдовн датотеке, прилагођени елемент мора бити умотан у елемент <div> или <section> :

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

Изолујте свој скуп података

Одредите упит за динамички садржај који изолује цео скуп података који желите да буде доступан вашем каталогу и додајте га у атрибут упита у вашем новом каталогу.

На пример, да бисте на своју страницу додали каталог свих производа наведених на девелоперс.гоогле.цом, додајте следећи каталог на своју страницу.

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

Додајте филтере

Да бисте додали филтере у свој каталог, пратите упутства у наставку за сваку од следећих опција:

Оквир за унос текста Одељак филтера поља за потврду са стране

Филтер за унос текста

Додајте поље за унос који филтрира резултате док корисник уноси текст. Поље за филтрирање одговара тексту корисника унутар наслова, описа и кључних речи сваког резултата.

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

Филтери у пољу за потврду

У оквиру елемента <devsite-catalog> додајте елемент <select> за сваку димензију која се може филтрирати, као што је тип документа, производ и програмски језик. Атрибут name одређује димензију филтрирања, која одговара структурираном именском простору кључних речи или имену поља ДевСите као што су keywords . Наведите ознаку димензије за своје читаче користећи атрибут лабел. Обавезно наведите вишеструки атрибут за сваки елемент <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>

Ако ваш тим има подршку за УКСЕ, можете креирати прилагођени шаблон за своје каталошке картице додавањем новог Сои шаблона у прилагођени елемент и навођење вашег новог шаблона помоћу атрибута шаблона у вашем каталогу.

Означите свој садржај

Садржај се може филтрирати само ако је означен према вашим филтерима. Могуће је додати филтере користећи следеће димензије:

експлицитно означене структуриране кључне речи (неструктуриране) кључне речи паге_типе структуриране кључне речи закључене из графикона номенклатуре Већина филтера за поље за потврду и избор стила филтера ће филтрирати садржај према структурираним кључним речима, при чему димензија филтера мора да одговара структурираном именском простору кључних речи, а вредност филтера мора да одговара остатку структурисана кључна реч. Погледајте документацију о номенклатури за више информација о структурираним кључним речима и подржаним именским просторима.

Да бисте сакрили страницу из свих каталога, поставите ознаку метаподатака хиде_фром_цаталогс на труе на тој страници.

Подесите изглед

Да бисте променили подразумевани изглед колоне (који је или две колоне за template="activity" или три колоне у супротном), додајте атрибут итемс-ацросс са вредношћу 1 , 2 , 3 или 4 . 

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

Како се област приказа сужава, изглед ставки се прилагођава како би се осигурало да садржај ставки остане доступан. За вредности items-across од 3 или 4 , распоред се пребацује на две колоне на таблетима, а сви изгледи се пребацују на једну колону на мобилним уређајима.

Примери

Следе примери који показују изглед и функционалност основних карактеристика <devsite-catalog> > прилагођеног елемента.

Цлоуд Арцхитецтуре Центер

Следи пример каталога који се користи за Цлоуд Арцхитецтуре Центер. Поред title и summary , он наводи product и api у атрибуту fields за додавање ознака за ове просторе имена на картице.

Демо

Прикажи пуну величину 

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

Цоделабс Цаталог

Следи пример каталога кодних лабораторија који користе равне кључне речи, ненумерисану пагинацију и без уноса филтера текста.

Демо

Прикажи пуну величину

Претходно примењени филтери

Каталог виџет прати стање филтера које су применили корисници у УРЛ-у странице, омогућавајући да се одређене конфигурације филтера обележе или деле. Свака димензија филтера је представљена параметром УРЛ-а. Параметри УРЛ адресе су структурирани на следећи начин:

За контроле филтера које имају једну вредност као што су филтери у стилу бирања, вредност параметра УРЛ-а је нормализована вредност филтера. За контроле филтера које подржавају више вредности попут поља за потврду, вредност параметра УРЛ адресе је листа нормализованих вредности филтера раздвојених зарезима. Виџет Каталог не утиче на све остале (не-филтерске) параметре УРЛ-а. На пример, ако је корисник унео „Велике податке“ у текстуални филтер и изабрао Питхон и ЈаваСцрипт у пољима за потврду Језик, УРЛ странице одражава те филтере са стрингом упита „тект=Биг%20Дата&лангуаге=питхон,јавасцрипт“.

Када се страница која садржи виџет Каталог учита са параметрима филтера у УРЛ-у, виџет Каталог унапред попуњава одговарајуће контроле филтера и на одговарајући начин филтрира резултате.

На пример, следећа је УРЛ адреса за демонстрацију Цлоуд Арцхитецтуре Центер :

хттпс://девелоперс.гоогле.цом/девсите/референце/видгетс/цаталог/арцхитецтуре

Ево неколико примера стрингова упита које можете да додате тој УРЛ адреси:

?doctype=bestpractices означава избор у пољу за потврду Најбоље праксе у одељку Изаберите тип садржаја , који одговара димензији филтера doctype . ?doctype=bestpractices,blueprint означава и поља за потврду Најбоље праксе и Нацрт у истом одељку. ?text=Cloud%20SQL попуњава унос филтера текста са „Цлоуд СКЛ“.

Димензије параметара филтера се такође могу комбиновати. Следећа УРЛ адреса садржи и доцтипе и текстуалне параметре:

хттпс://девелоперс.гоогле.цом/девсите/референце/видгетс/цаталог/арцхитецтуре?доцтипе=бестпрацтицес%2Цблуепринт&тект=Цлоуд%20СКЛ

Ова УРЛ адреса бира одговарајућа поља за потврду и попуњава унос текста, као што је приказано у следећој демонстрацији.

Прикажи пуну величину