• 网站

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 国家/地区代码：一组用于踢足球的人，一组用于踢美式足球的人。请注意，我们在 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 规则向 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 撰写