標籤: AMP 頁1

教學

[AMP] 使用 amp-form 傳遞表單資料

在 AMP 的頁面內要傳遞表單資料的話,要先讀入 amp-form 的 js 後才能使用 form 來傳遞資料。

教學

[AMP] 製作下拉選單選擇後頁面跳轉的效果

說明如何在 AMP 的頁面製作切換下拉選單後的換頁功能。

教學

[AMP] 在頁面上添加社群分享連結按鈕

說明如何在 AMP 頁面加上社群分享按鈕。

教學

[AMP] 點擊按鈕與內容複製功能

說明如何在 AMP 的頁面使用點擊按鈕複製功能。

教學

[AMP] 使用 amp-date-display 來顯示與取得時間

AMP 本身也有提供現成的時間顯示功能 amp-date-display ,可以參考官方的說明來設置。

教學

[AMP] 圖片輪播功能- amp-carousel

說明在 AMP 內使用圖片輪播功能 amp-carousel 的方法。

教學

[AMP] 使用 amp-bind 來製作切換 class name 的功能

在 AMP 內透過 amp-bind 的方法來切換 class name。

教學

在 amp-img 使用 object-fit

之前有提過要在 AMP 裡面使用圖片必須要使用 amp-img 的標籤,而且需要給定寬跟高,但在現在很常需要用到裡用把圖片塞入某個區塊內的 object-fit 的方式,就沒辦法直接用了,但還好官方也有提供方法讓我們可以去使用 object-fit,可以參考以下做法。

網路資源

The AMP Validator- 驗證 AMP 網頁設置是否成功的線上工具

AMP 是一種由 google 推出的可以加速手機網站開發的網站格式(框架),在 AMP 設置完後,會需要透過這個 The AMP Validator 去驗證設置是否正確,只要簡單輸入網址並按下驗證即可。

教學

使用 amp-img 標籤讀入圖片

要在 AMP 的頁面裡放入圖片,要使用 amp-img 的標籤。

教學

AMP 網頁開發介紹與基本設定

AMP 是 google 提出的行動裝置網頁開發的方法,全名為 Accelerated Mobile Pages,照字面意思可以知道是用來加速行動裝置的網頁開啟速度,由於目前網頁設計越來越複雜,若使用 RWD 的方法製作行動裝置版並無法加速網頁的開發速度,反而大多數狀況是會讓開啟的速度變慢,如果想要讓使用者有更好的體驗,就可以使用 AMP 的方式。