AMP

amp-story

الوصف تنسيق مرئي غني بالتفاصيل لسرد القصص
مدى التوفّر
النص البرمجي المطلوب <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
التنسيقات المعتمدة لا شيء
أمثلة

هذا المكوِّن قيد التجربة والتطوير. للإبلاغ عن أي مشاكل، يُرجى ملء مشكلة لدى GitHub.

[جدول المحتويات]

ملاحظات عن الإصدارات

الإصدار الوصف
1.0 الإصدار الحالي، منذ 16-7-2018
0.1 التنفيذ الأوليّ وقد تم إيقافه وستتم إزالته في 19-3-2019.

الترحيل من 0.1 إلى 1.0

اعتبارًا من 16-7-2018، يعتبر الإصدار 0.1 متوقفًا، وستتم إزالته في 19-3-2019. قد يحدِث هذا تغييرات ربما تؤدي إلى أعطال، حيث ستتم ترقية سجلاتك تلقائيًا لاستخدام الإصدار 1.0. وننصح بترحيل الصفحات يدويًا إلى الإصدار 1.0 قبل هذا التاريخ لضمان سلامة الوظائف والتصميم.

إمكانات جديدة للشاشة الختامية

لقد أضفنا إمكانات جديدة إلى شاشة amp-stories الختامية، ما يتيح عمل المكوِّن والتنسيقات المرئية بشكل أكثر ثراءً. بعض التغييرات تشمل ما يلي:

  • يتم فرز موفري المشاركة وفقًا لتهيئة JSON.
  • مكونات جديدة للشاشة الختامية:
    • روابط للحث على اتخاذ إجراء
    • مربع نص
    • بطاقات باتجاه أفقي وعمودي

لاستخدام هذه الإمكانات الجديدة، أضِف العلامة <amp-story-bookend> كآخر عنصر ثانوي في <amp-story> مع السمات المطلوبة مثل:

<amp-story standalone>
  <amp-story-page id="cover">
    ...
  </amp-story-page>
  <!-- `src` and `layout=nodisplay` are required. -->
  <amp-story-bookend src="bookendv1.json" layout="nodisplay">
  </amp-story-bookend>
<amp-story>

تعرّف على المزيد حول المكونات الجديدة وكيفية تحديدها في تهيئة JSON في القسم amp-story-bookend.

متطلبات جديدة للبيانات الوصفية

لقد أضفنا سمات جديدة للبيانات الوصفية للعنصر <amp-story>. سيتم استخدام هذه السمات لعرض معاينة للسجل عبر منظومة "سجلّ AMP" المتكاملة. يمكن مثلاً استخدام هذه السمات لعرض رابط جذاب للمعاينة في الشاشة الختامية من السجل المعني. ويضمن توفير هذه السمات أيضًا أن يكون السجل جاهزًا للتجارب المضمّنة المنسّقة التي ستظهر مستقبلاً في سجلات AMP.

ستكون السمات

