AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

新聞文章

檢視示範 在 Playground 中開啟

簡介

這是 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>

Metadata

熱門新聞輪播需要 schema.org 標記，類型如下：Article、NewsArticle、BlogPosting 或 VideoObject。瞭解詳情。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "https://amp.dev.org.tw/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>

如果需要實作 Cookie 同意聲明表單，請使用 amp-user-notification。根據預設，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 上編輯範例