AMP

Membuat halaman sampul

Halaman dalam artikel AMP diwakili oleh komponen <amp-story-page>. Dalam amp-story, Anda bisa memiliki satu atau beberapa komponen <amp-story-page>, yang masing-masing berisi layar individual dari sebuah artikel. Halaman pertama yang Anda tetapkan dalam urutan dokumen akan menjadi halaman pertama yang ditampilkan dalam artikel tersebut.

Untuk membuat halaman, tambahkan elemen <amp-story-page> sebagai turunan dari amp-story. Tetapkan ID unik untuk halaman itu. Untuk halaman pertama, yang merupakan halaman sampul, mari kita tetapkan ID unik yaitu cover:

<amp-story standalone
    title="Joy of Pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
    poster-portrait-src="assets/cover.jpg">
   <amp-story-page id="cover">
   </amp-story-page>
</amp-story>

Sekarang kita sudah memiliki kerangka untuk halaman sampul. Namun artikel kita masih belum valid. Dalam halaman ini, kita harus menetapkan minimal satu lapisan.

Lapisan pada sebuah halaman

Sebagaimana lapisan pada gambar, Anda dapat menggunakan lapisan pada halaman artikel AMP untuk membuat efek visual. Lapisan ditumpuk satu di atas yang lain, sehingga lapisan pertama menjadi lapisan terbawah, yang di atasnya terdapat lapisan berikutnya, begitu seterusnya.

Halaman sampul kita ini terdiri dari dua lapisan:

  • Lapisan 1: Gambar yang berfungsi sebagai tampilan latar
  • Lapisan 2: Judul dan subjudul artikel

Membuat lapisan 1

Mari kita tambahkan lapisan pertama ke halaman sampul. Lapisan ini berisi gambar yang akan mengisi layar.

Buat lapisan ini dengan menambahkan elemen <amp-story-grid-layer> sebagai turunan dari <amp-story-page>. Karena kita ingin gambar mengisi layar, tetapkan atribut template="fill" untuk amp-story-grid-layer. Di dalam lapisan ini, tambahkan elemen amp-img untuk file cover.jpg, dan pastikan responsif (artinya, layout="responsive") dengan gambar berukuran 720 x 1280 piksel. Beginilah tampilan lapisan kita:

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-img src="assets/cover.jpg"
        width="720" height="1280"
        layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Mari kita lihat bagaimana halaman ini ditampilkan. Buka halaman ini di browser: http://localhost:8000/pets.html.

Seperti inilah hasilnya:

Membuat lapisan 2

Setelah membuat tampilan latar, sekarang kita ingin membuat lapisan kedua yang menindih tampilan latar dan berisi judul dan subjudul. Untuk menambahkan lapisan kedua, kita akan melakukan langkah yang sama seperti saat membuat lapisan 1, namun sebagai pengganti template fill, sekarang kita akan menggunakan template vertical. Namun, sebelum melangkah lebih jauh, mari kita pelajari tentang template dan cara menyusun elemen AMP dan HTML di <amp-story-grid-layer>.

Mengatur tata letak elemen dengan template

Elemen <amp-story-grid-layer> mengatur tata letak berbagai elemen turunannya dalam sebuah petak (didasarkan pada petak CSS). Untuk menunjukkan cara pengaturan elemen turunan tersebut, tentukan salah satu template tata letak berikut:

Template: Fill
Template fill akan mengisi layar dengan elemen turunan pertama pada lapisan ini. Elemen turunan lainnya tidak ditampilkan.

Template fill berfungsi dengan baik untuk latar belakang, termasuk gambar dan video.

<amp-story-grid-layer template="fill">
  <amp-img src="dog.png"
      width="720" height="1280"
      layout="responsive">
  </amp-img>
</amp-story-grid-layer>
Template: Vertical
Template vertical menata elemen turunan di sepanjang sumbu Y. Elemen ini sejajar dengan bagian atas layar, dan memenuhi seluruh layar di sepanjang sumbu X.

Template vertical berfungsi dengan baik jika Anda ingin menumpuk elemen secara vertikal satu di atas yang lain.

<amp-story-grid-layer template="vertical">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Template: Horizontal
Template horizontal menata elemen turunan di sepanjang sumbu X. Elemen ini sejajar dengan bagian awal layar, dan memenuhi seluruh layar di sepanjang sumbu Y.

Template horizontal berfungsi dengan baik jika Anda ingin menumpuk elemen secara horizontal satu di sebelah yang lain.

<amp-story-grid-layer template="horizontal">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Template: Thirds
Template thirds membagi layar menjadi tiga area berjarak sama, yang masing-masing dapat Anda isi dengan konten.

Anda juga dapat menetapkan grid-area (area petak) bernama untuk menunjukkan area pertiga yang ingin Anda isi konten: upper-third (pertiga atas), middle-third (pertiga tengah), atau lower-third (pertiga bawah). Area petak bernama berguna untuk mengubah perilaku default dari tempat dimunculkannya elemen. Sebagai contoh, jika memiliki dua elemen pada lapisan, Anda bisa menetapkan elemen pertama sebagai grid-area="upper-third" dan elemen kedua sebagai grid-area="lower-third".

<amp-story-grid-layer template="thirds">
  <h1 grid-area="upper-third">element 1</h1>
  <p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>

Menyelesaikan halaman sampul kita

Setelah memahami template lapisan, sekarang mari selesaikan lapisan kedua untuk halaman sampul kita.

Untuk lapisan 2, kita ingin elemen judul dan subjudul terlihat di atas, serta muncul satu setelah yang lain. Untuk itu, kita akan menetapkan template vertical. Elemen amp-story-grid-layer kedua kita akan muncul setelah elemen pertama, seperti ini:

<amp-story-grid-layer>
 <!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>The Joy of Pets</h1>
  <p>By AMP Tutorials</p>
</amp-story-grid-layer>

Refresh browser dan lihat hasil kerja Anda. Halaman sampul kita sudah jadi.