اجعله بعلامتك التجارية
أين تغيّر اسم لوحة التحكم، والشعار، ولون العلامة، والخطوط، وأيقونة الموقع، واعتماد التذييل.
شغّل لوحة التحكم بالأمر yarn dev أثناء التعديل: تُعاد الصفحة تلقائيًا عند كل حفظ.
| لتغيير | عدّل |
|---|---|
| الاسم، وعنوان تبويب المتصفح، والوصف | الكتلة Metadata في messages/common/en.json وmessages/common/ar.json |
| الاسم في صفحتي تسجيل الدخول والهبوط | Login.title وHero.title في messages/auth/en.json وmessages/auth/ar.json |
| الشعار | public/assets/images/icons/logo.svg |
| لون العلامة | DEFAULT_THEME_COLOR في src/Demo/ThemeColorSwitcher/themes.ts |
| الخطوط | src/app/[locale]/layout.tsx وsrc/styles/base.css وsrc/styles/fonts.css |
| أيقونة الموقع | src/app/favicon.ico |
| اعتماد التذييل | src/app/[locale]/dashboard/layout.tsx |
الاسم
الاسم الافتراضي هو Financial Dashboard. غيّره في اللغتين، في كل من هذه النصوص:
Metadata.siteNameوMetadata.titleTemplateفيmessages/common/<locale>.json: الاسم في تبويب المتصفح. يُستبدل%sفي القالب بعنوان كل صفحة؛ أبقِه كما هو.Metadata.descriptionفي الملفات نفسها، وtitleوdescriptionلكل صفحة ضمنMetadata.pages.Login.titleوHero.titleفيmessages/auth/<locale>.json: عنوان صفحة تسجيل الدخول وصفحة الهبوط على/en.
الشعار
الشعار هو public/assets/images/icons/logo.svg. يعرضه الشريط الجانبي في أعلاه، وتعرضه بطاقات الدفع في زاويتها. استبدل الملف بملف SVG الخاص بك بالاسم نفسه ليتبعه الاثنان.
الشعار المرفق رمادي فاتح، لذلك يغمّقه الشريط الجانبي في الوضع الفاتح ليبقى ظاهرًا على الخلفية البيضاء. إذا كان شعارك داكنًا أصلًا، فاحذف brightness-50 من أصنافه في src/layouts/Sidebar/components/SidebarLogo.tsx:
className="object-contain dark:brightness-100 brightness-50"الألوان
لون العلامة برتقالي افتراضيًا، وتتوفر أربع سمات ألوان: برتقالي وأزرق وذهبي وفضي. اختر إحداها بسطر واحد، DEFAULT_THEME_COLOR في src/Demo/ThemeColorSwitcher/themes.ts:
export const DEFAULT_THEME_COLOR = "orange";الخطوط
| الخط | الاستخدام | يُحمَّل في |
|---|---|---|
| Inter | الإنجليزية | src/app/[locale]/layout.tsx، من Google Fonts عبر next/font، ويُطبَّق في src/styles/base.css |
| Noto Sans Arabic | العربية | src/app/[locale]/layout.tsx، عبر next/font، ويُطبَّق على الصفحات من اليمين إلى اليسار في src/styles/fonts.css |
تُنزَّل الخطوط عند بناء التطبيق ثم يقدّمها التطبيق بنفسه. لاستخدام خط Google آخر، استورده من next/font/google في layout.tsx بدلًا من أحدها، وأعطه اسم variable نفسه، --font-inter أو --font-noto-arabic.
أيقونة الموقع
استبدل src/app/favicon.ico بأيقونتك الخاصة بالاسم نفسه. يقدّمها Next.js على /favicon.ico ويربطها من كل صفحة.
المستخدم المسجَّل الدخول
الاسم والصورة في قائمة المستخدم بالترويسة هما للحساب المؤقت، John Carter، المضبوط في src/config/demo-account.ts. وبعد ربط تسجيل الدخول بواجهتك البرمجية، تعرض القائمة المستخدم الذي تعيده واجهتك.
اعتماد التذييل
تحت كل صفحة من لوحة التحكم، يعرض التذييل "By Aniq UI" مع رابط. الكلمة "By" هي Footer.by في ملفات الرسائل المشتركة؛ أما الاسم والرابط ففي src/app/[locale]/dashboard/layout.tsx. غيّر <footer> هناك أو احذفه كما تشاء.