إنشاء نهاية قصة

الآن بعد أن أضفت جميع صفحاتك، فلنلقِ نظرة على الشاشة الأخيرة من القصة، "نهاية القصة". تختتم هذه الشاشة الأخيرة القصة، وتسمح لك بتقديم ميزات المشاركة على وسائل التواصل الاجتماعي وروابط ذات صلة بقصتك، حتى يتمكن المستخدمون من مشاركة قصتك أو التعمق أكثر في محتوى آخر على موقعك.

تأتي المعلومات الموجودة على شاشة لوحة التسجيل من ملف JSON المحدد في العلامة <amp-story-bookend>. أما بالنسبة لبرنامجنا التعليمي، لدينا بالفعل ملف JSON (bookend.json) يحتوي على بيانات نهاية القصة.

يجب أن تكون العلامة <amp-story-bookend> هي العلامة الأخيرة في <amp-story>. لذا، دعنا نضيف <amp-story-bookend></amp-story-bookend> قبل علامة النهاية </amp-story>. وفي العلامة amp-story-bookend، أشر إلى السمة src للملف bookend.json وعيِّن layout="nodisplay":

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

إذا قمت بتحديث متصفحك وانتقلت إلى الشاشة الأخيرة، فسترى نهاية القصة التالية:

لنلق نظرة على ملف JSON. افتح ملف bookend.json في محرر النصوص لديك.

تتطلب كل شاشة من شاشات نهاية القصة bookendVersion، وهو v1.0 لهذا البرنامج التعليمي:

"bookendVersion": "v1.0",

تسمح أزرار المشاركة على وسائل التواصل الاجتماعي للقراء بمشاركة المحتوى الخاص بك عبر منصات التواصل الاجتماعي، مثل Twitter وFacebook وPinterest وما إلى ذلك. وأنت تحدد موفري المشاركة عبر وسائل التواصل الاجتماعي في كائن shareProviders، وتنشئ مصفوفة تحتوي على أسماء الأنواع لكل منصة من منصات التواصل الاجتماعي.

في هذا البرنامج التعليمي، اخترنا Facebook وTwitter والبريد الإلكتروني لموفري المشاركة لدينا:

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

وأما ما تبقى من شاشة نهاية القصة فيكون مخصصًا للمحتوى ذي الصلة. ويتم تضمين جميع المحتويات ذات الصلة في كائن components.

هناك العديد من المكونات التي يمكنك استخدامها لعرض المحتوى والروابط ذات الصلة؛ إذ يتم تحديد كل مكون بسمة نوع، لنلقِ نظرة على المكونات المتوفرة:

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

هناك المزيد للتعرف أكثر على مكون نهاية القصة. للحصول على مزيد من التفاصيل، اطلع على المستندات المرجعية amp-story.

قصتنا اكتملت تقريبًا قبل أن نتمكن من نشر المحتوى الخاص بنا، دعنا نتحقق من صلاحية AMP HTML.

• Written by @bpaduch