<!-- title وpublisher<code> وpublisher-logo-src وposter-portrait-src` مطلوبة قريبًا. -->
<amp-story title="سجلي" standalone
    publisher="The AMP Team"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">

<!-- السمات poster-square-src وposter-landscape-src اختياريّة لكننا ننصح باستخدامها بشدة. -->
<amp-story title="سجلي" standalone
    publisher="The AMP Team"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    poster-square-src="https://example.com/my-story/poster/1x1.jpg"
    poster-landscape-src="https://example.com/my-story/poster/4x3.jpg">

يُرجى العلم بأن سمات البيانات الوصفية هذه مكمِلة وليست بديلة لأي من البيانات المنظّمة (مثل JSON-LD) على الصفحة. ونكرر نصيحتنا بإضافة البيانات المنظّمة إلى جميع صفحات AMP، بما في ذلك سجلات AMP.

السمات الجديدة:

السمة الوصف
title [مطلوبة] عنوان السجلّ
publisher [مطلوبة] اسم ناشر السجلّ
publisher-logo-src [مطلوبة] شعار الناشر بتنسيق مربع (نسبة العرض إلى الارتفاع 1×1)
poster-portrait-src [مطلوبة] ملصق السجلّ بتنسيق عمودي (نسبة عرض إلى ارتفاع 3×4)
poster-square-src ملصق السجلّ بتنسيق مربع (نسبة العرض إلى الارتفاع 1x1)
poster-landscape-src ملصق السجلّ بتنسيق أفقي (نسبة عرض إلى ارتفاع 3×4)

إرشادات publisher-logo-src

تنطبق الإرشادات التالية على صورة شعار الناشر:

  • يجب أن يكون الملف ملفًا نقطيًا، مثل .jpg أو .png أو .gif. تجنب ملفات المتجهات، مثل .svg أو .eps.
  • تجنب الصور المتحركة، مثل ملفات GIF المتحركة.
  • يجب أن يكون جزء الرسم من الشعار واضحًا على لون الخلفية.
مُفضل مُفضل تجنب هذا
  • يجب أن يكون شكل الشعار مربعًا وليس مستطيلًا.
  • يجب ألا يكون لون الخلفية شفافًا.
  • استخدم شعارًا واحدًا لكل علامة تجارية ثابتة في سجلات AMP.
  • يجب ألا يقل حجم الشعار عن 96× 96 بكسل.

إرشادات الملصقات (للسمات poster-portrait-src وposter-landscape-src وposter-square-src)

تنطبق الإرشادات التالية على صور ملصقات السجلات:

  • يجب أن تمثل صورة الملصق سجلّ AMP بأكمله.
  • يجب أن تكون صورة الملصق مرئية للمستخدم عندما يشغِّل سجلّ AMP. ومع ذلك، لا يجب أن يتطابق عنوان URL لملف الصورة المستخدَم في البيانات الوصفية تمامًا مع عنوان URL المستخدَم في الصفحة الأولى من السجلّ. يمكن أن يتضمن عنوان URL المستخدَم في البيانات الوصفية تغيير الحجم أو الاقتصاص أو إجراء تغييرات بسيطة في التصميم لغرض المعاينة.
  • يجب أن تكون صورة الملصق ملفًا نقطيًا، مثل .jpg أو .png أو .gif. تجنب ملفات المتجهات، مثل .svg أو .eps.
  • يجب أن تكون نسبة العرض إلى الارتفاع 3x4 لصورة الملصق بالاتجاه العمودي و4x3 للاتجاه الأفقي و1×1 للمربع.
  • إذا كانت صورة الملصق مشتقة من إطار في الفيديو، يجب أن يكون الصورة المصغرة ممثلة له. غالبًا ما يكون الإطار الأول في الفيديو مثلاً غير مُعبِر عنه.
  • يجب أن تفي جميع صور الملصقات بالحجم الأدنى المقترح:
    • الاتجاه العمودي: 696 بكسل × 928 بكسل
    • الاتجاه الأفقي: 928 بكسل × 696 بكسل
    • المربع: 928 بكسل × 928 بكسل

نظرة عامة

توفّر الإضافة amp-story تنسيقًا جديدًا لعرض المحتوى المرئي لتجميعه في تجربة تمثل سردًا لقصة. يمكنك توفير المعلومات والمحتوى المنسّق مرئيًا بحجم صغير للمستخدمين وذلك باستخدام سجلّ AMP.

تنسيق سجلّ AMP

سجلّ AMP عبارة عن مستند كامل برمز HTML لصفحات AMP يتكون من صفحات، تحتوي على طبقات والتي تشتمل بدورها على عناصر AMP وHTML، مثل الوسائط أو التحليلات أو النص أو غير ذلك.

النص الأساسي

الترميز التالي هو نقطة بداية جيدة أو نص أساسي. فانسخه في ملف واحفظه بالامتداد .html.

<!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-1.0.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-bookend src="bookendv1.json" layout="nodisplay">
      </amp-story-bookend>
    </amp-story>
  </body>
</html>

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

الترميز المطلوب للعنصر amp-story

يتّبع تنسيق HTML لسجلات AMP متطلبات الترميز نفسها لمستند صالح برمز HTML لصفحات AMP، إلى جانب المتطلبات الإضافية التالية:

القاعدة الوصف
العنصر <amp-story standalone> هو العنصر الثانوي الوحيد للعنصر <body>. لتحديد أن المستند عبارة عن سجلّ AMP
ضمِّن العلامة <script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script> كعنصر ثانوي ثالث للعلامة <head>. لتضمين مكتبة JS للمكوِّن amp-story وتحمليها
ضمِّن العلامة <link rel="canonical" href="$STORY_URL"> في <head>. يوجه الرابط إلى السجل نفسه، مع تعريف السجلّ بأنه المستند الأساسي.

السجلّ: amp-story

يمثل المكوِّن amp-story سجلاً كاملاً. ينفذ المكّوِن نفسه هيكل واجهة مستخدِم، بما في ذلك معالجة الإيماءات والتنقل وإدخال واجهة المستخدِم لهيكل التطبيق (عناصر التحكم وشريط التقدم وغيره).

مثال

<amp-story
    standalone
    title="My Story"
    publisher="The AMP Team"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    poster-square-src="https://example.com/my-story/poster/1x1.jpg"
    poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
    background-audio="my.mp3">
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-bookend src="./related.json"></amp-story-bookend>
</amp-story>

السمات

standalone [مطلوبة]

لتحديد أن المستند عبارة عن سجلّ AMP

title [مطلوبة]

عنوان السجلّ

publisher [مطلوبة]

اسم ناشر السجلّ

publisher-logo-src [مطلوبة]

عنوان URL لشعار ناشر السجل بتنسيق المربع (نسبة العرض إلى الارتفاع 1×1). على سبيل المثال: publisher-logo-src="https://example.com/logo/1x1.png" حيث 1x1.png شعار بحجم 36x36 بكسل

poster-portrait-src [مطلوبة]

عنوان URL لملصق السجل بتنسيق عمودي (نسبة عرض إلى ارتفاع 3×4)

supports-landscape [اختيارية]

لتمكين عمل الاتجاه الأفقي على الأجهزة الجوالة وتجربة الاتجاه العمودي بحجم الصورة كاملة على أجهزة سطح المكتب

background-audio [اختيارية]

عنوان URL لملف الصوت الذي يتم تشغيله خلال السجل

poster-square-src [اختيارية]

عنوان URL لملصق السجل بتنسيق المربع (نسبة العرض إلى الارتفاع 1×1)

poster-landscape-src [اختيارية]

عنوان URL لملصق السجل بتنسيق الاتجاه الأفقي (نسبة العرض إلى الارتفاع 1×1)

الملصقات

"الملصق" عبارة عن صورة تُعرض في واجهة المستخدِم إلى أن يتم تحميل السجلّ. عادة ما يكون الملصق هو أول شاشة في السجل بالرغم من إمكانية استخدام أي صورة تمثل السجل.

العناصر الثانوية (للمكوِّن amp-story)

يحتوي المكوِّن <amp-story> على واحد أو أكثر من المكونات <amp-story-page> التي تتضمن كل الشاشات الفردية للسجلّ. وتظهر الصفحة الأولى المحددة في ترتيب المستند كأول صفحة في السجلّ.

تمكين الاتجاه الأفقي وتجربة حجم الصورة الكاملة على سطح المكتب

في حال تحديد السمة supports-landscape في العنصر <amp-story>، سيتم ما يلي:

  • السماح بعرض السجل عندما يكون الجهاز الجوال في وضع أفقي
  • تغيير التجربة على سطح المكتب إلى الوضع الكامل المجسم بدلاً من التجربة التلقائية للوحات الثلاثة بالاتجاه العمودي

الاستخدام: <amp-story ... supports-landscape>...</amp-story>

قبل: بعد:

الصفحات: amp-story-page

يمثل المكوِّن <amp-story-page> المحتوى الذي سيتم عرضه على صفحة واحدة من السجل.

مثال

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-video layout="fill" src="background.mp4" poster="background.png" muted autoplay></amp-video>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>These are the Top 5 World's Most...</h1>
    <p>Jon Bersch</p>
    <p>May 18</p>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="bottom-third" src="a-logo.svg" width="64" height="64"></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

السمات

id [مطلوبة]

هذه السمة هي معرّف فريد للصفحة. يمكن استخدامها لتنسيق نمط الصفحة وعناصرها التابعة في CSS، كما تُستخدم لتعريف الصفحة بشكل فريد في جزء عنوان URL.

auto-advance-after [اختيارية]

تحدد السمة وقت الانتقال التلقائي إلى الصفحة التالية. وعند إسقاطها، لن يتم الانتقال تلقائيًا إلى الصفحة التالية. يجب أن تكون قيمة auto-advance-after أي مما يلي:

  • مقدار موجب للوقت يجب انتظاره قبل أن تنتقل الصفحة تلقائيًا إلى الصفحة التالية
  • معّرف للعنصر HTMLMediaElement أو للفيديو video-interface الذي يؤدي إكماله إلى تشغيل التقدم التلقائي

مثال:

<amp-story-page id="tokyo" auto-advance-after="1s">;
background-audio [اختيارية]

معرف الموارد المنتظم لملف الصوت الذي يتم تشغيله أثناء عرض هذه الصفحة

مثال:

<amp-story-page id="zurich" background-audio="./media/switzerland.mp3">;

العناصر الثانوية (للمكوِّن amp-story-page)

يحتوي المكوِّن <amp-story-page> على طبقة واحدة أو أكثر. ويتم ترتيب الطبقات بالعكس (بحيث تكون الطبقة الأولى المحددة في DOM في القاع والطبقة الأخيرة المحددة في DOM في الأعلى).

الطبقات

يتم تكديس الطبقات فوق بعضها البعض لإنشاء التأثير المرئي المطلوب.

amp-story-grid-layer

يضع المكوِّن <amp-story-grid-layer> عناصره الثانوية في شكل شبكة. ويستند تنفيذه على مواصفات شبكة CSS.

+ + =

السمات

template [مطلوبة]

تحدد السمة template تنسيق الطبقة الشبكية. وقد تم شرح النماذج المتاحة في قسم النماذج أدناه.

grid-area [اختيارية]

يتم تحديد هذه السمة بناء على العناصر الثانوية للمكوِّن <amp-story-grid-layer>. تحدد grid-area المنطقة المعينة (من استخدام template الذي يحددها) التي يجب أن يظهر فيها العنصر المُتضمِّن لهذه السمة.

مثال:

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

النماذج

في ما يلي النماذج المتاحة لتحديد تنسيق الطبقة الشبكية.

للاطّلاع على نماذج التنسيق المستخدمة، يمكنك مراجعة العرض التوضيحي للتنسيقات في موقع "AMP بالمثال".

fill

يعرض النموذج fill العنصر الثانوي الأول بحجمه الكامل. ولا تظهر جميع العناصر الثانوية الأخرى.

المناطق المعينة: (لا شيء)

مثال:

<amp-story-grid-layer template="fill">
  <amp-img src="cat.jpg"></amp-img>
</amp-story-grid-layer>
vertical

يضع النموذج vertical عناصر بطول المحور الصادي. وتتم تلقائيًا محاذاة عناصره إلى الأعلى، ويمكن أن تأخذ كامل الشاشة بطول المحور السيني.

المناطق المعينة: (لا شيء)

<amp-story-grid-layer template="vertical">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>
horizontal

يضع النموذج horizontal عناصره بطول المحور السيني. وتتم تلقائيًا محاذاة عناصره إلى بداية السطر، ويمكن أن تأخذ كامل الشاشة بطول المحور الصادي.

المناطق المعينة: (لا شيء)

<amp-story-grid-layer template="horizontal">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>
thirds

يقسّم النموذج thirds الشاشة إلى ثلاثة صفوف متساوية، ويتيح لك إدخال محتوى في كل منطقة.

المناطق المعينة:

  • upper-third
  • middle-third
  • lower-third

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

العناصر الثانوية

يمكن أن يحتوي المكوِّن amp-story-grid-layer على أي من العناصر التالية:

ملاحظة: ستتم زيادة هذه القائمة بمرور الوقت.

المنطقة العلامات المسموح بها
الوسائط
  • <audio>
  • <amp-gfycat>
  • <amp-google-vrviemage>
  • <amp-img>
  • <amp-video>
  • <source>
  • <track>
التحليلات والقياس
  • <amp-analytics>
  • <amp-experiment>
  • <amp-pixel>
الفقرات
  • <address>
  • <article>
  • <aside>
  • <footer>
  • <h1>-<h6>
  • <header>
  • <hgroup>
  • <nav>
  • <section>
  • <amp-story-cta-layer>
النص
  • <abbr>
  • <amp-fit-text>
  • <amp-font>
  • <amp-gist>
  • <b>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <br>
  • <cite>
  • <code>
  • <data>
  • <del>
  • <dfn>
  • <div>
  • <em>
  • <figcaption>
  • <figure>
  • <hr>
  • <i>
  • <ins>
  • <kbd>
  • <main>
  • <mark>
  • <p>
  • <pre>
  • <q>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <time>
  • <u>
  • <var>
  • <wbr>
القوائم
  • <p-list>
  • <amp-live-list>
  • <dd>
  • <dl>
  • <dt>
  • <li>
  • <ol>
  • <ul>
الجداول
  • <caption>
  • <col>
  • <colgroup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
غير ذلك
  • <amp-install-serviceworker>
  • <noscript>

amp-story-cta-layer

يتيح المكوِّن <amp-story-cta-layer> استخدام العنصرين <a> و<button> في <amp-story-page>.

القيود

  • يجب أن يكون العنصر <amp-story-cta-layer> آخر طبقة في <amp-story-page> في حال تحديده. وبالتالي، يمكن أن يحتوي كل مكوِّن من <amp-story-page> على عنصر واحد من <amp-story-cta-layer> أو لا يحتوي على أي منها.
  • لا يمكن التحكم في تحديد ترتيب هذه الطبقة وحجمها. فهي دائمًا ما تكون 100% من عرض الصفحة و20٪ من ارتفاعها، مع المحاذاة إلى أسفل الصفحة.

مثال

<amp-story-page id="vertical-template-thirds">
  <amp-story-grid-layer template="thirds">
    <div class="content" grid-area="upper-third">Paragraph 1</div>
    <div class="content" grid-area="middle-third">Paragraph 2</div>
    <div class="content" grid-area="lower-third">Paragraph 3</div>
  </amp-story-grid-layer>
  <amp-story-cta-layer>
    <a href="https://amp.dev" class="button">Outlink here!</a>
  </amp-story-cta-layer>
</amp-story-page>

يمكن العثور على مثال كامل في دليل الأمثلة.

العناصر الثانوية

يتيح المكوِّن amp-story-cta-layer تقريبًا نفس العناصر التابعة للمكوِّن amp-story-grid-layer، بالإضافة إلى إتاحة العلامتين <a> و<button>.

للحصول على قائمة معدّلة بالعناصر الثانوية المعتمدة، احرص على الاطّلاع على الحقل amp-story-cta-layer-allowed-descendants في قواعد التحقق.

مرفقات الصفحة

amp-story-page-attachment

يمكنك إرفاق محتوى إضافي إلى صفحة السجل.

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

يجب أن يكون العنصر <amp-story-page-attachment> آخر عنصر ثانوي للمكوِّن <amp-story-page> ويجب أن يحتوي على السمة layout="nodisplay". ويُتوقع توفير محتوى رمز HTML لصفحات AMP المرفق مضمنًّا في سجلّ AMP، في هذه العلامة <amp-story-page-attachment>.

المحتوى المسموح به والمكونات المسموح بها

تقبل مرفقات صفحات السجل عناصر HTML نفسها التي يقبلها سجلّ AMP، بالإضافة إلى المكونات الواردة أدناه، مثل مشغلات الفيديو التابعة لجهات خارجية أو التضمينات في وسائل التواصل الاجتماعي. ويعني هذا أنه يمكنك إضافة محتوى آخر مطول للغاية أو غير مسموح به في صفحة سجلّ AMP.

قائمة بمكونات AMP المسموح بها في مرفق الصفحة:
  • <amp-3d-gltf>
  • <amp-3q-player>
  • <amp-accordion>
  • <amp-audio>
  • <amp-beopinion>
  • <amp-bodymovin-animation>
  • <amp-brid-player>
  • <amp-brightcove>
  • <amp-byside-content>
  • <amp-call-tracking>
  • <amp-carousel>
  • <amp-dailymotion>
  • <amp-date-countdown>
  • <amp-embedly-card>
  • <amp-facebook>
  • <amp-facebook-comments>
  • <amp-facebook-like>
  • <amp-facebook-page>
  • <amp-fit-text>
  • <amp-fx-collection>
  • <amp-fx-flying-carpet>
  • <amp-gfycat>
  • <amp-gfycat>
  • <amp-gist>
  • <amp-gist>
  • <amp-google-document-embed>
  • <amp-google-vrview-image>
  • <amp-google-vrview-image>
  • <amp-hulu>
  • <amp-ima-video>
  • <amp-image-slider>
  • <amp-img>
  • <amp-imgur>
  • <amp-instagram>
  • <amp-izlesene>
  • <amp-jwplayer>
  • <amp-kaltura-player>
  • <amp-list>
  • <amp-list>
  • <amp-live-list>
  • <amp-live-list>
  • <amp-mathml>
  • <amp-mowplayer>
  • <amp-nexxtv-player>
  • <amp-o2-player>
  • <amp-ooyala-player>
  • <amp-pan-zoom>
  • <amp-pinterest>
  • <amp-playbuzz>
  • <amp-powr-player>
  • <amp-reach-player>
  • <amp-reddit>
  • <amp-riddle-quiz>
  • <amp-soundcloud>
  • <amp-springboard-player>
  • <amp-timeago>
  • <amp-twitter>
  • <amp-video>
  • <amp-video-iframe>
  • <amp-vimeo>
  • <amp-vine>
  • <amp-viqeo-player>
  • <amp-vk>
  • <amp-wistia-player>
  • <amp-yotpo>
  • <amp-youtube>

مثال

<amp-story-page id="foo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg" width="900" height="1600">
  </amp-story-grid-layer>
  <amp-story-page-attachment layout="nodisplay">
    <h1>My title</h1>
    <p>Lots of interesting text with <a href="https://example.ampproject.org">links</a>!</p>
    <p>More text and a YouTube video!</p>
    <amp-youtube
        data-videoid="b4Vhdr8jtx0"
        layout="responsive"
        width="480" height="270">
    </amp-youtube>
    <p>And a tweet!</p>
    <amp-twitter
        data-tweetid="885634330868850689"
        layout="responsive"
        width="480" height="270">
    </amp-twitter>
  </amp-story-page-attachment>
</amp-story-page>

الحركات

يمكن إضافة حركة لدخول كل مكوِّن من <amp-story-page>.

يمكنك تهيئة الحركات من خلال تحديد مجموعة من سمات الحركات في العنصر، بدون الحاجة إلى إضافات AMP أخرى أو المزيد من التهيئة.

تأثيرات الحركات

تتوفر تأثيرات الحركات التالية كإعدادات مسبقة لسجلات AMP:

اسم الإعداد المسبق المدة التلقائية (ملي ثانية) المهلة التلقائية (ملي ثانية)
drop 1600 0
fade-in 500 0
fly-in-bottom 500 0
fly-in-left 500 0
fly-in-right 500 0
fly-in-top 500 0
pulse 500 0
rotate-in-left 700 0
rotate-in-right 700 0
twirl-in 1000 0
whoosh-in-left 500 0
whoosh-in-right 500 0
pan-left 1000 0
pan-right 1000 0
pan-down 1000 0
pan-up 1000 0
zoom-in 1000 0
zoom-out 1000 0

اطّلع على عرض توضيحي مباشر لجميع الحركات لسجلات AMP على الموقع "AMP بالمثال".

سمات الحركات

animate-in [مطلوبة]

استخدِم هذه السمة لتحديد اسم الإعداد المسبق لحركة الدخول.

مثال: العنوان يدخل من يسار الصفحة.

<h2 animate-in="fly-in-left">
Fly from left!
</h2>
animate-in-duration [اختيارية]

استخدِم هذه السمة لتحديد مدة حركة الدخول بالثواني أو بالملي ثانية (مثال: 0.2 ثانية أو 200 ملي ثانية). تعتمد المدة التلقائية على الإعداد المسبق الذي حددته للحركة.

مثال: العنوان يدخل من يسار الصفحة وتنتهي الحركة خلال نصف ثانية.

<h2 animate-in="fly-in-left" animate-in-duration="0.5s">
Fly from left!
</h2>
animate-in-delay [اختيارية]

استخدِم هذه السمة لتحديد المهلة الممنوحة قبل بدء الحركة. يجب أن تكون القيمة أكبر من 0 أو تساويه، بالثواني أو بالملي ثانية (مثال: 0.2 ثانية أو 200 ملي ثانية). وتعتمد المهلة التلقائية على الإعداد المسبق الذي حددته للحركة.

مثال: بعد 0.4 ثانية، يدخل العنوان من يسار الصفحة وينتهي دخوله خلال 0.5 ثانية.

<h2 animate-in="fly-in-left" animate-in-duration="0.5s" animate-in-delay="0.4s">
Fly from left!
</h2>

ليس هناك ما يضمن دقة مهلة انتهاء الحركة. فقد تحدث تأخيرات إضافية نتيجة تحميل الإضافة amp-animation في الخلفية عند فحص العنصر المتحرك الأول. يتم تحديد السمة كما يلي: مهلة هذه الحركة لا تقل عن (س) ملي ثانية. وينطبق هذا على جميع العناصر بما في ذلك العناصر التي لها مهلة 0 ثانية.

animate-in-after [اختيارية]

استخدِم هذه السمة لسلسلة أو متوالية من الحركات (مثل: تبدأ الحركة 2 بعد اكتمال الحركة 1). حدّد معرّف العنصر المتحرك الذي ستتبعه حركة هذا العنصر. يجب أن يكون العنصر متوفرًا على نفس <amp-story-page>. ويتم تطبيق المهلة بعد انتهاء حركة العنصر السابق. للحصول على مزيد من التفاصيل، اطّلع على القسم الحركات المتوالية أدناه.

في الترميز التالي مثلاً، يدخل object2 بعد اكتمال دخول object1:

<amp-story-page id="page1">
  <amp-story-grid-layer template="vertical">
    <div id="object1"
        animate-in="rotate-in-left">
        1
    </div>
    <div id="object2"
        animate-in="fly-in-right"
        animate-in-after="object1">
        2 <!-- will start after object1 has finished -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>
scale-start وscale-end [اختيارية، وتعمل فقط مع حركتَي zoom-in وzoom-out]

استخدِم هاتين السمتين لتحديد معلَمات إضافية لحركتَي zoom-in وzoom-out. يجب أن تكون القيمة أكبر من 0 أو تساويه، ويُسمح باستخدام الكسور العشرية. وستكون القيمة التلقائية للبداية التدريجية هي 1 والنهاية التدريجية هي 3 بالنسبة إلى zoom-in، والعكس صحيح بالنسبة إلى zoom-out.

مثال: يتم تكبير الصورة من 2x إلى 5x من حجمها خلال 4 ثوانٍ.

<amp-img animate-in="zoom-in" scale-start="2" scale-end="5" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720" height="320">
</amp-img>
translate-x [اختيارية، وتعمل فقط مع حركتَي pan-left وpan-right]

استخدِم هذه السمة لتحديد التدوير الأفقي للصورة في الحركة pan-left/pan-right. يجب أن تكون القيمة أكبر من 0 أو تساويه بالبكسل. ستكون القيمة التلقائية تدوير العرض الكامل للصورة المحددة.

مثال: تدوير الصورة 200 بكسل إلى اليسار خلال 10 ثوانٍ.

<amp-img animate-in="pan-left" translate-x="200px" animate-in-duration="10s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720" height="320">
</amp-img>
translate-y [اختيارية، وتعمل فقط مع حركتَي pan-up وpan-down]

استخدِم هذه السمة لتحديد التدوير الرأسي للصورة في الحركة pan-up/pan-down. يجب أن تكون القيمة أكبر من 0 أو تساويه بالبكسل. ستكون القيمة التلقائية تدوير الارتفاع الكامل للصورة المحددة.

مثال: تدوير الصورة 50 بكسل لأسفل خلال 15 ثانية.

<amp-img animate-in="pan-down" translate-y="50px" animate-in-duration="15s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720" height="320">
</amp-img>

الحركات المتوالية

استخدِم السمة animate-in-after لعمل متوالية من الحركات. يجب أن تكون جميع العناصر متوفرة على <amp-story-page> نفسها. ولن تنتمي العناصر التي ليس بها السمة animate-in-after إلى سلسلة متوالية وسيتم تشغيلها بشكل مستقل عند دخولها الصفحة.

<amp-story-page id="my-sequencing-page">
  <amp-story-grid-layer template="vertical">
    <div class="circle"
        animate-in="drop-in"
        animate-in-duration="1.8s">
      1 <!-- will start independently -->
    </div>
    <div id="rotate-in-left-obj"
        class="square"
        animate-in="rotate-in-left"
        animate-in-after="fade-in-obj"
        animate-in-delay="0.2s">
      2 <!-- will start after fade-in-obj has finished -->
    </div>
    <div class="square"
        animate-in-after="rotate-in-left-obj"
        animate-in="whoosh-in-right"
        animate-in-delay="0.2s">
      3 <!-- will start after rotate-in-left-obj has finished -->
    </div>
    <div id="fade-in-obj"
        class="circle"
        animate-in="fade-in"
        animate-in-duration="2.2s">
      1 <!-- will start independently -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

الجمع بين عدة حركات

يمكنك تطبيق حركات متعددة لدخول عنصر واحد (مثال: يدخل العنصر إلى الصفحة طائرًا ويتلاشى في نفس الوقت). لا يمكن تعيين أكثر من إعداد حركة مسبق للعنصر الواحد، ومع ذلك يمكن دمج العناصر ذات حركات الدخول المختلفة ليكون عنصرًا واحدًا.

<div animate-in="fly-in-left">
   <div animate-in="fade-in">
     I will fly-in and fade-in!
   </div>
</div>

إذا كان من المفترض أن تبدأ حركة مركبة بعد نهاية حركة عنصر مستقل، احرص على تعيين السمة animate-in-afterعلى نفس id في كل العناصر المدمجة المكوِّنة للحركة.

الشاشة الختامية: amp-story-bookend

العلامة amp-story-bookend هي الشاشة الختامية للسجل. وتحتوي على الروابط ذات الصلة وخيارات المشاركة وروابط حث المستخدِم على اتخاذ إجراء والمزيد.

لاستخدام هذه العلامة، أدرِج <amp-story-bookend> كعنصر ثانوي في <amp-story> مع السمة المطلوبة layout=nodisplay. يمكنك بعدها تحديد التهيئة JSON في ملف منفصل واستيرادها من خلال السمة src أو يمكنك وضعها مضمَّنة.

استيراد التهيئة JSON من خلال السمة src:

<amp-story standalone>
  <amp-story-page id="cover">
    ...
  </amp-story-page>
  <!-- `layout=nodisplay` is required. -->
  <amp-story-bookend src="bookendv1.json" layout=nodisplay>
  </amp-story-bookend>
<amp-story>

إذا لم تكن تريد جلب تهيئة الشاشة الختامية من الخادم، يمكنك أيضًا تحديدها بشكل مضمَّن:

<amp-story standalone>
  ...
  <amp-story-bookend layout=nodisplay>
    <script type="application/json">
      {
        "bookendVersion": "v1.0",
        "shareProviders": [ ... ],
        "components": [ ... ]
     }
    </script>
  </amp-story-bookend>
<amp-story>

عليك بعد ذلك ملء التهيئة JSON. وهذه هي مرحلة تخصيص الشاشة الختامية. وتبدو البنية العامة للتهيئة كما يلي:

{
  "bookendVersion": "v1.0",
  "shareProviders": [
    ...
  ],
  "components": [
    ...
  ]
}

يجب تحديد أنك تستخدم الإصدار 1.0 عن طريق تضمين السطر الأول.

مكونات الشاشة الختامية:

تتألف الشاشة الختامية من مجموعة متنوعة من المكونات. ويمكن أن تكون مقالات أو روابط لحث المستخدِم على اتخاذ إجراء أو نص أو غير ذلك المزيد.

ويتم تحديدها في الحقل components من تهيئة JSON. ويمكنك مراجعة القسم مثال على استجابة JSON أدناه للاطّلاع على مثال.

heading

يتضمن المكوِّن heading الحقل ```text الذي يمكن استخدامه لإضافة عنوان لمجموعة مقالات.

