يجب أن يكون العنوان العلوي لأي صفحة على DevSite هو <h1>
. يجب ألا يحتوي نص الصفحة على <h1>
آخر لتجنُّب إرباك المتصفّحات غير المرئية.
تحوِّل أداة nbgenerate
محتوى ونمذج HTML وMarkdown في DevSite إلى دفاتر ملاحظات Jupyter متوافقة مع Colab.
الأحجام
العنوان 1
عنوان 2
عنوان 3
عنوان 4
عنوان 5
عنوان 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
جدول المحتويات
في DevSite، تتم إضافة <h2>
و<h3>
تلقائيًا إلى جدول المحتويات "في هذه الصفحة".
إخفاء العناوين من قائمة المحتويات
لمنع إضافة عنوان (مثل "العنوان 2" و "العنوان 3" في القسم أعلاه، اللذان لا يظهران في قائمة المحتويات)، طبِّق class="hide-from-toc"
.
العنوان 2
عنوان 3
HTML
<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>
Markdown
## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}
تخصيص نص العناوين في قائمة المحتويات
إذا كنت تريد أن يختلف النص في قائمة المحتويات عن العنوان الفعلي (مثل هذا القسم)، اضبط سمة data-text
على العنوان:
العنوان 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
Markdown
## Heading 2 {: data-text='Custom text for the ToC'}
تضمين العناوين ضمن الجداول في جدول المحتويات
يمكنك أيضًا وضع <h2>
أو <h3>
داخل عنوان الجدول (<th>
) لإجبار إدراج الجدول في قائمة المحتويات. داخل عنوان الجدول، يتمّ تصميم <h2>
و<h3>
مثل النص العادي، ولن يتمكّن القرّاء من التمييز بينهما.
الروابط التي يمكن نسخها بالنقر عليها
في صفحات المستندات (وليس الصفحات "بملء الشاشة" مثل معظم الصفحات المقصودة)، تظهر أيضًا رؤوس غير <h1>
تتضمّن زرًا لنسخ الرابط، ولا يظهر هذا الزر إلا عند تمرير مؤشر الماوس فوق العنوان.
لإيقاف هذا الزر لعنوان معيّن، طبِّق class="no-link"
على العنوان.
عنوان 4
عنوان 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
Markdown
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
لفرض ظهور زر الرابط على عنوان لا يظهر عليه عادةً (مثل <h1>
أو أي عنوان على صفحة بعرض كامل)، أضِف class="add-link"
إلى العنوان.
العنوان 1
HTML
<h1 class="add-link">Heading 1</h1>
Markdown
# Heading 1 {:.add-link}
العناوين المرقّمة
لإضافة أرقام تسلسلية إلى عناوين <h2>
من أجل تصنيف الأقسام التي تحتوي على محتوى معقّد كخطوات مختلفة في عملية متعددة الخطوات، أضِف فئة مرقّمة إلى كل عنوان.
العنوان المرقّم الأول
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
العنوان الثاني المرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
العنوان الثالث المُرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
HTML
<h2 class="numbered">First numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Second numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Third numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Markdown
## First numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Second numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Third numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
العناوين الفرعية المرقّمة
لإضافة أرقام تسلسلية إلى عناوين <h3>
التي تليها عناوين <h2>
، أضِف فئة مرقّمة إلى كل عنوان <h3>
.
HTML
<h2 class="numbered">Numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
Markdown
## Numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
عنوان مرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
عنوان فرعي مرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
عنوان فرعي مرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة
عنوان فرعي مرقّم
المحتوى المعقد المكوّن من فقرات وقوائم وجداول وصور وفيديوهات وتطبيقات مصغّرة