AMP

أدلة التنسيق والبرامج التعليمية

يجري تقديم الأدلة والبرامج التعليمية بلغة ترميز، مع تنسيق إضافي للمقدمة والرموز المختصرة.

مواقع المستندات

يؤخذ المحتوى الموجود على amp.dev من مستودعين، amp.dev و AMPHTML. ويتم أخذ جميع المستندات المرجعية تحت المكونات من AMPHTML إما من الوحدات المدمجة أو من الملحقات.

ثمة العديد من المستندات الأخرى التي يجري استيرادها إلى amp.dev منAMPHTML. وهي مدرجة في هذا الملف. لا تقم بتحديث هذه المستندات في مستودع amp.dev – سوف تتم الكتابة فوق تغييراتك في عمليات البناء التالية!

المقدمة

توجد المقدمة في أعلى كل دليل وبرنامج تعليمي.

مثال:

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title عنوان المستند الخاص بك كما يظهر في جدول المحتويات. اكتب الحرف الأول من الكلمة بحرف كبير، باستثناء “AMP” والأسماء الصحيحة الأخرى. واستخدم علامة الضم & بدلا من كلمة و.
$order حدد أين سيظهر جدول المحتويات للمستند الخاص بك. قد تحتاج إلى تحرير $order في المستندات الأخرى لكي يظهر في الموضع الصحيح.
formats اسرد خبرات AMP التي يتعلق بها المستند الخاص بك. إذا كان المستند يتعلق بمواقع ويب AMP وقصص AMP، ولكنه لا يتعلق بإعلانات AMP أو رسائل AMP الإلكترونية، فإن المقدمة ستكون كالتالي: `تنسيقاتyaml : - مواقع الويب - القصص ``</td> </tr> <tr> <td> <code>author</code> </td> <td>أنت المؤلف! استخدم اسم مستخدم GitHub الخاص بك.</td> </tr> <tr> <td> <code>contributors</code> </td> <td>اسرد أي شخص ساهم في كتابة مستندك. هذا الحقل اختياري.</td> </tr> <tr> <td> <code>description</code> </td> <td>اكتب وصفًا مختصرًا للدليل أو البرنامج التعليمي. يساعد هذا الأمر في تحسين محرك البحث، ما يسهم في إيصال عملك إلى الأشخاص الذين يحتاجون إليه!</td> </tr> <tr> <td> <code>tutorial</code> </td> <td>أضفtutorial: true` إلى مقدمة موقع الويب لإضافة رمز البرنامج التعليمي بجواره. توجد البرامج التعليمية في أسفل القسم الخاص به في جدول المحتويات.

الرموز المختصرة

للاطلاع على قائمة بالرموز المختصرة واستخداماتها، يرجى عرض documentation.md على GitHub.

الصور

يتم دمج amp.dev مع AMP! بالتالي يجب أن تطابق الصور الخاصة بنا معايير amp-img. تستخدم عملية الإنشاء البنية التالية لتحويل الصور إلى تنسيق amp-img صحيح.

Image of basic amp script tutorial starter app

تصفية الأقسام

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

&lsqb;filter formats="websites"]
This is only visible for [websites](?format=websites).
&lsqb;/filter]

&lsqb;filter formats="websites"]
This is only visible for [websites](?format=websites).
&lsqb;/filter]

&lsqb;filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
&lsqb;/filter]

&lsqb;filter formats="stories"]
This is visible for [stories](?format=stories).
&lsqb;/filter]

تلميحات

يمكنك إضافة تلميحات واستدعاءات من خلال طي النص في الرمز المختصر التالي:

&lsqb;tip type="default"]
Default tip
[/tip]

&lsqb;tip type="important"]
Important
[/tip]

&lsqb;tip type="note"]
Note
[/tip]

&lsqb;tip type="read-on"]
Read-on
[/tip]

قصاصات الرموز البرمجية

ضع قصاصات الرموز البرمجية داخل مجموعات من ثلاث علامات اقتباس، وحدد اللغة في نهاية المجموعة الأولى من علامات الاقتباس.

```html
  // code sample

wzxhzdk:1



wzxhzdk:2



تحذير: يتم إدراج الأمثلة المضمنة مباشرة في الصفحة. قد يؤدي ذلك إلى تعارضات إذا كانت المكونات مستعملة بالفعلة في الصفحة (على سبيل المثال `amp-consent`).

### معاينة الإطار العلوي

استخدم معاينة الإطار العلوي متى احتجت إلى تحدي عناصر الرأس أو تحديد أنماط عمومية داخل `
    
    
      

Hello AMP

``` [/example]
فيما يلي الصورة التي سيكون عليها: [example preview="top-frame" playground="true"] wzxhzdk:3
فتح هذه القصاصة في الساحة
### قصص AMP استخدم `preview="top-frame"` مع `orientation="portrait"` لمعاينة قصص AMP.
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
فيما يلي الصورة التي سيكون عليها: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
فتح هذه القصاصة في الساحة
### عناوين URL المطلقة لرسائل AMP الإلكترونية لاحظ كيف نستخدم لإنشاء عنوان URL مطلق لنقطة النهاية في حالة تضمينه داخل رسالة AMP إلكترونية.
```html
``` [/example]
فيما يلي الصورة التي سيكون عليها: [example preview="top-frame" playground="true"] wzxhzdk:5
فتح هذه القصاصة في الساحة
### الخروج من قوالب الشارب فيما يلي مثال لـ `top-frame` يستخدم نقطة نهاية بعيدة. ويلزم الخروج من قوالب الشارب في الأمثلة باستخدام و:
```html ``` [/example]
فيما يلي الصورة التي سيكون عليها: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
فتح هذه القصاصة في الساحة
## الارتباطات يمكنك عمل ارتباط بصفحات أخرى باستخدام بنية ارتباط برنامج الترميز القياسي: wzxhzdk:7 عند الارتباط بصفحة أخرى على amp.dev سيكون المرجع هو مسار ملف نسبي إلى الملف الهدف. ### وحدات الإرساء يمكن الارتباط بأقسام معينة في مستند باستخدام وحدات الإرساء: wzxhzdk:8 الرجاء إنشاء هدف إرساء باستخدام `