{
  "type": "heading",
  "text": "More to Read"
}

small

يمكن استخدام المكوِّن small لربط المقالات ذات الصلة. ويتطلب الحقول التالية: title وurl ويمكن اختياريًا استخدام الحقل image.

{
type: "small",
title: "This is India an the best places you should go",
url: "http://example.com/article.html",
image: "http://placehold.it/256x128"
}

landscape

يمكن استخدام المكوِّن landscape لتنسيقات المحتوى البديلة، مثل الفيديو. ويتطلب الحقول التالية: title وurl وimage. ويمكن اختياريًا إضافة الحقل category الذي يعرض عنوانًا فرعيًا فوق العنوان الرئيسي.

{
  "type": "landscape",
  "title": "TRAPPIST-1 Planets May Still Be Wet Enough for Life",
  "url": "http://example.com/article.html",
  "category": "astronomy",
  "image": "http://placehold.it/256x128"
}

portrait

يمكن استخدام المكوِّن portrait للربط بسجلات أخرى. ويتطلب الحقول التالية: title وurl وimage. ويمكن اختياريًا إضافة الحقل category الذي يعرض عنوانًا فرعيًا فوق العنوان الرئيسي.

{
  "type": "portrait",
  "category": "Science",
  "title": "New discovery found",
  "url": "http://example.com/article.html",
  "image": "http://placehold.it/312x416"
}

