新闻文章
- 简介设置元数据社交分享广告支持图片库交互式内容嵌入相关内容 Cookie 同意用户分析

网站

新闻文章

简介

这是一个 AMP 新闻文章的示例模板。它演示了 AMP 组件在新闻文章中的良好使用。示例包括社交分享、图片库、个性化内容、广告等。

设置

所有额外使用的 AMP 组件必须在头部导入。导入 amp-social-share 以添加分享按钮

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

导入 amp-iframe 以嵌入交互式图表

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

导入 amp-carousel 以实现图片库

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

导入 amp-user-notification 以显示 Cookie 通知

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

导入 amp-list 以获取最新的相关文章列表

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

导入 amp-mustache 作为 amp-list 的格式模板

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

导入 amp-analytics 以跟踪使用情况

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

导入 amp-ad 以显示广告

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

元数据

“热门新闻”轮播需要以下类型之一的 schema.org 标记：Article、NewsArticle、BlogPosting 或 VideoObject。了解更多。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "https://amp.org.cn/samples_templates/news_article/",
"headline": "Lorem Ipsum",
"datePublished": "2016-04-21T11:55:02Z",
"dateModified": "2016-04-21T11:55:02Z",
"description": "A sample news article build with AMP.",
"author": {
  "@type": "Person",
  "name": "Sebastian Benz"
},
"publisher": {
  "@type": "Organization",
  "name": "Google",
  "logo": {
    "@type": "ImageObject",
    "url": "http://cdn.ampproject.org/logo.jpg",
    "width": 600,
    "height": 60
  }
},
"image": {
  "@type": "ImageObject",
  "url": "/static/samples/img/landscape_lake_1280x857.jpg",
  "height": 1280,
  "width": 857
}
}
</script>

社交分享扩展为分享按钮提供了一个通用接口。在此处了解有关 amp-social-share 的更多信息：此处。

<p class="heading">
<amp-social-share type="twitter" width="45" height="33"></amp-social-share>
<amp-social-share type="facebook" width="45" height="33" data-attribution="254325784911610"></amp-social-share>
<amp-social-share type="gplus" width="45" height="33"></amp-social-share>
<amp-social-share type="email" width="45" height="33"></amp-social-share>
<amp-social-share type="pinterest" width="45" height="33"></amp-social-share>
</p>

广告支持

AMP 中广告的数量或位置没有限制。在此处了解有关 amp-ad 的更多信息：此处。

<div class="amp-ad-container">
  <amp-ad width="300" height="250" type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  </amp-ad>
</div>

图片库

使用 amp-carousel 创建图片库。在此处了解有关在 AMP 中创建图片库的更多信息：此处。

每张图片都有不同的标题。

此标题不同。

第三张图片有其标题。

<amp-carousel width="1280" height="1000" layout="responsive" type="slides">
  <figure class="figure">
    <amp-img src="/static/samples/img/landscape_lake_1280x857.jpg" width="1280" height="857" layout="responsive"></amp-img>
    <figcaption>Each image has a different caption.</figcaption>
  </figure>
  <figure class="figure">
    <amp-img src="/static/samples/img/landscape_village_1280x853.jpg" width="1280" height="853" layout="responsive"></amp-img>
    <figcaption>This caption is different.</figcaption>
  </figure>
  <figure class="figure">
    <amp-img src="/static/samples/img/landscape_desert_1280x853.jpg" width="1280" height="853" layout="responsive"></amp-img>
    <figcaption>The third image has its caption.</figcaption>
  </figure>
</amp-carousel>

交互式内容

为了实现其性能，AMP HTML 不允许自定义 Javascript。但这并不意味着您无法使用 AMP 创建视觉丰富且具有交互性的网站。通过 amp-iframe 嵌入交互式内容。在此处了解有关 amp-iframe 的更多信息：此处。

AMP 中的交互式图表！

<figure class="figure">
  <amp-iframe src="https://www.google.us/trends/embed/US_cu_82I1CVMBAACV6M_en/horserace_chart_3c6cdb21-e1eb-4412-9c28-707c3638ea35?hl=en&template=fe" title="Interactive chart displaying 2016 Oscar Best Picture search interest by date" height="360" layout="fixed-height" frameborder="0" sandbox="allow-scripts allow-same-origin">
    <amp-img src="/static/samples/img/oscars_placeholder_1.png" layout="fixed-height" height="360" width="auto" placeholder>
    </amp-img>
  </amp-iframe>
  <figcaption>An interactive chart - in AMP!</figcaption>
</figure>

向读者推荐相关内容是个好主意。使用 amp-list 可以将个性化内容动态包含到您的 AMP 中。链接到相关内容的 AMP 版本是一个好主意，以保持用户在快速的 AMP 世界中。在此处了解有关 amp-list 的更多信息：此处

<amp-list width="300" height="75" layout="responsive" src="/static/samples/json/related_articles.json" binding="no">
  <template type="amp-mustache">
    <a class="related" href="{{url}}"><amp-img width="101" height="75" src="{{thumbnail}}"></amp-img><span>{{title}}</span></a>
  </template>
</amp-list>

使用 amp-user-notification 实现 Cookie 同意表单（如果需要）。默认情况下，AMP 运行时不使用 Cookie。但是，某些分析供应商可能会要求使用 Cookie。在此处了解有关 amp-user-notification 的更多信息：此处

<amp-user-notification class="cookie-disclaimer" layout="nodisplay" id="amp-user-notification1">
  This page might use cookies if your analytics vendor requires them.
  <button on="tap:amp-user-notification1.dismiss">Accept</button>
</amp-user-notification>

用户分析

必须在主体中配置分析。在这里，我们使用 Google Analytics 来跟踪页面浏览量。

<amp-analytics type="googleanalytics">
  <script type="application/json">
{
    "vars": {
      "account": "UA-73836974-1"
    },
    "triggers": {
      "default pageview": {
        "on": "visible",
        "request": "pageview",
        "vars": {
          "title": "{{title}}"
        }
      }
    }
  }
  </script>
</amp-analytics>

需要进一步解释？

如果此页面上的解释不能涵盖您的所有问题，请随时与其他 AMP 用户联系，以讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

由 @aghassemi 撰写

新闻文章

简介

设置

元数据

社交分享

广告支持

图片库

交互式内容

嵌入相关内容

Cookie 同意

用户分析