建立第一個AMP頁面【ytkah英譯AMP-1】

時間 2020-06-19

標籤建立第一個 amp 頁面 ytkah英譯AMP-1 简体版

原文原文鏈接

想建立您的第一個AMP頁面又不知道如何開始?在本教程中，您將學習如何建立一個基本的AMP HTML頁面，如何對其進行設置並驗證它是否與AMP兼容，以及如何爲發佈和分發作好準備。html

Create your first AMP page
Not sure how to get started? In this tutorial, you’ll learn how to create a basic AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution.web

下面的代碼是一個不錯的amp樣板，能夠作爲學習的開始。複製並將其保存到擴展名爲.html的文件中。json

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

　　body正文中的內容很是簡單。可是在頁面的頭部有不少額外的代碼，這些代碼可能不會當即顯示出來。讓咱們來分析一下所需的標記。 app

　　使用HTTPS:在建立AMP頁面和內容時，應該強烈考慮使用HTTPS協議。雖然AMP文檔自己或圖像和字體不須要HTTPS，但有許多AMP特性須要HTTPS(例如，視頻、iframes等)。要確保您的AMP頁面充分利用全部AMP功能，請使用HTTPS協議。async

　　必需的標記：ide

以<!doctype html>爲開始標註html文檔類型
用<html ⚡>或<html amp>做爲最外層標籤，標識頁面爲AMP內容
包含<head>和<body>標籤，(在普通html是可選，但amp中必須包含head 和 body)
包含一個<meta charset="utf-8">標籤做爲head標籤的第一個子標籤。表示標識頁面的編碼。
包含一個<script async src="https://cdn.ampproject.org/v0.js"></script>標籤在head標籤中。做爲一種最佳實踐，您應該儘量早地將該腳本引入其中。做用是引入和加載AMP JS庫。
在head中包含一個<link rel="canonical" href="$SOME_URL">標籤，指向AMP HTML文檔的常規HTML版本，或指向自身(若是沒有這樣的HTML版本存在)。ytkah的理解：canonical是惟一頁面url標識，防止由於url中帶參數而引發的重複頁面
在head中包含<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">標籤，咱們建議包含initial-scale=1。表示頁面自適應。
在head中包含AMP樣板代碼。CSS樣板，最初隱藏內容，直到AMP JS加載。

　　可選的標記佈局

　　除了基本的需求以外，咱們的示例還在頭部包含一個Schema.org定義，這不是AMP的嚴格要求，但若是想要將內容分發到某些位置(例如，在谷歌搜索頭部的花燈切換故事)則須要加這些標記。學習

　　很好!這就是咱們建立第一個AMP頁面所須要的一切，可是固然，在body中尚未進行不少工做。在下一節中，咱們將介紹如何添加基本的像圖像，自定義AMP元素，如何自定義樣式你的頁面和做出一個響應式佈局。引入圖片amp-img【英譯AMP】字體

　　參考資料https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websitesui