يتيح لك المكوِّن cta-link تحديد روابط لحث المستخدِم على اتخاذ إجراء (مثال: Read More أو Subscribe). ويحتوي هذا المكوِّن على المفتاح links الذي يحدد مصفوفة من الروابط. يمثل كل رابط منها كائنًا به قيم ```text وurl.

{
type: "cta-link",
links: [
{
text: "Sign Up",
url: "example.com/signup"
},
{
text: "Subscribe",
url: "example.com/subscribe"
}
]
}

textbox

يتيح المكوِّن ```textbox لك تحديد النص في الشاشة الختامية (مثال: المساهمون في الصورة). يتطلب هذا المكوِّن الصفيف text حيث يكون كل عنصر من عناصر الصفيف عبارة عن سطر من النص.

{
  "type": "textbox",
  "text": [
    "Food by Enrique McPizza",
    "Choreography by Gabriel Filly",
    "Script by Alan Ecma S.",
    "Direction by Jon Tarantino"
  ]
}

ربط صفحة AMP بصفحة AMP

بالنسبة إلى المستندات التي تُعرض في عارِض صفحات AMP، عادة ما تنقل الروابط إلى _top أو تُفتح في نافذة جديدة. ومع ذلك، قد يستمر عرض الروابط التي تؤدي إلى صفحات AMP في العارض. ولتفعيل هذا السلوك، أضِف "amphtml": true إلى المكوِّن الذي يتيح عمل الروابط. مثال:

