AMP

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:

Bookend

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:

Art Beschreibung
heading Ermöglicht die Angabe von Links zu relevanten Artikeln samt einem kleinen zugehörigen Bild.
  {
    "type": "heading",
    "text": "More to read"
  },
  

small Ermöglicht die Angabe von Links zu relevanten Artikeln samt einem kleinen zugehörigen Bild.
  {
    "type": "small",
    "title": "Learn about cats",
    "url": "https://wikipedia.org/wiki/Cat",
    "image": "assets/bookend_cats.jpg"
  },
  

landscape Ermöglicht die Angabe von Links zu Artikeln oder anderen Inhalten wie Videos. Das dazugehörige Bild ist größer und im Querformat.
  {
    "type": "landscape",
    "title": "Learn about border collies",
    "url": "https://wikipedia.org/wiki/Border_Collie",
    "image": "assets/bookend_dogs.jpg",
    "category": "Dogs"
  },
  

portrait Ermöglicht die Angabe von Links zu Storys und anderen Inhalten. Das dazugehörige Bild ist größer und im Hochformat.
  {
    "type": "portrait",
    "title": "Learn about macaws",
    "url": "https://wikipedia.org/wiki/Macaw",
    "image": "assets/bookend_birds.jpg",
    "category": "birds"
  },
  

cta-link Ermöglicht die Angabe von Links mit einem "Call to Action", die als Buttons angezeigt werden (z. B. "Mehr dazu", "Abonnieren").
  {
    "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.