Виджеты: Рекомендации

Пользовательский элемент <devsite-recommendations> можно использовать для предоставления рекомендаций по контенту вашим читателям. Вы можете позволить системе генерировать рекомендации , вы можете предоставить явные рекомендации самостоятельно или вы можете обернуть существующие разделы рекомендаций в своем документе для единообразного представления, статистики кликов и богатого пользовательского интерфейса (включая описания и изображения).

Использование

Чтобы использовать этот виджет, создайте элемент <devsite-recommendations> . Если вы хотите предоставить рекомендации явно, добавьте несколько ссылок внутри элемента. В настоящее время рекомендации, сгенерированные системой, будут предоставляться, когда элемент пуст, но будущая работа позволит авторам экспериментировать с сгенерированными рекомендациями, когда предоставляются явные рекомендации, а также использовать их в качестве входных данных для алгоритма.

Если вы предоставляете явные рекомендации, добавьте некоторую разметку внутри элемента. Для любых тегов <a> , обнаруженных при подключении элемента, будут извлечены атрибуты href и использованы для рекомендаций.

Если вы предоставляете более трех рекомендаций, будет выбрана случайная выборка. Однако порядок рекомендаций останется таким же, как и порядок ввода, поэтому рекомендации с более высоким приоритетом всегда будут отображаться слева.

Если вы не хотите, чтобы конкретные рекомендации отображались в сгенерированных результатах, вы можете создать пустой элемент <devsite-recommendations> с коллекцией <link rel="disallow" href="/path"> . Любые теги <link> с атрибутом rel=disallow и атрибутом href будут автоматически обнаружены и удалены из созданных рекомендаций.

Если вам нужны рекомендации только из определенного подмножества страниц, вы можете использовать теги номенклатуры в поле query для фильтрации результатов. Синтаксис: k:category:value . Например, k:language:typescript. Список тегов может представлять собой список, разделенный запятыми ( k:language:typescript,k:language:swift ), чтобы включать страницы, содержащие любые теги.

В следующих разделах описывается разметка, как она отображается в нормальных условиях и как она отображается на машинах или простых пользовательских агентах.

Разметка 

<devsite-recommendations>
<p>Note: link text is displayed when JavaScript is off</p>
<ul>
  <li><a href="/maps/documentation">Maps docs</a></li>
  <li><a href="/analytics">Analytics</a></li>
  <li><a href="/machine-learning/crash-course">MLCC</a></li>
</ul>
</devsite-recommendations>

Результат

Простые пользовательские агенты

Примечание. Текст ссылки отображается, когда JavaScript отключен.

Пример с запретами

Разметка

<devsite-recommendations>
  <link rel="disallow" href="/maps/documentation">
  <link rel="disallow" href="/analytics">
  <link rel="disallow" href="/machine-learning/crash-course">
</devsite-recommendations>

Результат

Поскольку результаты зависят от рекомендаций, которые могут меняться, выходные данные будут такими же, как выходные данные модели рекомендаций.

Обертывание существующего контента

Этот элемент может постепенно улучшать существующую разметку на ваших страницах, поэтому вы можете обновить существующие ссылки, обернув их <devsite-recommendations> .

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

Разметка 

<devsite-recommendations>
<h2>Example communities</h2>
<p>Note: All markup here will be replaced with the recommendation UI.</p>
<p>
  For more information on Google Developers, check out our <a href="/community/experts">GDEs</a>. If
  you are looking to form a community, take a look at <a href="/community/gdg">GDGs</a>. Lastly, if
  you're currently studying, don't miss our <a href="/community/dsc">DSCs</a>.
</p>
</devsite-recommendations>

Результат

Примеры сообществ

Примечание. Вся разметка здесь будет заменена пользовательским интерфейсом рекомендаций.

Дополнительную информацию о разработчиках Google можно найти в наших GDE . Если вы хотите сформировать сообщество, обратите внимание на GDG . И наконец, если вы сейчас учитесь, не пропустите наши DSC .

Использование в файлах Markdown

В файле Markdown ( .md ) убедитесь, что пользовательский элемент обернут стандартным элементом HTML, например <section> или <div> :

Смешанный контент 

## Markdown section

* Markdown list
* [Markdown link](/foo)

## HTML section

<div>
<devsite-recommendations>
  <p>Note: link text is displayed when JavaScript is off</p>
  <h2>Sample heading</h2>
  <a href="/recommended">Recommended</a>
</devsite-recommendations>
</div>

Раздел уценки

HTML-раздел

Примечание. Текст ссылки отображается, когда JavaScript отключен.

Пример заголовка

Рекомендуется

Чистая уценка

<pre><devsite-recommendations>
## Sample heading

* Note: link text is displayed when JavaScript is off
* [Maps documentation](/maps/documentation)

</devsite-recommendations><pre>

Результат

{% дословно %} {% дословно %}

Пример заголовка

{% дословно %} {% дословно %}

Системные атрибуты

В настоящее время поддерживаются только атрибуты, предназначенные для управления поведением системы, и обычным пользователям они не нужны.

yield (необязательно). Если этот параметр указан, элемент будет уступать место любым другим непродуктивным элементам рекомендаций на странице. Обычно это используется самим сайтом для автоматического размещения рекомендаций на странице, но для их отображения только тогда, когда нет других экземпляров.

Фильтрация по номенклатуре

Разметка 

<devsite-recommendations query="k:language:typescript">
</devsite-recommendations>

Результат