• 网站

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 here。在官方 文档 上阅读有关调试 amp-geo 的更多信息

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

国家/地区分组

在这里，我们使用 amp-geo 分组功能来定义两个不同的 ISO 国家/地区代码组：一个用于踢足球的人，一个用于踢橄榄球的人。请注意，我们有一个包含“unknown”的组，该组位于 amp-geo 标记中：如果无法确定国家/地区，则该值设置为“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 集成

如果 AMPBind 密钥存在于 amp-geo json 配置中，则 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 类（使用以下 css 规则）向 EEA 内外的用户显示不同的消息

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