Extending the Dashboard
Extending the Dashboard
ابدأ بالمعنى، ثم انتقل إلى التفاصيل.
هذا الدرس يشرح Extending the Dashboard ضمن موضوع داخل Hermes وكيف يوسّعه المطور. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.
إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟
للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.
للمتخصص: راجع Table of contents، Themes، Quick start — your first theme، ثم افحص حالات الفشل والتوافق مع إصدارك.
اعرف Python وGit وبنية مشروع برمجي قبل تعديل الكود.
نتيجة واضحة قبل أن تقرأ.
- تفهم Extending the Dashboard من دون افتراض معرفة سابقة.
- تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
- اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
Build themes and plugins for the Hermes web dashboard — palettes, typography, layouts, custom tabs, shell slots, page-scoped slots, and backend API routes
ما الذي يقوله المصدر، وبأي ترتيب؟
- 01Table of contents
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
- 02Themes
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 03Quick start — your first theme
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 04Palette, typography, layout
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 05Palette (3-layer)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 06Typography
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 07Changing the font from the UI (no YAML)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 08Layout
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 09Layout variants
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
- 10Theme assets (images as CSS vars)
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.
انسخ بعد أن تفهم الأثر.
mkdir -p ~/.hermes/dashboard-themes# ~/.hermes/dashboard-themes/neon.yaml
name: neon
label: Neon
description: Pure magenta on black
palette:
background: "#000000"
midground: "#ff00ff"palette:
background:
hex: "#05091a"
alpha: 1.0
midground: "#d8f0ff" # bare hex, alpha = 1.0
foreground:
hex: "#ffffff"
alpha: 0 # invisible top layer
warmGlow: "rgba(255, 199, 55, 0.24)"
noiseOpacity: 0.7اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.