...
{
  "type": "small",
  "title": "This is India an the best places you should go",
  "url": "http://example.com/my-amp-document.html",
  "image": "http://placehold.it/256x128",
  "amphtml": true
},
{
  "type": "cta-link",
  "links": [
    {
      "text": "Sign Up",
      "url": "example.com/signup",
      "amphtml": true
    },
    {
      "text": "Subscribe",
      "url": "example.com/subscribe"
    }
  ]
},
...

المشاركة على شبكات التواصل الاجتماعي

يتم تحديد تهيئة المشاركة على شبكات التواصل الاجتماعي في الحقل shareProviders من كائن الاستجابة وهو حقل اختياري.

يجب أن يحتوي هذا الحقل على سلسلة، تمثل كل حلقة فيها اسم موفر خدمة المشاركة (مثل twitter).

عند الحاجة إلى معلَمات إضافية، يجب استخدام كائن له أزواج المفتاح/القيمة. يجب أن يحتوي الكائن على provider رئيسي بقيمة (مثل facebook) يتوافق مع اسم الموفر. تعتمد أزواج المفتاح/القيمة التالية على موفر خدمة المشاركة.

قائمة الموفرين المتاحين هي نفس القائمة للمكوِّن amp-social-share.

يحتوي كل من هؤلاء الموفرين على مجموعة مختلفة من المعلَمات المتاحة (اطّلع على data-param-*). يأخذ كائن التهيئة هذه المعلَمات بدون البادئة data-param- (مثال: ستظهر data-param-app_id في كائن التهيئة باسم app_id).

