• 网站

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。请在官方 doc 上阅读有关调试 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 集成

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

<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 规则）向欧洲经济区内外的用户显示不同的消息

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

然后，我们可以使用它向欧洲经济区内外的用户显示不同的消息

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

• 由 @kul3r4 撰写