想在 AMP 網頁上做華麗麗效果的我是否搞錯了什麼 - Meng-Ying Tsai

# 想在 AMP 網頁上做華麗麗效果的我是否搞錯了什麼 - Meng-Ying Tsai {%hackmd rG6pzIawQKe5cHU4rycgYg %} [課程簡報](http://slides.com/meng-yingtsai/amp-mopcon-2020) ## Preface 起因：Why AMP(Accelerated Mobile Pages)? 做個網站，什麼都好但就是沒有流量嘗試來做全站 AMP 化 ### 超快速的網頁效能 Bing/Google 會幫你 Serve cache 頁面！ ### 為什麼大家不來做呢？ - 框架限制大、導入成本高 - 使用者有很好體驗，但開發者經驗很糟 ### 為什麼 AMP 比較快？在 Critical Rendering Path上做各種優化 ~~限制東限制西~~ ## 來個空白的 AMP ```htmlembedded= <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>My first AMP Page</title> <link rel="canonical" href="https://your.site/path"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebPage", "name": "My first AMP Page", "description": "Put some description of the page here" } </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>My first AMP Page</h1> <p>Some content here!</p> </body> </html> ``` canonical 要做好 ```htmlembedded= <link rel="canonical" href="https://your.site/path">  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebPage", "name": "My first AMP Page", "description": "Put some description of the page here" } </script> ``` ### 如何確定我的 AMP 沒有問題？ - 使用 validation 工具 - Browser Developer Console - Browser Extension - VS Code extension https://amp.dev/#development=1 https://妳得網址/#development=1 1. 常見 Layouts - fixed - intrinsic - responsive - [Layout規範](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/) 2. ~~USE MSG~~ 改成 amp-img - AMP 不能使用 important!!!(直接避免Layout 被破壞ＸＤ - AMP 不允許外部 CSS(除 fontaswome google font) - 只允許一個 < style > tag 和 Inline CSS 3. 來點JavaScript? - AMP 不允許你隨心所欲地放自己的 Script - JS 必須改用 AMP 元件取代 - 2019 年推出的 amp-script 還是勉勉強強可以寫 script - 例：廣告 amp-ad、圖片輪播 amp-carousel - 用你想要操作的 DOM 加上 id - amp-bind - 先把對應 scr 放進來 - 透過改變 state 來製造充滿 interaction 的 AMP 網頁 - amp-form - form 有奇妙的 attr：action-xhr - 可以送 AJAX 的需求 - amp-list - 保證網頁資訊最新(更新 cache) - 如果沒有 amp-list 的話可能會因為他 click 下後商品就被下架了QAQ！~~商家會遇到大麻煩~~ [name=講者] - 記得先 require 對應的 script - src 指定從哪裡 fetch json 會把 template 裡的內容根據給的資料 render 出來 - 可參考 amp-mustache 語法大全 ### 沒有辦法用 amp-bind 及 amp-list 要怎麼辦例如：localStorage * amp-consent (小視窗) * amp-user-notification * amp-script - 透過允許部分 JS 豐富 amp 畫面 - 不超過 150 KB - Inline script + hash(content) ### 第三方 plugin 舉例 1. amp-iframe - amp-facebook - amp-Instagram - amp-Twitter 2. amp-bind-macro 神奇小工具 - JSON 資料有限制 ## 優點 VS 缺點優點： ？？？？？Vtuber鯊鯊：A～缺點：開發體驗糟(難客製化、難維護) ## AMP 未來？ Bento AMP 漸進式要推我們入坑 # 聊天區 >如果覺得聲音太小聲，可以在這裡跟我們反應喔~ > [name=Mopcon 工人] > 帶酒是為了避免睡覺 > 標題是想要去地下城探險嗎？XDDDDD > HaiYaaaaaaa！ > 需要貓貓 amp-cat > 講者還是別喝酒上場好了，這語速有點快XDDDD > 需要簡報輔助XD > Ｒ2會眾跑來湊熱鬧，R3講者喝酒上場？ > 我覺得有在寫前端/程式的大神語速都很快 > 突然覺得介紹到現在講者是在反推amp XDDDDD > (Q´ｪ`Q)<窩不知道 > 暨愛之則反之，我用amp所以我返amp > 講者怎麼開了一大堆分頁..... > ![](https://i.imgur.com/s5nv5U6.jpg) > 記憶體開始Haiyaaaaa > ↑蘋果會發光的MacBook很少見惹 > 講者真嗨XD嗑了什麼 > 以下開放提供講者解酒液 > 吼！偷要人ig！被抓到了吼！ > 抓到了！！！ > 需要IG網址,為了研究用途 > 為了介紹解酒液 ###### tags: `MOPCON 2020`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.