AMP

AMP 元件目錄

AMP HTML 程式庫包含一個基本執行階段環境,可將 AMP 的核心功能帶到您的網頁。如果您想要新增其他功能,可以使用一或多個隨時可用的 AMP 元件。它們被分類為

內建 包含在基礎程式庫中的元件,例如 amp-imgamp-pixel
擴充 基礎程式庫的擴充功能,必須以自訂元素的形式明確包含在文件中。
實驗性 已發布但尚未準備好廣泛使用的元件。

重點元件

依類別篩選

動態內容

amp-access-laterpay
允許發布商與 LaterPay 小額付款平台整合。
amp-access-poool
顯示 Poool 付費牆。
amp-access-scroll
與 Scroll 會員資格整合。
amp-access
提供 AMP 付費牆和訂閱支援。
amp-action-macro
建立可重複使用的動作。
amp-autocomplete
在使用者輸入時,建議與使用者輸入內容相對應的完整結果...
amp-bind
允許元素根據使用者動作或資料...產生變化。
amp-byside-content
顯示來自 BySide 服務的動態內容。
amp-consent
提供透過...收集和儲存使用者同意的功能。
amp-date-picker
提供用於選取日期的 widget。日期選取器可以呈現為...
amp-form
讓您可以在 AMP 文件中建立表單以提交輸入欄位。
amp-geo
提供大略的國家/地區層級地理位置介面。
amp-gist
建立 iframe 並顯示 GitHub Gist。
amp-google-document-embed
顯示 Google 雲端硬碟支援的文件檔案。
amp-img
取代 HTML5 img 標記。
amp-inputmask
為 AMP 表單中的輸入內容提供輸入遮罩功能
amp-install-serviceworker
為目前的頁面安裝 ServiceWorker。
amp-layout
通用、多用途的容器元素,可帶來 AMP 的...
amp-link-rewriter
允許發布商根據可設定的模式重寫 URL
amp-list
動態下載數據並使用範本建立清單項目。
amp-live-list
提供一種顯示和即時更新內容的方式。
amp-minute-media-player
顯示 Minute Media 播放器。
amp-mustache
允許轉譯 Mustache 範本。
amp-next-page
用於文件層級頁面推薦的無限捲動體驗。
amp-pixel
用於計算頁面瀏覽量的追蹤像素。
amp-recaptcha-input
將 reCAPTCHA v3 權杖附加到 AMP 表單提交。
amp-render
使用範本轉譯遠端或內嵌資料。
amp-script
在 Web Worker 中執行自訂 JavaScript。
amp-selector
代表一個控制項,其呈現選項選單並讓...
amp-smartlinks
在您的 AMP 頁面中執行 Narrativ 的 Linkmate 流程
amp-subscriptions-google
為「透過 Google 訂閱」實作訂閱樣式的存取協定。
amp-subscriptions
實作訂閱樣式的存取協定。
amp-user-notification
向使用者顯示可關閉的通知。
amp-video-docking
將影片最小化 ("dock") 至角落或...的功能。
amp-web-push
允許使用者訂閱網頁推播通知。

媒體

amp-3d-gltf
顯示 GL 傳輸格式 (gITF) 3D 模型。
amp-3q-player
嵌入來自 3Q SDN 的影片。
amp-anim
管理動畫圖片,通常是 GIF。
amp-apester-media
顯示 Apester 智慧單元。
amp-audio
取代 HTML5 音訊標籤。
amp-bodymovin-animation
顯示 AirBnB Bodymovin 動畫播放器。
amp-brid-player
顯示 Brid.tv 播放器。
amp-brightcove
顯示 Brightcove Video Cloud 或 Perform 播放器。
amp-connatix-player
顯示雲端託管的 Connatix 播放器。
amp-dailymotion
顯示 Dailymotion 影片。
amp-delight-player
amp-delight-player 元素顯示雲端託管的 Delight Player。
amp-embedly-card
顯示 Embedly 卡片。
amp-google-read-aloud-player
嵌入 Google 朗讀播放器。
amp-hulu
顯示嵌入的 Hulu 影片。
amp-ima-video
嵌入串流內影片廣告的影片播放器,已整合...
amp-imgur
顯示 Imgur 貼文。
amp-izlesene
顯示 Izlesene 影片。
amp-jwplayer
顯示雲端託管的 JW Player。
amp-kaltura-player
顯示 Kaltura Video Platform 中使用的 Kaltura 播放器。
amp-megaphone
顯示 Megaphone.fm 播客節目或播放清單。
amp-mowplayer
顯示雲端託管的 Mow Player。
amp-nexxtv-player
顯示來自 nexxOMNIA 平台的媒體串流。
amp-o2-player
顯示 AOL O2Player。
amp-ooyala-player
顯示 Ooyala 影片。
amp-playbuzz
顯示任何 Playbuzz 項目內容 (例如:列表、投票等)。
amp-powr-player
amp-powr-player 元件顯示 Powr Player...
amp-reach-player
顯示 Beachfront Reach 影片播放器。
amp-skimlinks
在您的 AMP 頁面中執行 skimlinks。
amp-soundcloud
顯示 Soundcloud 音訊片段。
amp-springboard-player
顯示 Springboard Platform 影片播放器。
amp-video-iframe
嵌入包含影片播放器的 iframe。
amp-video
取代 HTML5 影片標籤。
amp-vimeo
顯示 Vimeo 影片。
amp-viqeo-player
顯示 Viqeo 影片播放器。
amp-wistia-player
顯示 Wistia 影片。
amp-yotpo
嵌入 Yotpo 站內小工具。
amp-youtube
顯示 YouTube 影片。

呈現

amp-access-fewcents
允許發布商與 Fewcents 小額支付平台整合。
amp-animation
定義並顯示動畫。
amp-date-countdown
顯示到指定日期的倒數計時序列。
amp-date-display
amp-date-display 元件顯示您可以... 的時間資料
amp-dynamic-css-classes
在 <body> 元素上新增數個動態 CSS 類別名稱。
amp-fit-text
擴大或縮小字體大小,以符合給定空間內的內容。
amp-font
觸發並監控 AMP 頁面上自訂字型的載入。
amp-mathml
顯示 MathML 公式。
amp-pan-zoom
為任意內容提供縮放和平移功能。
amp-slikeplayer
顯示雲端託管的 Slike Player。
amp-timeago
透過將日期格式化為多久之前 (適用於... 提供模糊時間戳記
amp-truncate-text
使用省略符號截斷文字,可選擇性地顯示溢位元素。
amp-wordpress-embed
嵌入 WordPress 貼文。