amp-dynamic-css-classes
AMP CSS dinamis yang disediakan oleh tag kelas amp-dynamic-css-classes memungkinkan logika untuk beberapa kondisi
Cara Penambahannya
Masukkan komponen amp-dynamic-css-classes tepat setelah pembukaan <head>
Untuk tujuan contoh ini, Anda telah membuat beberapa kelas CSS tambahan yang menggunakan aturan CSS yang didefinisikan oleh amp-dynamic-css-class. Ini memungkinkan kami untuk merujuk secara lebih ringkas ke kondisi dalam kode kami di bawah ini.
Tidak perlu menyertakan panggilan ke komponen amp-dynamic-css-class untuk menginisialisasi kelas dalam elemen body
Pengirim
Penggunaan kelas referensi ini memungkinkan Anda untuk memasukkan elemen secara kondisional.
Viewer
Coba 'viewer' memungkinkan Anda untuk mengujinya di viewer Google AMP:
Cara Penambahannya
Masukkan komponen amp-dynamic-css-classes tepat setelah pembukaan <head>
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
Untuk tujuan contoh ini, Anda telah membuat beberapa kelas CSS tambahan yang menggunakan aturan CSS yang didefinisikan oleh amp-dynamic-css-class. Ini memungkinkan kami untuk merujuk secara lebih ringkas ke kondisi dalam kode kami di bawah ini.
<style amp-custom>
body:not(.amp-referrer-pinterest-com) .if-pinterest,
body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
body:not(.amp-referrer-google-com) .if-google,
body:not(.amp-referrer-twitter-com) .if-twitter,
body:not(.amp-referrer-localhost) .if-localhost {
display: none;
}
body:not(.amp-viewer) .if-viewer,
body.amp-viewer .if-not-viewer {
display: none;
}
</style>
Tidak perlu menyertakan panggilan ke komponen amp-dynamic-css-class untuk menginisialisasi kelas dalam elemen body
Pengirim
Penggunaan kelas referensi ini memungkinkan Anda untuk memasukkan elemen secara kondisional.
ContohnyaYou were referred here or embedded by Pinterest! I'll add a few extra "Pin It" buttons You were referred here or embedded by Twitter! I'll add a few extra Tweet buttons You were referred here or embedded by Google! I'll add a few extra Google+ buttons You came here directly! Cool :) You came here directly! Cool :)<span class="if-pinterest">You were referred here or embedded by Pinterest! I'll add a few extra "Pin It" buttons</span> <span class="if-twitter">You were referred here or embedded by Twitter! I'll add a few extra Tweet buttons</span> <span class="if-google">You were referred here or embedded by Google! I'll add a few extra Google+ buttons</span> <span class="if-ampbyexample">You came here directly! Cool :)</span> <span class="if-localhost">You came here directly! Cool :)</span> <amp-social-share type="email" layout="fixed" height="30" width="30"></amp-social-share> <amp-social-share type="twitter" layout="fixed" height="30" width="30" class="if-twitter"></amp-social-share> <amp-social-share type="pinterest" layout="fixed" height="30" width="30" class="if-pinterest"></amp-social-share> <amp-social-share type="linkedin" layout="fixed" height="30" width="30" class="if-linkedin"></amp-social-share>
Viewer
Coba 'viewer' memungkinkan Anda untuk mengujinya di viewer Google AMP:
ContohnyaHey! You're not visiting within the context of an AMP Viewer! Ahoy! Since you're coming from a viewer, I'll reorder my social share buttons to prefer the one you prefer. Hope you like 'em!<span class="if-not-viewer">Hey! You're not visiting within the context of an AMP Viewer!</span> <span class="if-viewer">Ahoy! Since you're coming from a viewer, I'll reorder my social share buttons to prefer the one you prefer. Hope you like 'em!</span>