AMP

Membuat bookend

Setelah menambahkan semua halaman, sekarang mari kita lihat layar terakhir artikel, yang disebut "bookend". Layar terakhir ini menjadi penutup artikel, dan dapat Anda gunakan untuk menampilkan opsi berbagi di media sosial dan link terkait ke artikel Anda agar pengguna dapat membagikan berita tersebut atau mencari informasi lebih lanjut tentang konten lain di situs Anda.

Informasi pada layar bookend berasal dari file JSON yang ditetapkan dalam tag <amp-story-bookend>. Untuk tutorial ini, kita telah memiliki file JSON (bookend.json) yang memuat data bookend.

Tag <amp-story-bookend> harus menjadi tag terakhir dalam amp-story. Jadi, mari kita tambahkan <amp-story-bookend></amp-story-bookend> tepat sebelum tag </amp-story> penutup. Pada tag amp-story-bookend, arahkan atribut src ke file bookend.json dan tetapkan layout="nodisplay":

  </amp-story-page>
  <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>

Jika memuat ulang browser dan menuju ke layar terakhir, Anda akan melihat bookend berikut:

Mari kita lihat file JSON-nya. Buka file bookend.json di editor teks.

Setiap layar bookend memerlukan bookendVersion, yakni v1.0 untuk tutorial ini:

"bookendVersion": "v1.0",

Tombol berbagi sosial memungkinkan pembaca untuk membagikan konten Anda melalui platform media sosial, seperti Twitter, Facebook, Pinterest, dan lain-lain. Anda dapat menentukan penyedia berbagi sosial dalam objek shareProviders, dan membuat array yang berisi nama jenis untuk setiap platform media sosial.

Untuk tutorial ini, kita memilih Facebook, Twitter, dan email sebagai penyedia berbagi:

"shareProviders": [
  "facebook",
  "twitter",
  "email"
],

Bagian lain dari layar bookend digunakan untuk konten terkait. Semua konten terkait ditampung dalam objek components.

Ada berbagai komponen yang dapat Anda gunakan untuk menampilkan link dan konten terkait; setiap komponen ditentukan dengan atribut type. Mari kita lihat komponen yang tersedia:

Jenis Deskripsi
heading Memungkinkan Anda menentukan heading untuk mengelompokkan artikel.
{
  "type": "heading",
  "text": "More to read"
},

small Memungkinkan Anda untuk menautkan ke artikel terkait dengan opsi untuk menyertakan gambar kecil yang terkait.
{
  "type": "small",
  "title": "Learn about cats",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

landscape Memungkinkan Anda untuk menautkan ke artikel atau konten lain, seperti video. Gambar yang terkait dengan jenis ini berukuran lebih besar dan berformat lanskap.
{
  "type": "landscape",
  "title": "Learn about border collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Dogs"
},

portrait Memungkinkan Anda untuk menautkan ke berita atau konten lain. Gambar yang terkait dengan jenis ini berukuran lebih besar dan berformat potret.
{
  "type": "portrait",
  "title": "Learn about macaws",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "birds"
},

cta-link Memungkinkan Anda untuk menentukan link pesan ajakan yang ditampilkan sebagai tombol (misalnya, baca selengkapnya, Berlangganan).
{
  "type": "cta-link",
  "links": [
    {
      "text": "Learn more",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

Masih ada lagi yang bisa dipelajari tentang komponen bookend. Untuk informasi selengkapnya, lihat dokumen referensi amp-story.

Artikel kita hampir jadi. Sebelum kita memublikasikannya, mari pastikan bahwa HTML AMP kita valid.