Widgets: recomendações

O elemento personalizado <devsite-recommendations> pode ser usado para fornecer recomendações de conteúdo aos seus leitores. Você pode permitir que o sistema gere recomendações, fornecer recomendações explícitas ou unir seções de recomendações existentes do seu documento para obter uma apresentação consistente, estatísticas de cliques e uma interface do usuário avançada (incluindo descrições e imagens).

Uso

Para usar esse widget, crie um elemento <devsite-recommendations>. Se você quiser fornecer recomendações explicitamente, adicione alguns links no elemento. No momento, as recomendações geradas pelo sistema são fornecidas quando o elemento está vazio, mas o trabalho futuro vai permitir que os autores testem as recomendações geradas quando as explícitas forem fornecidas, além de usá-las como entradas para o algoritmo.

Se você estiver fornecendo recomendações explícitas, coloque alguma marcação dentro do elemento. Todas as tags <a> detectadas quando o elemento estiver conectado terão os atributos href extraídos e usados para as recomendações.

Se você fornecer mais de três recomendações, uma seleção aleatória será escolhida. No entanto, a ordem das recomendações será a mesma da entrada, então as recomendações com prioridade mais alta sempre vão aparecer à esquerda.

Se você não quiser que recomendações específicas apareçam nos resultados gerados, crie um elemento <devsite-recommendations> vazio com um conjunto de <link rel="disallow" href="/path">. Todas as tags <link> com rel=disallow e um atributo href serão automaticamente detectadas e removidas das recomendações geradas.

Se você quiser apenas recomendações de um subconjunto específico de páginas, use as tags Nomenclature em um campo query para filtrar os resultados. A sintaxe é k:category:value. Por exemplo, k:language:typescript. A lista de tags pode ser uma lista separada por vírgulas (k:language:typescript,k:language:swift) para incluir páginas que contenham qualquer uma das tags.

As seções a seguir descrevem a marcação, como ela é renderizada em condições normais e como é renderizada em máquinas ou user agents simples.

Marcação

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

Resultado

User agents simples

Observação: o texto do link aparece quando o JavaScript está desativado.

Exemplo com "não"

Marcação

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

Resultado

Como os resultados dependem das recomendações, que podem mudar, a saída vai ser igual à do modelo de recomendações.

Encapsulamento de conteúdo atual

O elemento pode aprimorar progressivamente a marcação existente nas suas páginas. Assim, você pode fazer upgrade dos links existentes envolvendo-os com <devsite-recommendations>.

Os novos links vão adotar toda a funcionalidade e as políticas da plataforma de recomendação, como a coleta de dados e painéis de experimentos. No entanto, o conteúdo também será substituído por metadados avançados, incluindo descrições e imagens, e poderá excluir alguns links (por exemplo, com acesso controlado ou páginas sem metadados).

Marcação

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

Resultado

Exemplos de comunidades

Observação: todas as marcações aqui serão substituídas pela interface de recomendação.

Para mais informações sobre o Google Developers, confira os GDEs. Se Como você quer formar uma comunidade, consulte os Meetings. Por fim, se você estiver estudando, não perca nossos DSCs.

Uso em arquivos Markdown

Em um arquivo Markdown (.md), verifique se o elemento personalizado está unido a um elemento HTML padrão, como <section> ou <div>:

Conteúdo misto

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

Seção Markdown

Seção HTML

Observação: o texto do link aparece quando o JavaScript está desativado.

Exemplo de título

Recomendado

Markdown puro

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

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

</devsite-recommendations><pre>

Resultado

Exemplo de título

Atributos do sistema

No momento, os únicos atributos compatíveis são para controlar o comportamento do sistema e não são necessários para usuários normais.

yield (opcional) Se fornecido, o elemento se renderá a qualquer outro elemento de recomendação que não produza na página. Normalmente, esse recurso é usado pelo próprio site para inserir recomendações automaticamente em uma página, mas apenas para mostrá-las quando não há outras instâncias presentes.

Como filtrar com nomenclatura

Marcação

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

Resultado