Laman » Mobile » 10 Komponen Pages Mudah Alih (AMP) Penting yang Harus Anda Ketahui
10 Komponen Pages Mudah Alih (AMP) Penting yang Harus Anda Ketahui
Laman Mudah Alih Dipercepat atau AMP adalah inisiatif Google untuk membuat web mudah alih lebih cepat. Untuk mencapai matlamat ini, piawaian AMP mengehadkan bagaimana anda boleh menggunakan HTML, CSS, dan JavaScript, dan menguruskan pemuatan sumber luaran, seperti imej, video dan iklan melalui runtime sendiri.
Ini memerlukan anda tidak boleh digunakan sama ada sebarang JavaScript (custom-written or third-party) atau elemen-elemen HTML yang berkaitan dengan sumber seperti imej dan video dalam dokumen AMP anda.
Untuk merapatkan jurang antara keperluan pengguna dan amalan prestasi terbaik, AMP mempunyai Komponen tertentu awak boleh gunakan pengganti unsur-unsur yang dikecualikan ini.
Komponen AMP adalah tag HTML khusus. Mereka berkelakuan sama dengan tag HTML biasa: mereka membuka dan menutup tag, atribut, dan kebanyakannya boleh dinamakan CSS. Mereka boleh dengan mudah dikenali, kerana mereka sentiasa bermula dengan amp- awalan.
Terdapat dua jenis Komponen AMP: terbina dalam dan dilanjutkan Komponen.
Komponen AMP Terbina Dalam
Terbina dalam dibina dalam runtime JavaScript AMP, jadi anda tidak perlu memasukkannya secara berasingan.
1. amp-img
menggantikan tag dalam dokumen HTML AMP. Anda perlu menambah src dan alt atribut seperti ketika anda bekerja dengan biasa elemen.
juga mempunyai dua sifat yang diperlukan: anda selalu perlu tentukan lebar dan ketinggian sifat-sifatnya dalam nilai piksel integer, kerana ini membolehkan runtuh AMP ke hitung susun atur terlebih dahulu.
Jika anda mahu membuat imej responsif, tambahkan layout = "responsive" atribut. The susun atur atribut mengawal susun atur dalam dokumen AMP, dan ia boleh ditambah kepada mana-mana Komponen AMP (ketahui lebih lanjut mengenai ini pada Sistem Layout AMP).
Anda juga boleh menggunakan srcset atribut pada tag kepada nyatakan imej yang berbeza untuk paparan viewport dan kepadatan piksel yang berbeza. Ia berfungsi dengan cara yang sama dengan imej bukan AMP.
2. amp-video
boleh digunakan untuk terus membenamkan video HTML dalam dokumen HTML AMP. Ia menggantikan dalam fail AMP. The tag malas memuatkan video untuk mengoptimumkan prestasi.
Sumber video itu mesti disampaikan melalui protokol HTTPS. Anda dikehendaki untuk menambah lebar dan ketinggian atribut, sama seperti dengan komponen.
The tag mempunyai banyak atribut pilihan, seperti autoplay dan poster yang anda boleh tentukan untuk menyempurnakan bagaimana video HTML5 anda dipaparkan.
menyokong mp4, webm, ogg, dan semua format lain yang disokong oleh HTML5
Jika anda mahu, anda juga boleh tambah video sandaran untuk pengguna dengan penyemak imbas yang tidak menyokong video HTML5, menggunakan belakang atribut dan Tag HTML.
Penyemak imbas anda tidak menyokong video HTML5.
3. amp-iklan dan amp-embed
menyediakan anda dengan kotak pasir iframe di mana anda boleh memaparkan iklan anda. Anda mesti menyampaikan iklan anda melalui protokol HTTPS.
Anda tidak boleh menjalankan skrip yang dibekalkan oleh rangkaian iklan anda sendiri. Sebaliknya, runtime AMP mengeksekusi JavaScript rangkaian yang diberikan di dalam kotak pasir. Anda hanya perlu menentukan rangkaian yang anda gunakan, dan tambahkan data anda.
The komponen memerlukan anda tambah dimensi iklan menggunakan lebar dan ketinggian sifat-sifatnya.
Anda boleh menentukan rangkaian iklan yang anda gunakan dengan jenis atribut. Lihat senarai rangkaian iklan yang disokong.
Setiap rangkaian iklan mempunyai sendiri data- * atribut yang anda juga perlu tambah. Untuk melihat mana yang anda perlukan, klik pada rangkaian iklan anda dalam senarai di atas.
adalah alias , dokumentasi tidak mengatakan banyak mengenainya selain itu boleh digunakan bukannya bila ia semantik lebih tepat. Memandangkan Google berjanji untuk mengembangkan komponen AMP berkaitan iklan dari masa ke masa, ini mungkin berubah pada masa akan datang.
4. amp-piksel
Dengan , awak boleh tambah piksel penjejakan kepada dokumen HTML AMP anda mengira pandangan halaman. Ia hanya mempunyai satu sifat, yang diperlukan src atribut, di mana anda perlu nyatakan URL kepunyaan piksel penjejakan.
The tag membenarkan penggantian URL standard, yang bermakna anda boleh menjana nilai URL rawak untuk menjejaki setiap kesan.
Lihat Panduan Penggantian URL AMP jika anda ingin menggunakan komponen ini. Perhatikan bahawa anda tidak boleh gaya komponen.
Komponen AMP yang dilanjutkan
Sebagai komponen AMP yang dilanjutkan bukan sebahagian daripada runtime JavaScript, anda sentiasa perlu mengimportnya di dalam bahagian halaman AMP yang anda ingin gunakan.
Nota: versi komponen mungkin berubah pada masa akan datang, jadi jangan lupa semak versi semasa dalam dokumentasi.
5. amp-audio
menggantikan Tag HTML5 dan membolehkannya terus membenamkan fail audio HTML5 dalam laman AMP.
Untuk menggunakannya, anda dikehendaki untuk menentukan src, lebar dan ketinggian atribut, dan anda juga boleh menambah tiga atribut pilihan: autoplay, gelung dan diredamkan.
Ia juga boleh menjadi idea yang baik tambah fail audio sandaran untuk pengguna dengan pelayar yang tidak menyokong HTML5. Anda boleh melakukan ini dengan menggunakan belakang atribut dan tag, sama seperti yang disebutkan di atas komponen.
The Komponen AMP menyokong format audio yang sama seperti Tag HTML5.
Penyemak imbas anda tidak menyokong audio HTML5.
Untuk menggunakan , termasuk skrip berikut dalam seksyen dokumen AMP anda:
6. amp-iframe
memaparkan iframe dalam dokumen AMP. telah dibuat untuk menjadi lebih selamat daripada iframes HTML biasa. Oleh itu, mereka dikosongkan secara lalai.
Terdapat beberapa peraturan yang berkaitan dengan anda mesti ikut untuk mengesahkan pengesahan.
Anda mesti nyatakan lebar, ketinggian, dan kotak pasir sifat-sifatnya. The kotak pasir atribut kosong secara lalai, tetapi anda boleh memberi nilai yang berbeza untuk mengubah tingkah laku iframe, contohnyasandbox = "allow-scripts"membolehkan JavaScript menjalankan iframe. Anda boleh menggunakan atribut iframes standard juga.
Walaupun dimensi ditetapkan oleh lebar dan ketinggian atribut, ada cara untuk mengubah saiznya semasa runtime. Untuk menggunakan komponen, tambahkan skrip berikut ke halaman AMP anda:
7. amp-akordion
Accordions membentuk corak UI yang kerap dalam reka bentuk mudah alih, kerana mereka menjimatkan ruang, tetapi masih memaparkan kandungan dalam cara yang mudah diakses. menjadikannya mungkin cepat tambah accordion ke halaman AMP.
Bahagian akordion mesti menggunakan Tag HTML5, dan perlu menjadi kanak-kanak langsung daripada tag.
Setiap bahagian mesti mempunyai dua kanak-kanak langsung:
satu untuk tajuk
satu untuk kandungan (kandungan juga boleh menjadi imej)
Menggunakan diperluaskan atribut pada mana-mana bahagian yang anda ingin berkembang secara lalai.
Seksyen 1
Kandungan Seksyen 1
Seksyen 2
Kandungan Seksyen 2
Seksyen 3
Imej untuk Seksyen 3
Untuk menggunakan komponen dalam dokumen AMP anda, masukkan skrip berikut:
8. amp-lightbox
menambah peti cahaya kepada elemen yang berbeza (dalam kebanyakan kes, imej) pada Laman Mudah Alih Dipercepat.
Apabila pengguna berinteraksi dengan elemen tersebut, contohnya paip di dalamnya, peti cahaya mengembang dan mengisi keseluruhan viewport. Anda perlu tambah butang atau kawalan lain yang pengguna boleh mengetuk.
Perhatikan bahawa amp-lightbox hanya boleh digunakan dengan nodisplay susun atur.
Untuk menggunakan komponen, anda perlu mengimportnya dengan kod berikut:
9. amp-carousel
Carousels sering digunakan dalam reka bentuk mudah alih, kerana ia membolehkan memaparkan pelbagai elemen yang serupa (imej yang paling kerap) di sepanjang paksi mendatar. Keputusan AMP juga dipaparkan dalam format karusel dalam Carian Google.
The komponen membolehkan anda menambah carousels ke laman web anda. The kanak-kanak langsung daripada komponen akan dianggap sebagai barang karusel. Anda mesti menentukan dimensi karusel dengan lebar dan ketinggian sifat-sifatnya.
Anda boleh menggunakan pilihan jenis atribut untuk menentukan bagaimana untuk mempamerkan barangan karusel. Sekiranya jenis atribut mengambil "karusel" nilai, item akan ditunjukkan sebagai jalur berterusan (ini adalah lalai), manakala yang "slaid" nilai akan memaparkan item dalam format slaid.
The tag juga mempunyai atribut pilihan lain yang dapat membantu anda menyempurnakan hasilnya.
Dalam contoh di bawah, perhatikan bahawa karusel dan semua itemnya gunakan yang sama lebar dan ketinggian nilai-nilai.
The komponen memerlukan penambahan skrip berikut:
10. amp-analytics
boleh digunakan untuk mengumpul data analisis pada halaman AMP. Pada masa ini, menyokong empat jenis peristiwa penjejakan, namun ini boleh berubah di masa depan:
Paparan
Klik Anchor
Pemasa
Bergulir
Untuk menggunakan , anda perlu tambah objek konfigurasi JSON di dalam a
Tambah skrip berikut kepada bahagian halaman HTML AMP anda untuk mengimport komponen:
Perkataan Akhir
Dalam jawatan ini, kami melihat semua komponen AMP terbina dalam, dan beberapa yang dilanjutkan. Memandangkan Laman Mudah Alih Dipercepat masih baru, banyak perkara yang boleh berubah pada masa akan datang, jadi ia bernilai untuk memerhatikan dokumentasi sama ada pada Github atau di laman rasmi AMP.
Oleh kerana komponen AMP ini adalah sumber terbuka, anda juga boleh menyumbang kepada pembangunan, walaupun mewujudkan komponen anda sendiri. Jika anda ingin melihat bagaimana halaman AMP yang lengkap kelihatan dengan komponen yang berbeza, anda boleh menyemak beberapa contoh di Github.