التهيئة JSON

يجب أن تحتوي العلامة <amp-story-bookend> على السمة src التي توجِه إلى تهيئة JSON للشاشة الختامية. وتوصف بأنها نقطة نهاية عنوان URL التي تقبل طلبات GET وتعرض استجابة JSON بمحتوى الشاشة الختامية. وفي حال إسقاط العلامة، يعرض المكوِّن amp-story واجهة مستخدم تلقائية لشاشة النهاية. وتقع على النظام مسؤولية جلب البيانات الضرورية لعرض المقالات ذات الصلة والمقالات الرائجة. ويمكن عرض هذا من ملف JSON ثابت أو يتم إنشاؤه ديناميكًا (لحساب المقالات الرائجة حاليًا مثلاً).

مثال على استجابة JSON

// You must specify version v1.0.
"bookendVersion": "v1.0",
"shareProviders": [
  "email",
  "tumblr",
  {
    "provider": "twitter",
    // You can add custom sharing parameters depending on the social platform.
    "text": "This is custom share text that I would like for the Twitter platform"
  },
  {
    "provider": "facebook",
    // Facebook requires an `app_id` param
    "app_id": "MY_FACEBOOK_APP_ID"
  }
],
"components": [
    {
      "type": "heading",
      "text": "More to read"
    },
    {
      "type": "small",
      "title": "This is India an the best places you should go",
      "url": "http://example.com/article.html",
      "image": "http://placehold.it/256x128"
    },
    ...
  ]
}

