المكونات

التنبيهات الجانبية

يستخدم كل نوع من أنواع التنبيهات الجانبية بناء الجملة ::: مع عنوانه الافتراضي.

عناوين مخصصة

محتوى غني داخل التنبيهات الجانبية

إليك كتلة كود داخل تنبيه جانبي:

npm install @astrojs/starlight

قائمة من العناصر:

العنصر الأول مع نص غامق
العنصر الثاني مع كود مضمّن
العنصر الثالث مع رابط إلى وثائق Starlight

CSS التنبيهات الجانبية

تحصل مكونات التنبيه الجانبي المدمجة في Starlight على زوايا مدوّرة وظل متعدد الطبقات:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

التبويبات

هذا هو محتوى تبويب النظرة العامة. يحتوي على نص عادي للتحقق من عرض التبويبات الأساسي.

تبويبات بمحتوى متنوع

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

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

العنصر الأول داخل تبويب
العنصر الثاني مع نص غامق
العنصر الثالث مع كود مضمّن

التبويبات المتزامنة

تشترك مجموعتا التبويبات هاتان في syncKey="pkg". يجب أن يؤدي تحديد تبويب في إحدى المجموعتين إلى تحديث الأخرى.

أمر التثبيت:

npm install @f5-sales-demo/docs-theme

pnpm add @f5-sales-demo/docs-theme

yarn add @f5-sales-demo/docs-theme

أمر التشغيل:

npm run dev

pnpm dev

yarn dev

الخطوات

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

git clone https://github.com/example/repo.git
cd repo

تثبيت التبعيات
Terminal window
```
npm install
```
تشغيل خادم التطوير
Terminal window
```
npm run dev
```
سيكون الموقع متاحاً على http://localhost:4321.

البطاقات

بطاقة منفردة

هذه بطاقة مستقلة مع أيقونة. البطاقات مفيدة لإبراز المعلومات أو الميزات الرئيسية.

شبكة البطاقات

الأداء

يُقدّم Astro صفحات خالية من JavaScript افتراضياً لتحميل أسرع للصفحات.

قابل للتخصيص

يوفر Starlight خيارات واسعة للسمات والإضافات.

سهل الوصول

تضمن ميزات إمكانية الوصول المدمجة وصول المحتوى إلى الجميع.

موثّق

التوثيق الشامل يجعل البدء أمراً سهلاً ومباشراً.

تخطيط متدرج

الخطوة الأولى

قم بتكوين إعدادات مشروعك ومتغيرات البيئة.

الخطوة الثانية

أنشئ صفحات المحتوى باستخدام تنسيق MDX.

الخطوة الثالثة

قم بالمعاينة محلياً باستخدام خادم التطوير.

الخطوة الرابعة

انشر على منصة الاستضافة التي تختارها.

بطاقات الروابط

توفر السمة مكوّن LinkCard الذي يعمل مع أيقونات أو بدونها. استورده من السمة:

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

وثائق Starlightتعرّف على كيفية بناء مواقع التوثيق باستخدام Starlight.

وثائق Astroاستكشف إطار عمل Astro للمواقع القائمة على المحتوى.

مع أيقونات

أضف خاصية icon باستخدام بناء الجملة prefix:name. جميع حزم الأيقونات الثماني مدعومة — راجع وثائق حزم الأيقونات للاطلاع على الكتالوج الكامل.

Lucide (`lucide:`)

جدار حماية تطبيقات الويب (WAF)سياسات الجدار الناري وإعداداته.

الشبكات متعددة السحاباتاتصال المواقع عبر السحابات.

Carbon (`carbon:`)

خدمات الأمانمجموعة أيقونات الأمان من IBM Carbon.

خدمات السحابةمجموعة أيقونات السحابة من IBM Carbon.

أيقونات Material Design (`mdi:`)

التحكم في الوصولأيقونة قفل الدرع من Material Design.

إدارة البياناتأيقونة قاعدة البيانات من Material Design.

Phosphor (`phosphor:`)

الدفاع ضد التهديداتأيقونة درع Phosphor.

الشبكة العالميةأيقونة كرة أرضية Phosphor.

Tabler (`tabler:`)

منصة السحابةأيقونة سحابة Tabler.

النشرأيقونة صاروخ Tabler.

علامة F5 التجارية (`f5-brand:`)

أمان السحابةأيقونة درع السحابة المميزة من F5.

جدار الحمايةأيقونة جدار الحماية المميزة من F5.

F5 Distributed Cloud (`f5xc:`)

هذه الأيقونات متعددة الألوان وتستخدم خصائص CSS المخصصة للتكيف مع ألوان الوضع الفاتح/الداكن.

حماية التطبيقات وAPIأيقونة حماية تطبيقات الويب وAPI من F5 XC.

دفاع Botأيقونة دفاع Bot من F5 XC.

HashiCorp Flight (`hashicorp-flight:`)

Terraformأيقونة HashiCorp Terraform.

Consulأيقونة HashiCorp Consul.

الشارات

متغيرات الشارة المضمّنة

جميع متغيرات الشارات الستة معروضة بشكل مضمّن:

افتراضي ملاحظة خطر نجاح تلميح تحذير

أحجام الشارة

صغير متوسط كبير

كل حجم مع متغيّر:

تلميح صغير خطر متوسط نجاح كبير

شارات العناوين

تستخدم العناوين التالية بناء جملة إضافة starlight-heading-badges.

مكتمل الميزات مستقر

يحتوي هذا العنوان على شارة نجاح تشير إلى أن الميزة مستقرة.

API تجريبي تجريبي

يحتوي هذا العنوان على شارة تحذير تشير إلى أن الـ API تجريبي.

نظام قديم مهمل

يحتوي هذا العنوان على شارة خطر تشير إلى الإهمال.

ميزة جديدة جديد

يحتوي هذا العنوان على شارة تلميح تشير إلى ميزة جديدة.

التوثيق محدّث

يحتوي هذا العنوان على شارة ملاحظة تشير إلى التحديثات الأخيرة.

شارة افتراضية معلومات

يحتوي هذا العنوان على شارة افتراضية دون تحديد متغيّر.

شارة الشريط الجانبي

تحقق من الشريط الجانبي: تحتوي هذه الصفحة على شارة “جديد” مع متغيّر tip مُطبّق عبر الـ frontmatter.

الجداول

جدول بسيط

الميزة	الحالة	الأولوية
الوضع الداكن	مدعوم	عالية
تكبير الصور	مدعوم	متوسطة
مخططات Mermaid	مدعوم	متوسطة
شارات العناوين	مدعوم	منخفضة

جدول مع محاذاة وكود

الخاصية	النوع	الافتراضي	الوصف
`title`	`string`	—	عنوان الصفحة المعروض في الرأس
`description`	`string`	`""`	وصف ميتا لتحسين محركات البحث
`sidebar.order`	`number`	`0`	ترتيب الفرز في الشريط الجانبي
`sidebar.badge`	`object`	`null`	الشارة المعروضة بجانب تسمية الشريط الجانبي
`template`	`"doc" \| "splash"`	`"doc"`	قالب تخطيط الصفحة

الصور

تختبر الصورة أدناه إضافة starlight-image-zoom. انقر للتكبير.

GitHub Avatar

شجرة الملفات

Directorysrc/
- Directorycontent/
  - Directorydocs/
    index.mdx
    01-environment-variables.mdx
    02-build-pipeline.mdx
    03-astro-config.mdx
    04-logo.mdx
    05-colors.mdx
    07-typography.mdx
    08-code-blocks.mdx
    09-components.mdx هذه الصفحة
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- Directoryplugins/
  - remark-mermaid.mjs
Directorystyles/
- custom.css
astro.config.mjs
package.json

فحوصات السمة

يختلف لون الحد الأيسر لكل متغيّر من التنبيهات الجانبية (أزرق، بنفسجي، أصفر، أحمر)
تنعكس صبغة خلفية التنبيه الجانبي بوضوح في الوضعين الفاتح والداكن
الظل خفيف لكنه مرئي حول كل تنبيه جانبي
زوايا مدوّرة (0.75rem) على جميع التنبيهات الجانبية
يستخدم لون مؤشر التبويب النشط لون التمييز
خط موصّل الخطوات مرئي بين الخطوات المرقّمة
تبقى التبويبات المتزامنة متزامنة عند التبديل بين المجموعات
تُعرض كتل الكود داخل التبويبات مع تمييز صحيح للصياغة
يتكيف لون حدود البطاقة بين الوضعين الفاتح والداكن
تأثير خلفية التمرير مرئي على البطاقات
يتطابق لون أيقونة السهم في LinkCard مع لون التمييز
يُزيح تخطيط التدرج البطاقات المتناوبة عمودياً
تُعرض الأيقونات بشكل صحيح داخل رؤوس البطاقات
تختلف ألوان خلفية الشارة لكل متغيّر بين الوضعين الداكن والفاتح
تستخدم شارات الوضع الداكن درجات عميقة (red-4، jade-4، tangerine-4، eggplant-4، bay-4)
تستخدم شارات الوضع الفاتح درجات فاتحة (red-1، jade-1، tangerine-1، eggplant-1، bay-1)
تتوافق شارات العناوين مع نص العنوان في السطر نفسه
تُعرض شارة الشريط الجانبي بجانب تسمية الصفحة
تتكيف ألوان حدود الجدول بين الوضعين الفاتح والداكن
يمتلك صف رأس الجدول خلفية مميزة
يعمل تكبير الصور عند النقر (starlight-image-zoom)
تستخدم خلفية شجرة الملفات الألوان المناسبة للسمة
ترث الأيقونات لون النص الحالي