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
允許發布商根據可設定的模式來重新編寫網址
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
跨平台、固定位置的包裝函式和最小使用者介面…
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 audio 標籤。
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 播放器。
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 video 標籤。
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 貼文。
社群