Membuat bookend

Setelah Anda menambahkan semua halaman Anda, mari kita lihat layar terakhir dari cerita ini, "bookend". Layar terakhir ini mengakhiri cerita, dan memungkinkan Anda untuk menampilkan opsi berbagi di media sosial dan tautan terkait di cerita Anda agar pengguna dapat membagikan berita tersebut atau mencari informasi lebih lanjut tentang konten lain di situs Anda.

The information on the bookend screen comes from a JSON file that's specified in the <amp-story-bookend> tag. For our tutorial, we already have a JSON file (bookend.json) that contains the bookend data.

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 berkas bookend.json dan tetapkan layout="nodisplay":

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

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

Let's look at the JSON file. Open the bookend.json file in your text editor.

Every bookend screen requires a bookendVersion, which is v1.0 for this tutorial:

"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 deretan atau rangkaian yang berisi nama jenis untuk setiap platform media sosial.

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

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

The rest of the bookend screen is for related content. All related content is contained in a components object.

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

  {
    "type": "heading",
    "text": "More to read"
  },
  

  {
    "type": "small",
    "title": "Learn about cats",
    "url": "https://wikipedia.org/wiki/Cat",
    "image": "assets/bookend_cats.jpg"
  },
  

  {
    "type": "landscape",
    "title": "Learn about border collies",
    "url": "https://wikipedia.org/wiki/Border_Collie",
    "image": "assets/bookend_dogs.jpg",
    "category": "Dogs"
  },
  

  {
    "type": "portrait",
    "title": "Learn about macaws",
    "url": "https://wikipedia.org/wiki/Macaw",
    "image": "assets/bookend_birds.jpg",
    "category": "birds"
  },
  

  {
    "type": "cta-link",
    "links": [
      {
        "text": "Learn more",
        "url": "https://amp.dev/about/stories.html"
      }
    ]
  }
  

There's more to learn about the bookend component. For details, see the amp-story reference documentation.

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

• Written by @bpaduch