توثيق Xingluo
Xingluo هو نظام إدارة محتوى مدونات حديث مبني على Astro والنمط البصري shadcn/ui. يقدم تجربة بصرية أكثر حداثة من خلال مكونات shadcn المسطحة والأنيقة ونظام الألوان OKLCH، ويدمج بشكل أصلي نظام تعليقات ودعم MDX اختياري ومشغلات الصوت/الفيديو.
فهرس التوثيق
| المستند | المحتوى |
|---|---|
| البدء | المتطلبات، التثبيت، التطوير المحلي، البناء والمعاينة |
| دليل التكوين | المرجع الكامل لـ xingluo.config.ts |
| إنشاء المحتوى | Frontmatter المقالات، بناء جملة Markdown/MDX، كتل الكود، التنبيهات، التحسينات |
| التدويل | التوجيه متعدد اللغات، سلاسل UI، الترجمة على مستوى المحتوى، إضافة لغة |
| نظرة عامة على الهندسة | هيكل الدليل، تدفق التكوين، تدفق العرض، خط أنابيب البناء |
| السمة والأنماط | متغيرات سمة shadcn، OKLCH، Tailwind v4، الوضع الداكن |
| نظام التعليقات | اختيار وتوصيل giscus / twikoo / waline |
| مشغلات الوسائط | استخدام APlayer / DPlayer في Markdown و MDX |
| تحسين محركات البحث | صور OG، RSS، خريطة الموقع، hreflang، canonical، البيانات المنظمة |
| البحث | تكامل بحث Flexsearch للنص الكامل |
| النشر | الاستضافة الثابتة، GitHub Pages، المتغيرات البيئية، Docker |
الميزات الأساسية
- أداء من الدرجة الأولى: توليد ثابت بواسطة Astro، أيقونات SVG مضمنة في وقت البناء (بدون JS في وقت التشغيل)، تحميل بطيء للتعليقات والمشغلات، تنظيف الأصول اليتيمة
- مرئيات حديثة: مكونات shadcn/ui new-york، فضاء ألوان OKLCH، وضع داكن سلس (حماية FOUC)
- متعدد اللغات: ترجمة على مستوى UI والمحتوى، توجيه
prefixDefaultLocale: false، إعلانات hreflang و x-default لتحسين محركات البحث - تحسين المحتوى: MDX اختياري، تظليل الكود ثنائي السمة Shiki، التنبيهات، جدول محتويات قابل للطي، جداول قابلة للتمرير
- وقت القراءة: تقدير ذكي (CJK بعدد الأحرف، اللاتينية بعدد الكلمات)، يظهر على البطاقات وصفحات التفاصيل
- مقالات ذات صلة: موصى بها تلقائيًا بناءً على الوسوم المشتركة
- تصنيفات المقالات: تعيين عبر frontmatter، مع صفحات تصنيف مخصصة وإدخال تنقل
- شريط جانبي ثابت لجدول المحتويات: جدول محتويات ثابت على اليمين على الشاشات الكبيرة، تتبع التمرير عبر IntersectionObserver
- نظام تعليقات: giscus / twikoo / waline، متوافق مع السمة، تحميل بطيء
- مشغلات الوسائط: APlayer للصوت و DPlayer للفيديو، مع نقاط دخول MD fence ومكونات MDX
- بحث: بحث Flexsearch للنص الكامل، فهارس لكل لغة، استمرار حالة View Transitions
- SEO كامل: صور OG ديناميكية (satori + sharp)، RSS، خريطة الموقع، بيانات JSON-LD المنظمة (BlogPosting + BreadcrumbList)، تسوية canonical
التقنيات المستخدمة
| الفئة | التقنية |
|---|---|
| الإطار | Astro 6.x |
| التنسيق | Tailwind CSS v4، مكونات نمط shadcn/ui، @tailwindcss/typography |
| الأيقونات | astro-icon + Font Awesome |
| المحتوى | Astro Content Collections، MDX، سلسلة إضافات remark/rehype |
| تظليل الكود | Shiki |
| البحث | Flexsearch |
| صور OG | satori + sharp |
| التعليقات | giscus / twikoo / waline |
| المشغلات | APlayer / DPlayer |
| التاريخ | dayjs |
| مدير الحزم | pnpm |
| اللغة | TypeScript |
الترخيص
AGPL-3.0
مشاركة هذا المقال: مشاركة عبر X مشاركة عبر Facebook مشاركة عبر Telegram مشاركة عبر Weibo مشاركة عبر البريد الإلكتروني