المكونات

الملاحظات الجانبية

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

عناوين مخصصة

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

فيما يلي كتلة كود داخل ملاحظة جانبية:

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.

البطاقات

بطاقة مفردة

Single Card

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

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

Performance

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

Customizable

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

Accessible

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

Documented

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

تخطيط متدرج

Step One

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

Step Two

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

Step Three

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

Step Four

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

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

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

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

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

Astro Documentationاستكشف إطار عمل Astro لمواقع الويب المدفوعة بالمحتوى.

مع الأيقونات

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

Lucide (`lucide:`)

Web App Firewallسياسات جدار الحماية والإعداد.

Multi-Cloud Networkingاتصال الموقع عبر السحابات.

Carbon (`carbon:`)

Security Servicesمجموعة أيقونات الأمان من IBM Carbon.

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

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

Access Controlأيقونة قفل الدرع من Material Design.

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

Phosphor (`phosphor:`)

Threat Defenseأيقونة الدرع من Phosphor.

Global Networkأيقونة الكرة الأرضية من Phosphor.

Tabler (`tabler:`)

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

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

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

Cloud Securityأيقونة درع السحابة من علامة F5 التجارية.

Firewallأيقونة جدار الحماية من علامة F5 التجارية.

F5 Distributed Cloud (`f5xc:`)

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

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

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

HashiCorp Flight (`hashicorp-flight:`)

Terraformأيقونة HashiCorp Terraform.

Consulأيقونة HashiCorp Consul.

الشارات

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

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

Default Note Danger Success Tip Caution

أحجام الشارات

Small Medium Large

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

Small Tip Medium Danger Large Success

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

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

مكتمل الميزات Stable

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

واجهة تجريبية Beta

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

نظام قديم Deprecated

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

ميزة جديدة New

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

التوثيق Updated

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

شارة افتراضية Info

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

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

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

الجداول

جدول بسيط

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

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

الخاصية	النوع	الافتراضي	الوصف
`title`	`string`	—	عنوان الصفحة المعروض في الرأس
`description`	`string`	`""`	وصف meta لتحسين محركات البحث
`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)
تستخدم خلفية FileTree الألوان المناسبة للسمة
ترث الأيقونات لون النص الحالي