المكونات الأخرى التي يمكن استخدامها في سجلات AMP

في ما يلي المكونات الأخرى التي يمكن استخدامها في سجلات AMP والتي تتطلب بعض التحذيرات الخاصة بالسجل.

لمعرفة المزيد عن المكونات المستخدَمة عمومًا، يمكنك الاطّلاع على قائمة العناصر الثانوية المسموح بها.

التحقق

اطّلِع على قواعد amp-story في مواصفات مدقق AMP.

الأقلمة

لأقلمة سجلك، أدرِج رمز اللغة في السمة lang في العلامة <html> في السجلّ، مثل <html lang="en"> للغة الإنجليزية. رموز اللغات المعتمدة كالتالي:

  • ar (العربية)
  • de (الألمانية)
  • en-GB (الإنجليزية، المملكة المتحدة)
  • en (الإنجليزية، الولايات المتحدة)
  • es-419 (الإسبانية، أمريكا الوسطى/اللاتينية)
  • es (الإسبانية، إسبانيا)
  • fr-CA (الفرنسية، كندا)
  • fr (الفرنسية، فرنسا)
  • hi (الهندية)
  • id (الإندونيسية)
  • it (الإيطالية)
  • ja (اليابانية)
  • ko (الكورية)
  • nl (الهولندية)
  • no (النرويجية)
  • pt-BR (البرتغالية، البرازيل)
  • pt (البرتغالية، البرتغال)
  • ru (الروسية)
  • tr (التركية)
  • vi (الفيتنامية)
  • zh-TW (الصينية التقليدية)
  • zh (الصينية المبسطة)

بالإضافة إلى ذلك، يمكنك تضمين السمة dir="rtl" في العلامة <html> في سجلك بالنسبة إلى اللغات التي تُكتب من اليمين إلى اليسار. وقد يتم استخدام هذا مع رمز اللغة أيضًا، مثل <html lang="ar" dir="rtl">.

موارد ذات الصلة

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub