amp-live-list
Komponen amp-live-list menambahkan dukungan untuk publikasi untuk memperbarui halaman AMP secara real time sebagai konten baru yang tersedia dalam dokumen sumber. Ini berfungsi sangat baik untuk aplikasi blog langsung. Temukan contoh blog langsung Disini.
Dengan kata lain, runtime AMP akan polling server pembaruan untuk dokumen sumber. Server dapat mengembalikan seluruh halaman AMP atau bagian dari itu, dan pada saat runtime halaman diperbarui di tempat tanpa masalah.
1 Kode pembuka
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
Masukkan script berikut tepat setelah pembukaan <head>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
3 Gunakan style amp-live-list-item, ketika kamu menggunakan amp-live-list. Anda dapat memeriksa dokumentasi untuk lebih jelasnya.
Masukkan style berikut tepat sebelum </head>
<style amp-custom>
.amp-live-list-item {
justify-content: center;
display: flex;
}
.blog {
padding: 0;
background: #fff;
width: 300px;
}
.blog p {
padding: 8px;
margin: 0;
}
.match {
background: #fff;
min-width: 0%;
}
header {
font-size: 2rem;
}
.side {
display: flex;
align-items: center;
justify-content: space-around;
}
.content {
font-size: 2rem;
padding: 8px;
}
.flag {
padding-top: 8px;
padding-bottom: 8px;
}
.button-update {
margin: 16px;
}
</style>
4 Implementasi Blog langsung
Gunakan atribut data-poll-interval untuk menentukan frekuensi komponen amp-live-list yang akan melakukan polling data baru. Interval minimum adalah 15 detik. Gunakan data-max-item-per-halaman untuk menentukan jumlah maksimum yang muncul pada halaman. Untuk penjelasan lengkap tentang semua atribut, lihat amp-live-list.
Gunakan pada = "ketuk: my-live-list.update" & nbsp; untuk memuat perubahan server terbaru. Sebuah tombol akan muncul ketika runtime AMP menemukan perubahan dokumen baru. Perlu diingat bahwa tombol harus didefinisikan sebagai anak langsung dari amp-live-list.
Daftar amp-live harus berisi daftar elemen seperti: <div items>. Setiap item memiliki pengidentifikasi khusus dan daftar live-amp akan mencari item dengan identifikasi baru.
Contoh ini menunjukkan implementasi dengan server representasi dari serangkaian 5 elemen. amp-live-list akan polling halaman setiap 15 detik hingga 5 elemen akan ditambahkan ke halaman. Setiap kali halaman amp-live-listencuesta, server akan menambahkan elemen baru ke halaman. Anda bisa check-in server.go dan masuk amp-live-list.go untuk detail implementasi.
Codenya
<amp-live-list layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-insert-blog">
<button update
on="tap:amp-live-list-insert-blog.update"
class="button button-primary button-update">You have updates</button>
<div items>
<div id="A green landscape with trees."
data-sort-time="20161211061122">
<div class="card blog">
<amp-img src="/img/landscape_green_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A green landscape with trees.</p>
</div>
</div>
<div id="Mountains reflecting on a lake."
data-sort-time="20161211061137">
<div class="card blog">
<amp-img src="/img/landscape_mountains_1280x657.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Mountains reflecting on a lake.</p>
</div>
</div>
<div id="A road leading to a lake with mountains on the back."
data-sort-time="20161211061152">
<div class="card blog">
<amp-img src="/img/landscape_lake_1280x857.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A road leading to a lake with mountains on the back.</p>
</div>
</div>
<div id="Forested hills with a grey sky in the background."
data-sort-time="20161211061207">
<div class="card blog">
<amp-img src="/img/landscape_trees_1280x960.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Forested hills with a grey sky in the background.</p>
</div>
</div>
<div id="Scattered houses in a mountain village."
data-sort-time="20161211061222">
<div class="card blog">
<amp-img src="/img/landscape_village_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Scattered houses in a mountain village.</p>
</div>
</div>
</div>
</amp-live-list>
Demo dapat dilihat di situs web resmi
Sampel ini berhenti setelah sepuluh pembaruan. Jika Anda ingin memulai kembali, hapus cookie di browser web Anda atau buka halaman ini lagi di tab penyamaran / pribadi.
Dengan mengklik tombol "Anda memiliki pembaruan", konten baru ditampilkan di kolom demo (yang di sebelah kanan jika demo diakses oleh desktop). Kolom kode (yang ada di tengah jika demo diakses oleh desktop) tidak memperbarui sendiri, tetapi jika Anda ingin melihat semua elemen halaman, muat ulang halaman.
Implementasi Skor Langsung
Si desea actualizar los elementos de lista existentes, es necesario especificar a través del atributo data-update-time cuando la actualización se ha realizado.
Contoh berikut akan menampilkan skor pertandingan sepak bola yang isinya berubah setiap kali amp-live-list polling halaman di server.
Codenya
<amp-live-list layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-update">
<button update
on="tap:amp-live-list-update.update"
class="button button-primary">You have updates</button>
<div items>
<div id="list-item-1"
data-sort-time="1234567"
data-update-time="20161211061352">
<div class="card match">
<div class="side">
<div class="flag">
<amp-img src="/img/italy-flag.png"
layout="fixed"
height="50"
width="100">
</amp-img>
</div>
<div class="content">10 - 0</div>
<div class="flag">
<amp-img src="/img/england-flag.png"
layout="fixed"
height="50"
width="100">
</amp-img>
</div>
</div>
</div>
</div>
</div>
</amp-live-list>
Demonya
10 - 0
Kemudian full struktur kode lengkap
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/components/amp-live-list/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<style amp-custom>
.amp-live-list-item {
justify-content: center;
display: flex;
}
.blog {
padding: 0;
background: #fff;
width: 300px;
}
.blog p {
padding: 8px;
margin: 0;
}
.match {
background: #fff;
min-width: 0%;
}
header {
font-size: 2rem;
}
.side {
display: flex;
align-items: center;
justify-content: space-around;
}
.content {
font-size: 2rem;
padding: 8px;
}
.flag {
padding-top: 8px;
padding-bottom: 8px;
}
.button-update {
margin: 16px;
}
</style>
</head>
<body>
<amp-live-list layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-insert-blog">
<button update
on="tap:amp-live-list-insert-blog.update"
class="button button-primary button-update">You have updates</button>
<div items>
<div id="A green landscape with trees."
data-sort-time="20161211061122">
<div class="card blog">
<amp-img src="/img/landscape_green_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A green landscape with trees.</p>
</div>
</div>
<div id="Mountains reflecting on a lake."
data-sort-time="20161211061137">
<div class="card blog">
<amp-img src="/img/landscape_mountains_1280x657.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Mountains reflecting on a lake.</p>
</div>
</div>
<div id="A road leading to a lake with mountains on the back."
data-sort-time="20161211061152">
<div class="card blog">
<amp-img src="/img/landscape_lake_1280x857.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>A road leading to a lake with mountains on the back.</p>
</div>
</div>
<div id="Forested hills with a grey sky in the background."
data-sort-time="20161211061207">
<div class="card blog">
<amp-img src="/img/landscape_trees_1280x960.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Forested hills with a grey sky in the background.</p>
</div>
</div>
<div id="Scattered houses in a mountain village."
data-sort-time="20161211061222">
<div class="card blog">
<amp-img src="/img/landscape_village_1280x853.jpg"
layout="responsive"
width="1280"
height="853">
</amp-img>
<p>Scattered houses in a mountain village.</p>
</div>
</div>
</div>
</amp-live-list>
<amp-live-list layout="container"
data-poll-interval="15000"
data-max-items-per-page="5"
id="amp-live-list-update">
<button update
on="tap:amp-live-list-update.update"
class="button button-primary">You have updates</button>
<div items>
<div id="list-item-1"
data-sort-time="1234567"
data-update-time="20161211061352">
<div class="card match">
<div class="side">
<div class="flag">
<amp-img src="/img/italy-flag.png"
layout="fixed"
height="50"
width="100">
</amp-img>
</div>
<div class="content">10 - 0</div>
<div class="flag">
<amp-img src="/img/england-flag.png"
layout="fixed"
height="50"
width="100">
</amp-img>
</div>
</div>
</div>
</div>
</div>
</amp-live-list>
</body>
</html>