Homepage » Mobil » 10 Fontos gyorsított mobil oldalak (AMP) összetevői, amelyeket tudnia kell
10 Fontos gyorsított mobil oldalak (AMP) összetevői, amelyeket tudnia kell
Gyorsított mobil oldalak vagy AMP a Google kezdeményezése a mobilhálózat gyorsabbá tétele. E cél eléréséhez az AMP szabványok korlátozzák a HTML, CSS és JavaScript használatának módját kezeli a külső erőforrások betöltését, például képek, videók és hirdetések saját futási idején keresztül.
Ez azt jelenti, hogy Ön nem használható vagy bármilyen egyedi (szerző által írt vagy harmadik féltől származó) JavaScript vagy bármilyen erőforráshoz kapcsolódó HTML elem, mint például a képek és videók az AMP dokumentumokban.
A felhasználói igények és a legjobb teljesítmény-gyakorlatok közötti szakadék áthidalására az AMP rendelkezik meghatározott összetevők tudsz használata a kizárt elemek helyett.
Az AMP komponensek speciális HTML-címkék. A szokásos HTML-címkékhez hasonlóan viselkednek: nyitó- és zárócímkékkel, attribútumokkal rendelkeznek, és a legtöbbjük CSS-sel formázható. Könnyen felismerhetők, ahogyan ezek is mindig a amp- előtag.
Az AMP komponensek két típusa létezik: beépített és kiterjedt Alkatrészek.
Beépített AMP komponensek
Beépített inek beépítettek az AMP JavaScript futási idejébe, így nem kell külön-külön felvennie őket.
1. amp-img
helyettesíti a címke az AMP HTML dokumentumokban. Hozzá kell adnia a src és alt attribútumok éppen úgy, mintha a rendszeres munkával dolgoznának elem.
két további szükséges attribútummal is rendelkezik: mindig kell adja meg a szélesség és magasság attribútumok egész pixel értékekben, mivel ez lehetővé teszi az AMP futási idejét kiszámítsa az elrendezést előre.
Ha akarod hogy a kép érzékeny legyen, adja hozzá a layout = "reagáló" tulajdonság. A elrendezés tulajdonság vezérli az elrendezést az AMP dokumentumokban, és hozzáadható bármely AMP összetevőhöz (erről többet megtudhat az AMP elrendezési rendszeren).
Használhatja a srcset attribútum a címke különböző képeket adhat meg különböző nézetablakokhoz és pixel-sűrűségekhez. Ugyanúgy működik, mint a nem AMP képeknél.
2. amp-video
lehet használni közvetlenül beágyazza a HTML videókat az AMP HTML dokumentumokban. Ez helyettesíti a AMP fájlokban. A címke lusta betölti a videókat a teljesítmény optimalizálása érdekében.
A videó forrása a HTTPS protokollon keresztül kell kézbesíteni. Meg kell adnia a szélesség és magasság attribútumok, mint a összetevő.
A a címke számos opcionális attribútummal rendelkezik, például automatikus lejátszás és poszter amit megadhat, hogy finomhangoljon a HTML5 videó megjelenítésének módja.
támogatja a mp4, webm, ogg és a HTML5 által támogatott összes többi formátumot
Ha akarod, akkor is adj hozzá tartalék videókat a felhasználók számára olyan böngészőkkel, amelyek nem támogatják a HTML5 videókat a üzemszüneti attribútum és a HTML címke.
A böngészője nem támogatja a HTML5 videókat.
3. amp-ad és amp-embed
biztosítja iframe homokozó amelyben lehet jelenítse meg hirdetéseit. Meg kell szolgáltatnia hirdetéseit a HTTPS protokollon keresztül.
Ön nem tudja futtatni a hirdetési hálózat által biztosított szkriptet. Ehelyett az AMP futási ideje végrehajtja az adott hálózat JavaScript-jét a homokozóban. Ön csak meg kell adnia, hogy melyik hálózatot használja, és adjunk hozzá adatokat.
A a komponens megköveteli adjon hozzá a hirdetés méreteit használni a szélesség és magasság attribútumok.
Megadhatja, hogy mely hirdetési hálózatot használja a típus tulajdonság. Lásd a támogatott hirdetési hálózatok listáját.
Minden hirdetési hálózatnak van sajátja adat-* attribútumokat is hozzá kell adnia. Ha meg szeretné tekinteni, hogy melyikre van szüksége, kattintson a hirdetési hálózatra a fenti listában.
a , a dokumentáció nem sokat szól róla, mint amennyit csak használhat ha ez szemantikailag pontosabb. Mivel a Google megígéri, hogy a hirdetéssel kapcsolatos AMP-összetevők idővel fejlődnek, ez a jövőben változhat.
4. amp pixeles
Val vel , tudsz nyomkövetési pixel hozzáadása az AMP HTML dokumentumaihoz számláljon oldalnézetet. Csak egy attribútummal rendelkezik, a szükséges src attribútum, amelyben meg kell adja meg a követési pixelhez tartozó URL-t.
A címke engedélyezi szabványos URL-helyettesítések, ami azt jelenti, hogy lehet véletlen URL-érték létrehozása nyomon követheti az egyes benyomásokat.
Ha szeretné használni ezt az összetevőt, lásd az AMP URL helyettesítési útmutatóját. Ne feledje, hogy nem tudod a stílustípust stílusozni összetevő.
Kiterjesztett AMP komponensek
Mint kiterjesztett AMP komponensek nem része a JavaScript futási idejének, Ön mindig importálnia kell őket ban,-ben az AMP oldal azon részén, amelyen használni kívánja.
Megjegyzés: a komponensek változatai a jövőben változhatnak, ezért ne felejtsük el ellenőrizze az aktuális verziót dokumentációban.
5. amp-audio
helyettesíti a HTML5 címke, és lehetővé teszi közvetlenül beágyazza a HTML5 hangfájlokat AMP oldalakon.
Használatához meg kell adnia a src, szélesség és magasság attribútumok, és három választható attribútumot is hozzáadhat: automatikus lejátszás, hurok és tompított.
Jó ötlet is lehet adjunk hozzá tartalék audio fájlokat olyan felhasználók számára, akik nem támogatják a HTML5-t. Ezt a üzemszüneti attribútum és a a fentiekhez hasonlóan összetevő.
A Az AMP összetevő ugyanazokat a hangformátumokat támogatja, mint a HTML5 címke.
A böngészője nem támogatja a HTML5 hangot.
Használni , a következõ szkriptet a AMP-dokumentumának része:
6. amp-iframe
megjeleníti az iframe-t az AMP dokumentumokban. biztonságosabb, mint a hagyományos HTML iframes. Ezért vannak alapértelmezés szerint homokozó.
Néhány szabály kapcsolatban áll követnie kell az érvényesítést.
Meg kell adnia a szélesség, magasság, és sandbox attribútumok. A sandbox Az attribútum alapértelmezés szerint üres, de különböző értékeket adhat meg módosítsa az iframe viselkedését, példáulsandbox = "allow-scriptek"lehetővé teszi az iframe JavaScript futtatását. Használhatja a szabványos iframes attribútumokat is.
Míg a méretei a szélesség és magasság attribútumok, a módja annak, hogy átméretezhető legyen a futási idő alatt. A összetevő, adja hozzá az alábbi parancsfájlt az AMP oldalához:
7. amp-harmonika
harmonikák a mobil tervezésben gyakori UI-mintát képez, mivel helyet takarítanak meg, de mégis hozzáférhető módon jelenítik meg a tartalmat. lehetővé teszi gyorsan hozzáadhat harmonikákat AMP oldalakra.
A harmonika szekcióinak használnia kell a HTML5 címke, és az kell közvetlen gyerekek a címke.
Minden szakasz két közvetlen gyermeknek kell lennie:
az egyik a címsorhoz
az egyik a tartalomhoz (a tartalom is kép lehet)
Használja a kiterjesztett attribútum minden olyan részen, amelyet alapértelmezés szerint bővíteni kíván.
1. szakasz
Az 1. szakasz tartalma
2. szakasz
A 2. szakasz tartalma
3. szakasz
Kép a 3. szakaszhoz
A az AMP-dokumentumban szereplő összetevő, a következő szkriptet tartalmazza:
8. amp-albumba
hozzáad egy lightboxot különböző elemek (legtöbb esetben képek) a gyorsított mobil oldalakon.
Amikor a felhasználó interakcióba lép az elemgel, például a rajta lévő csapokkal, akkor a lightbox kiterjeszti és kitölti a teljes nézetablakot. Neked kell hozzáad egy gombot vagy egy másik vezérlést amit a felhasználó megérinthet.
Vegye figyelembe, hogy amp-albumba csak a nodisplay elrendezés.
A az alábbi kóddal kell importálnia:
9. amp-körhinta
A karusszeleket gyakran használják a mobil tervezésben, amint azt lehetővé teszik számos hasonló elemet jelenít meg (leggyakrabban képek) a vízszintes tengely mentén. Az AMP-eredményeket szintén karusszel formátumban mutatják be a Google Search-ben.
A összetevő lehetővé teszi, hogy karusszeleket adjon hozzá a webhelyéhez. A közvetlen gyerekek a komponensnek tekintendő a körhinta elemei. Meg kell határoznia a körhinta méretét a szélesség és magasság attribútumok.
Használhatja az opcionális típus attribútum hogyan lehet megjeleníteni a körhinta elemeket. Ha a típus az attribútum a "körhinta" értéke, az elemek meg fognak jelenni folyamatos szalagként (ez az alapértelmezett), míg a „Diák” Az érték megjeleníti az elemeket Dia formátumban.
A a címke más opcionális attribútumokkal is rendelkezik, amelyek segítenek az eredmény finomhangolásában.
Az alábbi példában vegye figyelembe, hogy mind a körhinta, mind az összes elem használja ugyanazt szélesség és magasság értékeket.
A az összetevő megköveteli a következő szkript hozzáadását:
10. amp-analitika
lehet használni gyűjteni az elemzési adatokat AMP oldalakon. jelenleg, négyféle követési eseményt támogat, ez azonban változhat a jövőben:
Lapnézet
Horgonyos kattintások
Időzítő
Gördülő
Használni , neked kell adjunk hozzá egy JSON konfigurációs objektumot belül a
Adja hozzá a következő parancsfájlt a az AMP HTML oldalának szakaszát a összetevő:
Végső szavak
Ebben a bejegyzésben minden beépített AMP összetevőt, és néhány kiterjesztettet nézett. Mivel a gyorsított mobil oldalak még mindig újak, sok minden megváltozhat a jövőben, ezért érdemes szemügyre venni a dokumentációt a Githubon vagy a hivatalos AMP oldalon..
Mivel ezek az AMP komponensek nyílt forráskódúak, Ön is hozzájárulhat a fejlesztéshez saját összetevő létrehozása. Ha azt szeretné látni, hogy a teljes AMP oldal hogyan néz ki a különböző összetevőkkel, nézze meg ezeket a néhány példát a Githubon.
