Bu yazımda sizlere Googlenin son günlerde duyurduğu amp-story eklentisinden bahsedeceğim.
Artık her yerde bu saçma story olaylarını görmek mümkün. Evimizdeki çamaşır makinesi ve bulaşık makinesine gelmediği kaldı onada eklemelerin yapılmasını üreticiden isteyeceğiz.
Dün gece google sessiz bir şekilde bu özelliği eklediğini duyurdu. Ufak bir kaç düzenlemeler ile web sitenize entegre edebiliyorsunuz.
Peki bu AMP Stories neye benziyor diyecek olursanız size aşağıdaki uzun gif ile baş başa bırakıyorum.
Kullanılacak olan eklentinin javascript dosyalasını ise sayfanıza eklemeyi unutmayın.
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>Ekleme işlemini yaptıktan sonra geri kalan story çatısını oluşturmak için ise aşağıdaki yapıyı inceleyiniz.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
<title>Hello, amp-story</title>
<link rel="canonical" href="http://example.ampproject.org/my-story.html" />
<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>
</head>
<body>
<amp-story standalone>
<amp-story-page id="my-first-page">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.ampproject.org/helloworld/bg1.jpg"
width="900" height="1600">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Hello, amp-story!</h1>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="my-second-page">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.ampproject.org/helloworld/bg2.gif"
width="900" height="1600">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The End</h1>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>Burada dikkat edilecek olay hikaye içerisinde gözükecek olan artık her ne olur ise <amp-story-grid-layer template="vertical"> </amp-story-grid-layer> etiketleri içerisinde yer alacak olmasıdır.
Yaptığınız her bir hikaye paylaşımı ise <amp-story-page> </amp-story-page> etiketleri arasına yetleştirilmek zorunda bir den çok paylaşımı bu şekilde yapabilirsiniz.
<amp-story standalone bookend-config-src="./related.json" background-audio="my.mp3">
<amp-story-page>[...]</amp-story-page>
<amp-story-page>[...]</amp-story-page>
<amp-story-page>[...]</amp-story-page>
</amp-story>Hikaye ayarlarında görmüş olduğunu bookend-config-src değeri, ilgili bağlantıları içeren bir hikayenin bitiş ekranına ilişkin URL’leri içeren bir yapılandırma dosyasıdır. Bu sistem, ilgili yazılar alanı yapmak için bulunmaz bir nimettir. Bu, statik bir JSON dosyasından sunulabilir veya dinamik olarak oluşturulabilir.
Aynı zamanda bu alan amp-social-share ile birlikte çalışmaktadır.
{
"share-providers": {
"email": true,
"twitter": true,
"tumblr": true,
"facebook": {
// Facebook requires an `app_id` param
"app_id": "MY_FACEBOOK_APP_ID"
}
},
"related-articles": {
"More to Read": [
{
title: "My friends, this is India [...]",
url: "http://a-publisher.com/india"
image: "./media/b1.jpg"
},
{
title: "A wonderful weekend with Tenturi",
url: "http://a-publisher.com/tenturi"
image: "./media/b2.jpg"
},
...
],
}
}Teknik dokümantasyonun devamı için Tıklayınız