Ein Bookend erstellen

Da du nun alle Seiten hinzugefügt hast, können wir uns die letzte Seite der Story ansehen: das Bookend. Diese letzte Seite schließt die Story ab. Hier kannst du Social Share Buttons und sonstige relevante Links bereitstellen, damit die Benutzer deine Story teilen und tiefer in andere Inhalte auf deiner Website eintauchen.

Die Informationen auf der Bookend Seite stammen aus einer JSON Datei, die im Tag <amp-story-bookend> angegeben wird. Für unser Tutorial haben wir bereits eine JSON Datei (bookend.json) angelegt, welche die Bookend Daten enthält.

Das Tag <amp-story-bookend> muss das letzte Tag in <amp-story> sein. Fügen wir also <amp-story-bookend></amp-story-bookend> kurz vor dem abschließenden Tag </amp-story> hinzu. Im Tag amp-story-bookend muss das Attribut src auf die Datei bookend.json verweisen. Außerdem benötigst du das Attribut layout="nodisplay":

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

Wenn du den Inhalt in deinem Browser aktualisierst und zur letzten Story Seite wechselst, wird das folgende Bookend angezeigt:

Sehen wir uns die JSON Datei an. Öffne die Datei bookend.json in deinem Texteditor.

Jede Seite des Bookends benötigt die Angabe von bookendVersion. In diesem Tutorial ist das v1.0:

"bookendVersion": "v1.0",

Mithilfe der Social Share Buttons können Leser deine Inhalte auf sozialen Plattformen wie Twitter, Facebook, Pinterest usw. teilen. Gib die Social Share Anbieter im Objekt "shareProviders" an und erstelle ein Array mit Typnamen für jede der sozialen Plattformen.

Für dieses Tutorial haben wir Facebook, Twitter und E-Mail als Anbieter von Social Share Buttons ausgewählt:

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

Der Rest der Bookend Seite ist relevanten Links vorbehalten. Alle relevanten Inhalte befinden sich im Objekt components.

Es gibt verschiedene Komponenten, mit denen du relevante Inhalte und Links anzeigen kannst. Jede Komponente enthält das Attribut "type". Sehen wir uns die verfügbaren Komponenten an:

  {
    "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"
      }
    ]
  }
  

Damit sind die Informationen zur Bookend Komponente noch nicht erschöpft. Weitere Informationen findest du in der Referenzdokumentation zu amp-story.

Unsere Story ist fast fertig. Bevor wir unseren Content veröffentlichen können, müssen wir überprüfen, ob unser AMP HTML gültig ist.

• Written by @bpaduch