• 网站

amp-geo

简介

amp-geo 扩展允许根据用户所在国家/地区的近似位置（类似于 ISO 国家/地区代码级别）来更改一小部分内容。 amp-geo 组件还提供了一种简单的机制来对位置进行分组，从而更容易一次将属性应用于多个地理位置。

设置

导入 amp-geo 组件。

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

基本用法

amp-geo 组件通过 json 配置，每个页面只能包含一个 amp-geo 标签。我们在此页面上展示了 amp-geo 的不同示例，并且我们将解释每个示例的 json 配置。

<amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true,
        "ISOCountryGroups": {
          "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
          "football": [ "unknown" ],
          "eea": [ "preset-eea" ]
        }
      }
    </script>
  </amp-geo>

amp-geo 提供了一个类 amp-iso-country-XX，其中 XX 是 ISO 国家/地区代码。在以下示例中，该组件确定与用户大致位置对应的 ISO 国家/地区代码。如果此代码是“ca”（加拿大），则页面会显示枫叶旗，否则会显示美国国旗。对于测试，如果要强制将国家/地区设置为加拿大，则可以将 #amp-geo=ca 附加到 URL，例如 https://amp.org.cn/documentation/examples/components/amp-geo#amp-geo=ca 并在此处启用 beta-channel。在官方文档上阅读有关调试 amp-geo 的更多信息

<div class="flag"></div>

国家/地区分组

这里我们使用 amp-geo 分组功能来定义两个不同的 ISO 国家/地区代码组：一组给踢足球的人，另一组给踢橄榄球的人。请注意，我们有一个组在 amp-geo 标签中包含“unknown”：如果无法确定国家/地区，则该值设置为“unknown”。将分组功能与 amp-geo 结合使用时，至少一个组必须包含“unknown”。使用分组时，amp-geo 提供了一个类 amp-geo-group-XX，其中 XX 是由 amp-geo 确定的组的名称。

<p>The game is called <span class="football"></span></p>

与 amp-bind 集成

如果 amp-geo json 配置中存在 AMPBind 键，则 amp-geo 会插入一个 amp-state 标签，其中包含当前的 ISOCountry 和组信息。

<button on="tap:AMP.setState({ showLocation: true })">Where am I?</button>
<p hidden [hidden]="!showLocation">ISOCountry Code: <span [text]="ampGeo.ISOCountry"></span></p>
<p hidden [hidden]="!showLocation">Matched Country Groups: <span [text]="ampGeo.ISOCountryGroups.join(', ')"></span></p>

预设国家/地区组

amp-geo 支持特定区域的预设国家/地区列表。例如，欧洲经济区 (EEA) 有一个预设 preset-eea，我们将其分配给名为 eea 的 ISOCountryGroup

 "ISOCountryGroups": {
    "eea": [ "preset-eea" ],
    ...
 }

在此示例中，我们根据 body 标签中是否存在 amp-geo-group-eea 类，向 EEA 内外的用户显示不同的消息，使用以下 CSS 规则

 body.amp-geo-group-eea .message-non-eea,
 body:not(.amp-geo-group-eea) .message-eea {
   display: none;
 }

然后我们可以使用它向 EEA 内外的用户显示不同的消息

<p class="message-eea">You're in the EU.</p>
<p class="message-non-eea">You're outside the EU.</p>

• 作者： @kul3r4