AMP

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

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

تأتي المعلومات الموجودة على شاشة لوحة التسجيل من ملف 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"
  },
  

small يسمح لك بربط المقالات ذات الصلة بخيار تضمين صورة صغيرة مقترنة.
  {
    "type": "small",
    "title": "Learn about cats",
    "url": "https://wikipedia.org/wiki/Cat",
    "image": "assets/bookend_cats.jpg"
  },
  

landscape يسمح لك بربط المقالات أو محتوى آخر مثل مقاطع الفيديو. أما الصورة المقترنة بهذا النوع فهي أكبر وبتنسيق أفقي.
  {
    "type": "landscape",
    "title": "Learn about border collies",
    "url": "https://wikipedia.org/wiki/Border_Collie",
    "image": "assets/bookend_dogs.jpg",
    "category": "Dogs"
  },
  

portrait يسمح لك بربط القصص أو محتوى آخر. أما الصورة المرتبطة بهذا النوع فهي أكبر وبتنسيق عمودي.
  {
    "type": "portrait",
    "title": "Learn about macaws",
    "url": "https://wikipedia.org/wiki/Macaw",
    "image": "assets/bookend_birds.jpg",
    "category": "birds"
  },
  

cta-link يسمح لك بتحديد روابط الدعوة إلى اتخاذ إجراء والتي يتم عرضها كأزرار (على سبيل المثال، اقرأ المزيد، اشترك).
  {
    "type": "cta-link",
    "links": [
      {
        "text": "Learn more",
        "url": "https://amp.dev/about/stories.html"
      }
    ]
  }
  

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

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