Hikayemize başlama

Tüm bir Web Hikayesi, bir hikayedeki tüm sayfalar için kapsayıcı görevi gören amp-story bileşeniyle temsil edilir. amp-story bileşeni ayrıca, hareketleri ve gezinmeyi işleme dahil kullanıcı arayüzü kabuğunun oluşturulmasından da sorumludur.

amp-story bileşeni, özel bir AMP bileşenidir ve tüm özel bileşenler gibi, ilişkili betiği bileşen için AMP belgesine eklemeniz gerekir.

pets.html dosyasını metin düzenleyicinizde açın ve <head> bölümünde aşağıdaki betiği ekleyin :

<head>
  <script
    async
    custom-element="amp-story"
    src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
  ></script>
</head>

Belgenizin <body> bölümüne <amp-story> öğesini ekleyin ve zorunlu standalone özniteliğini şu şekilde belirtin:

<body>
  <amp-story standalone> </amp-story>
</body>

Geçerli bir AMP hikayesine sahip olmak için <body> öğesinin yalnızca bir alt öğesinin olması gerektiğini unutmayın: amp-story bileşeni; diğer tüm öğeler amp-story içinde yer alır.

Meta bilgi sunma

Hikayelerin web'de keşfedilmesi adına, hikayenin mini ayrıntılarını sunmak için belirli meta veriler gereklidir, örneğin:

title özniteliğiyle temsil edilen hikaye başlığı (mesela, "Joy of Pets").
publisher özniteliğiyle temsil edilen yayıncı adı (mesela, "AMP öğreticileri").
publisher-logo-src özniteliğiyle temsil edilen yayıncı logosu. Bu logo, 1x1 en boy oranıyla kare biçimli bir logo resmi URL'sidir.
poster-portrait-src özniteliğiyle temsil edilen, hikayenin poster görüntüsü. Bu bir poster URL'sidir ve resim, 3x4 en boy oranına sahip dikey biçimde olmalıdır.

Bu öznitellikleri amp-story içine ekleyelim:

<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>

Bu gerekli özniteliklere ek olarak, uygulayabileceğiniz başka öznitelikler de vardır. Daha fazla bilgi edinmek için amp-story referans belgelerinin öznitelikler bölümüne bakın.

NOT - Bu meta veri öznitelikleri sayfadaki Yapılandırılmış Verileri (örneğin JSON-LD) tamamlar ve bunların yerini almaz. Web Hikayelerinizin tüm platformlarda keşfedildiğinden emin olmak için AMP hikayeleri dahil tüm AMP sayfalarınıza Yapılandırılmış Veriler eklemelisiniz.

Bu noktada, içeriği olmayan bir hikaye kabuğuna sahibiz. Şimdi bu sayfayı oluşturalım.

Önceki bölüm Sonraki bölüm

Written by @bpaduch