AMP 元件目錄
AMP HTML 程式庫包含一個基本執行階段環境，可將 AMP 的核心功能帶到您的網頁。如果您想要新增其他功能，可以使用一個或多個現成的 AMP 元件來達成。它們被分類為
精選元件
依類別篩選
廣告與分析
amp-ad-custom
提供放送有效 AMPHTML 廣告的替代方式。
amp-ad-exit
為 AMPHTML 廣告的廣告結束提供可設定的行為。
amp-ad
用於顯示廣告的容器。
amp-analytics
從 AMP 文件擷取分析資料。
amp-auto-ads
透過使用…將廣告動態注入 AMP 頁面。
amp-call-tracking
動態取代超連結中的電話號碼以啟用來電追蹤。
amp-experiment
用於在 AMP 頁面上進行使用者體驗實驗。
amp-social-share
用法
amp-sticky-ad
提供在頁面底部顯示和固定廣告內容的方式。
amp-story-auto-analytics
自動產生故事的分析設定。
動態內容
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-mraid
支援在廣告網頁檢視中與 MRAID 主機 API 互動…
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-story-interactive
一組豐富的故事互動體驗，包括…
amp-subscriptions-google
為「透過 Google 訂閱」實作訂閱樣式的存取協定。
amp-subscriptions
實作訂閱樣式的存取協定。
amp-user-notification
向使用者顯示可關閉的通知。
amp-video-docking
將影片最小化 (“停靠”) 到角落或…的功能。
amp-web-push
允許使用者訂閱網站推播通知。
版面配置
amp-accordion
可堆疊的標題列表，用於摺疊或展開內容區塊...
amp-app-banner
跨平台固定位置的包裝函式和最小化 UI...
amp-base-carousel
沿水平方向顯示多個相似的內容片段...
amp-carousel
沿水平軸顯示多個相似的內容片段。
amp-fx-collection
提供預設視覺效果的集合，例如視差效果。
amp-fx-flying-carpet
將其子元素包裝在獨特的完整螢幕捲動容器中...
amp-iframe
顯示一個 iframe。
amp-image-lightbox
為指定的圖片提供燈箱效果。
amp-image-slider
用於比較兩張圖片的滑桿。
amp-inline-gallery
沿水平方向顯示多個相似的內容片段...
amp-lightbox-gallery
提供「燈箱」體驗。在使用者互動後，UI...
amp-lightbox
在全視窗「燈箱」模式中顯示元素。
amp-mega-menu
在可展開的容器內顯示頂層導覽內容。
amp-nested-menu
顯示具有任意層級巢狀子選單的鑽取式選單。
amp-orientation-observer
監控視窗內元素的方位，作為...
amp-position-observer
監控使用者在視窗內元素的位置，作為...
amp-sidebar
提供一種顯示旨在暫時使用的元內容的方式...
amp-stream-gallery
一次沿著...顯示多個相似的內容片段...
媒體
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 影片平台中使用的 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-story-360
嵌入 360 度圖片和影片，可透過陀螺儀或...瀏覽。
amp-story-panning-media
在頁面之間轉換圖片的位置和縮放。
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
將數個動態 CSS 類別名稱新增至 <body> 元素。
amp-fit-text
擴大或縮小字型大小以符合給定空間內的內容。
amp-font
觸發並監控 AMP 頁面上自訂字型的載入。
amp-mathml
顯示 MathML 公式。
amp-pan-zoom
為任意內容提供縮放和平移功能。
amp-slikeplayer
顯示雲端託管的 Slike Player。
amp-story-animation
用於在 amp-story 中設定自訂動畫的元件。
amp-story-audio-sticker
一個貼圖，供使用者點擊以取消故事靜音。
amp-story-auto-ads
動態地將廣告插入故事中。
amp-story-captions
自訂影片字幕渲染。
amp-story-cta-layer
AMP 故事單頁面中的單一層，允許...
amp-story-grid-layer
AMP 故事單頁面中的單一層，可定位其...
amp-story-page-outlink
用於在 AMP 故事頁面中一鍵開啟外部連結的 CTA 按鈕。
amp-story-page
AMP 故事的單一螢幕。
amp-story-player
一個播放器，用於在您的... 中嵌入和播放您最喜歡的故事。
amp-story-shopping
AMP 故事頁面中可設定、範本化的購物體驗。
amp-story-subscriptions
AMP 故事頁面中可設定、範本化的訂閱體驗。
amp-story
一種豐富、視覺化的故事敘述格式。
amp-timeago
透過將日期格式化為多久之前來提供模糊時間戳記（適用於...
amp-truncate-text
使用省略符號截斷文字，可選擇性地顯示溢位元素。
amp-wordpress-embed
嵌入 WordPress 文章。
社群