微件：推荐

<devsite-recommendations> 自定义元素可用于向读者提供内容推荐。您可以让系统生成建议，自行提供明确的建议，也可以封装文档中现有的建议部分，以实现一致的呈现、点击统计信息和丰富的界面（包括说明和图片）。

用法

如需使用此 widget，请创建一个 <devsite-recommendations> 元素。如果您希望明确提供建议，请在 元素内添加一些链接。目前，系统会在 元素为空时提供系统生成的推荐，但后续的工作将允许作者在提供显式推荐时对生成的推荐进行实验，并将其用作算法的输入。

如果您要提供明确的推荐，请在 元素内提供一些标记。在元素连接时检测到的任何 <a> 标记都将提取其 href 属性，并将其用于推荐。

如果您提供的建议超过三个，系统会随机选择一项。不过，推荐内容的顺序与输入内容的顺序相同，因此优先级较高的建议将始终显示在最左侧。

如果您不希望在生成的结果中显示特定推荐内容，则可以创建一个包含 <link rel="disallow" href="/path"> 集合的空 <devsite-recommendations> 元素。系统会自动检测任何带有 rel=disallow 和 href 属性的 <link> 标记，并将其从生成的建议中移除。

如果您只想获得来自特定网页子集的建议，可以在 query 字段中使用命名法标记来过滤结果。语法为 k:category:value。例如，k:language:typescript。标记列表可以是逗号分隔列表 (k:language:typescript,k:language:swift)，以包含含有任何标记的网页。

以下各部分介绍了标记、标记在正常条件下的呈现方式以及呈现给机器或简单的用户代理。

Markup

<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 处于关闭状态时，系统会显示链接文字

禁止操作示例

Markup

<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> 封装现有链接，从而升级这些链接。

新链接将采用推荐平台的所有功能和政策，例如数据收集和实验信息中心，但其内容也将替换为丰富的元数据（包括说明和图片），并且可能会排除某些链接（例如访问权限控制或不含元数据的网页）。

Markup

<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 Developers，请查看我们的 GDE。如果 如果您想组建社区，请参阅 Google 开发者社区。最后，如果 千万不要错过我们的 DSC。

Markdown 文件中的使用

在 Markdown (.md) 文件中，确保自定义元素已使用 <section> 或 <div> 等标准 HTML 元素封装：

混合内容

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

Markdown 部分

HTML 部分

注意：当 JavaScript 处于关闭状态时，系统会显示链接文字

示例标题

建议

纯 Markdown

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

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

</devsite-recommendations><pre>

结果

示例标题

  • 注意：当 JavaScript 处于关闭状态时，系统会显示链接文字
  • Google 地图文档
。

系统属性

目前仅支持用于控制系统行为的属性，普通用户不需要这些属性。

yield （可选） 如果已提供，则该元素将退给页面上的任何其他非收益推荐元素。网站本身通常使用该策略在网页上自动放置推荐内容，但只有在没有其他实例时才显示推荐信息。

使用命名法进行过滤

Markup

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

结果