اجعله بعلامتك التجارية
أين تغيّر اسم الموقع، والشعار، والسمة اللونية، والخطوط، وأيقونة الموقع، والصورة التي تظهر عند مشاركة صفحة.
شغّل الموقع بالأمر yarn dev أثناء التعديل: تُحدَّث الصفحة في كل مرة تحفظ فيها.
| لتغيير | عدّل |
|---|---|
| اسم الموقع وعنوانه ووصفه | الكتلة Metadata في messages/layout/en.json وmessages/layout/ar.json |
| الشعار | src/components/Logo.tsx |
| السمة اللونية | defaultTheme في src/app/[locale]/layout.tsx |
| ألوان السمة | src/Demo/ThemeColorSwitcher/themes.ts |
| الخطوط | src/app/[locale]/layout.tsx وsrc/styles/fonts.css |
| أيقونة الموقع | src/app/favicon.ico |
| الصورة التي تظهر عند مشاركة صفحة | public/meta_image.png |
| سطر حقوق النشر ورابط الإشارة | Footer.copyright في ملفات رسائل التخطيط، وsrc/components/shared/layout/footer/components/BottomSection.tsx |
اسم الموقع
الاسم الافتراضي هو Logo. يظهر في عدة نصوص، كل منها في ملفي الرسائل:
Metadata.siteNameوMetadata.titleوMetadata.descriptionفيmessages/layout/<locale>.json: الاسم الذي تعرضه محركات البحث وبطاقات المشاركة، وعنوان الصفحة الرئيسية ووصفها.Footer.copyrightوFooter.descriptionفي الملفين نفسيهما: سطر حقوق النشر في التذييل والجملة التي تحت الشعار. يملأ الموقع{year}في سطر حقوق النشر بنفسه، فأبقه كما هو.DashboardMockup.brandفيmessages/home/<locale>.json: الاسم الظاهر في الشريط الجانبي لمعاينة لوحة التحكم.
لكل صفحة أخرى عنوانها ووصفها في كتلة meta الخاصة بها، مثل PricingPage.meta في messages/pricing/<locale>.json.
الشعار
الشعار نص: كلمة LOGO يتبعها رمز ® بلون السمة، يرسمه src/components/Logo.tsx. تستخدم الترويسة والتذييل وصفحات تسجيل الدخول هذا المكوّن نفسه، فتغيّره في مكان واحد.
غيّر الكلمة في LogoContent، أو استبدل عنصري <span> فيه بصورتك الخاصة، مثل ملف تضعه في public/:
import Image from "next/image";
<Image src="/your-logo.svg" alt="Your brand" width={120} height={28} priority />الألوان والسمات
الموقع داكن ويأتي بأربع سمات لونية. السمة المستخدمة هي defaultTheme الممرَّرة إلى <Providers> في src/app/[locale]/layout.tsx، وهي blue افتراضيًا:
<Providers defaultTheme="blue">| السمة | اللون الرئيسي |
|---|---|
monochrome | #e4e4e7، رمادي فاتح على خلفية شبه سوداء |
blue | #3b82f6 |
purple | #a855f7 |
cyan | #06b6d4 |
لاستخدام لون علامتك التجارية، عدّل سمة واحدة في src/Demo/ThemeColorSwitcher/themes.ts، مثل brandPrimary للون الرئيسي وbgDark لخلفية الصفحة، وأبقِ اسمها في defaultTheme.
مع yarn dev، تتيح لك لوحة عائمة معاينة السمات. هي موجودة في وضع التطوير فقط: لا يتضمنها yarn build ولا yarn start ولا صورة Docker. يتذكر المتصفح ما تختاره فيها، ويتغلب هذا الاختيار على defaultTheme أثناء التطوير.
الخطوط
| الخط | الاستخدام | يُحمَّل في |
|---|---|---|
| DM Sans | النص الإنجليزي | src/app/[locale]/layout.tsx، من Google Fonts عبر next/font |
| Clash Display | العناوين الإنجليزية | src/styles/fonts.css، من الملفات الموجودة في public/font/clash-display/ |
| Noto Sans Arabic | النص العربي | src/app/[locale]/layout.tsx، عبر next/font |
| Almarai | العناوين العربية | src/app/[locale]/layout.tsx، عبر next/font |
تُنزَّل خطوط Google عند بناء الموقع ثم يقدّمها الموقع بنفسه. يختار src/styles/base.css خط العناوين وخط النص لكل اتجاه.
لاستخدام خط Google آخر، استورده من next/font/google في layout.tsx بدلًا من أحد هذه الخطوط، وأعطه اسم variable نفسه، مثل --font-dm-sans-next.
أيقونة الموقع
استبدل src/app/favicon.ico بأيقونتك الخاصة بالاسم نفسه. يقدّمها Next.js على /favicon.ico ويربطها من كل صفحة.
الصورة التي تظهر عند مشاركة صفحة
تعرض الشبكات الاجتماعية وتطبيقات المحادثة الصورة public/meta_image.png بمقاس 1200 في 630 بكسل عندما يشارك أحد صفحة. استبدلها بصورتك بالمقاس نفسه. وإذا غيّرت المقاس، فغيّر width وheight في ogImage داخل src/config/site.ts أيضًا.
وصفها لقارئات الشاشة هو Metadata.imageAlt في ملفات رسائل التخطيط. أما مقال المدونة فيشارك صورة الغلاف الخاصة به بدلًا منها.
سطر الإشارة في التذييل
يعرض أسفل التذييل سطر حقوق النشر ورابط «صُنع بـ ❤️ بواسطة aniq-ui». كلماته هي Footer.copyright وFooter.madeWith في ملفات رسائل التخطيط، والرابط في src/components/shared/layout/footer/components/BottomSection.tsx. غيّره أو احذفه كما تشاء.
كيف تعمل السمات اللونية
مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.
كيف تُطبَّق السمة قبل رسم الصفحة، وما رموز الألوان التي تضبطها، وكيف تتبع الصور السمة.