تخصيص علامة موقعك التجارية

:bookmark: هذا برنامج تعليمي غير تقني سيرشدك خلال تخصيص العلامة التجارية ومظهر موقع Discourse الخاص بك.

:person_raising_hand: مستوى المستخدم المطلوب: مسؤول

هل ترغب في تخصيص العلامة التجارية لموقعك، ولكن لا تعرف من أين تبدأ؟ تابع القراءة لمعرفة المزيد!

معالج الإعداد

Discourse قابل للتخصيص بدرجة كبيرة! مكان جيد للبدء في تخصيصات الموقع هو تسجيل الدخول إلى حساب المسؤول الخاص بك على الموقع وتشغيل معالج إعداد الموقع. :mage:

يتيح لك معالج الإعداد تكوين عنوان موقعك، واللغة الافتراضية، وإعدادات الوصول (عام مقابل خاص، تسجيل مقابل الدعوة فقط، وما إذا كان يجب الموافقة على المستخدمين). هذه هي الخطوات الأساسية الأولى لتشغيل موقعك.

بمجرد اكتمال المعالج، يمكنك تخصيص مظهر موقعك بشكل أكبر - الشعارات، والألوان، والخطوط، والمزيد - من لوحة الإدارة.

يمكنك معاينة الخيارات المتاحة مباشرةً على هذه الصفحة. انقر فوق الزر “التالي” عندما تجد الإعدادات التي تناسبك. لا تقلق، يمكنك دائمًا تغيير هذه الإعدادات لاحقًا إذا قررت أنها ليست ما تبحث عنه.

سمات الموقع (Site Themes)

بمجرد حصولك على إعداد أساسي، حان الوقت لتخصيص موقعك بشكل أكبر! :sparkles:

السمات هي تخصيصات واسعة النطاق تغير عناصر متعددة في أسلوب تصميم المنتدى الخاص بك، وغالبًا ما تتضمن أيضًا ميزات إضافية للواجهة الأمامية. تتمتع السمات بالقدرة على تغيير مظهر وتخطيط المنتدى الخاص بك بشكل كبير.

يستضيف قسم #theme على Meta مجموعة متنوعة من السمات المُعدة مسبقًا التي يمكنك استخدامها على موقعك لتخصيص مظهر موقعك. هذا هو أفضل مكان للبحث عن سمة لاستخدامها على موقعك. انطلق واختر سمة تود استخدامها لموقعك من هذا القسم.

بمجرد أن تقرر السمة التي ستستخدمها لموقعك، يمكنك إضافة السمة إلى موقعك من صفحة الإدارة -> تخصيص -> السمات (الموجودة على العنوان /admin/config/customize/themes). يمكنك أيضًا إجراء تغييرات على سمة موقعك، أو حتى إنشاء سمة جديدة تمامًا من هذه الصفحة.

دليل المبتدئين لاستخدام سمات Discourse هو دورة مكثفة حول أساسيات سمات Discourse، ويوفر نظرة عامة حول كيفية تثبيت السمات على موقع Discourse الخاص بك. اقرأ هذا الدليل للحصول على إرشادات حول كيفية تثبيت السمة التي اخترتها.

:tipping_hand_woman: يمكنك أيضًا العثور على مزيد من المعلومات حول كيفية استخدام وإنشاء ومشاركة السمات الخاصة بك في:

لوحات الألوان (Color Palettes)

يمكنك تخصيص موقعك بشكل أكبر عن طريق تعديل لوحة الألوان الخاصة به من صفحة الإدارة -> الإعدادات -> الألوان (الموجودة على العنوان /admin/config/colors). :art:

من هنا يمكنك إنشاء لوحة ألوان جديدة، أو تحديد لوحة موجودة لتخصيصها، وتعيين اللوحات كـمخطط الإضاءة أو المخطط الداكن الافتراضي لسمتك.

حدد مخطط ألوان موجود ليكون أساس مخطط الألوان الجديد الخاص بك، ثم قم بتخصيص ألوان المخطط الجديد عن طريق النقر على اللون بجوار كل قسم لوني:

لا تنسَ تسمية مخطط الألوان الجديد الخاص بك وحفظ التغييرات بمجرد الانتهاء!

:tipping_hand_woman: هل تحتاج إلى مساعدة في اختيار الألوان؟ يمكن لأداة اختيار الألوان مثل Paletton - The Color Scheme Designer أن تكون مفيدة جدًا في هذا الشأن!

لمزيد من المعلومات حول كيفية استخدام لوحات الألوان داخل Discourse، راجع:

مكونات السمة (Theme Components)

على غرار السمات، يحتوي Discourse أيضًا على “مكونات السمة” التي يمكنك استخدامها لتغيير العناصر السطحية لتصميم المنتدى الخاص بك، أو إضافة ميزات إضافية للواجهة الأمامية. وهي أصغر وأكثر استهدافًا من السمات الكاملة، ويمكن عمومًا (وليس دائمًا) دمجها مع مكونات السمة الأخرى لإنشاء تصميم منتدى مخصص مصمم خصيصًا لمجتمعك. :gear:

يحتوي قسم #theme-component على Meta على جميع مكونات السمة الرسمية وغير الرسمية لـ Discourse. تصفح مكونات السمة المدرجة هناك، وإذا كنت ترغب في تثبيت أي منها على موقعك، فما عليك سوى اتباع الإرشادات هنا: واجهة سمة Discourse وكيفية تثبيت مكونات السمة

بعض مكونات سمة Discourse الأكثر شيوعًا تشمل:

:tipping_hand_woman: يحتوي Discourse أيضًا على زر تبديل مدمج للوضع الداكن/الفاتح يتم التحكم فيه بواسطة إعداد الموقع interface_color_selector، والذي يمكن ضبطه لعرض الزر في تذييل الشريط الجانبي أو الرأس.

:tipping_hand_woman: يحتوي وسم #theme-guides على Meta أيضًا على العديد من الأدلة الإرشادية التي تحتوي على أفكار لمزيد من تخصيص موقعك باستخدام مكونات السمة.

علامة الموقع التجارية (Site Branding)

يحتوي Discourse على صفحة مخصصة لإعداد الشعار على العنوان الإدارة -> الإعدادات -> الشعار (الموجودة على العنوان /admin/config/logo) حيث يمكنك إدارة جميع شعارات وأيقونات موقعك.

  • الشعار الأساسي (Primary logo) - يظهر في التنقل العلوي للموقع، وكذلك في الجزء العلوي من إشعارات البريد الإلكتروني للموقع. الحجم الموصى به هو 600 × 80 بكسل.
  • الشعار الأساسي (الوضع الداكن) (Primary logo dark) - بديل الوضع الداكن للشعار الأساسي. الحجم الموصى به هو 600 × 80 بكسل.
  • الأيقونة المربعة (Square icon) - نسخة مربعة من صورة الشعار تظهر في الجزء العلوي من الموقع وهي أيضًا شعار تطبيق الهاتف المحمول. الحجم الموصى به هو 512 × 512 بكسل.
  • أيقونة الموقع (Favicon) - سيظهر الشعار كأيقونة في علامة تبويب المتصفح والمفضلات/الإشارات المرجعية للمتصفح.
  • الشعار الصغير (Small logo) - صورة الشعار الصغيرة في الجزء العلوي الأيسر من موقعك، والتي تظهر عند التمرير لأسفل. إذا تُرك فارغًا، سيتم عرض رمز المنزل. الحجم الموصى به هو 120 × 120 بكسل.
  • الشعار الصغير (الوضع الداكن) (Small logo dark) - بديل الوضع الداكن للشعار الصغير. الحجم الموصى به هو 120 × 120 بكسل.

تحت قسم الجوال (Mobile):

  • شعار الجوال (Mobile logo) - الشعار المستخدم في نسخة الجوال من موقعك. إذا تُرِك فارغًا، سيتم استخدام الصورة من إعداد logo. استخدم صورة مستطيلة عريضة بارتفاع 120 ونسبة عرض إلى ارتفاع أكبر من 3:1.
  • شعار الجوال (الوضع الداكن) (Mobile logo dark) - بديل الوضع الداكن لشعار الجوال. استخدم صورة مستطيلة عريضة بارتفاع 120 ونسبة عرض إلى ارتفاع أكبر من 3:1.
  • أيقونة البيان (Manifest icon) - الصورة المستخدمة كشعار/صورة بداية التشغيل على نظام Android. إذا تُركت فارغة، سيتم استخدام large_icon. الحجم الموصى به هو 512 × 512 بكسل.
  • لقطات شاشة البيان (Manifest screenshots) - لقطات شاشة تعرض ميزات ووظائف نسختك في صفحة طلب التثبيت (يتم عرضها عند استخدام “الإضافة إلى الشاشة الرئيسية” على نظام Android). يجب أن تكون جميع الصور عمليات تحميل محلية وبنفس الأبعاد.
  • أيقونة لمس Apple (Apple touch icon) - الأيقونة المستخدمة لأجهزة لمس Apple. إذا تُركت فارغة، سيتم استخدام large_icon. الحجم الموصى به هو 180 × 180 بكسل. لا يوصى بخلفية شفافة.

تحت قسم البريد الإلكتروني (Email):

  • شعار الملخص (Digest logo) - صورة الشعار البديلة المستخدمة في الجزء العلوي من ملخص البريد الإلكتروني لموقعك. إذا تُركت فارغة، سيتم استخدام الصورة من إعداد logo. استخدم صورة مستطيلة عريضة. لا تستخدم صورة SVG.

تحت قسم وسائل التواصل الاجتماعي (Social media):

  • صورة OpenGraph - صورة opengraph الافتراضية، التي تستخدمها العديد من التطبيقات والمنصات لمعاينات الروابط عند عدم وجود صورة أخرى مناسبة للصفحة. إذا تُركت فارغة، سيتم استخدام large_icon.
  • صورة X الكبيرة للنظرة العامة (X summary large image) - ‘صورة كبيرة للنظرة العامة لبطاقة X’. إذا تُركت فارغة، يتم إنشاء بيانات التعريف للبطاقة العادية باستخدام صورة OpenGraph_image، طالما أنها ليست أيضًا .svg. الحجم الموصى به هو 280 × 150 بكسل على الأقل. لا تستخدم صورة SVG.

:tipping_hand_woman: للحصول على أفضل النتائج، نوصي باتباع إرشادات الحجم المذكورة أعلاه لكل نوع من أنواع الشعارات والأيقونات.

تخصيصات إضافية

الآن بعد أن أضفت سمة مخصصة، ولوحة ألوان، وبعض الشعارات التجارية، وربما بعض مكونات السمات إلى موقعك، تكون قد انتهيت من جميع تخصيصات الموقع الأساسية! :tada:

إذا كنت لا تزال تبحث عن المزيد من الطرق لتخصيص موقع Discourse الخاص بك، فننصحك بقراءة أي من المواضيع التالية التي قد تثير اهتمامك:

8 إعجابات

إذًا، ماذا يفعل Manifest screenshots فعليًا؟ أين تُستخدم هذه اللقطات؟ هل يكون ذلك عندما يقوم شخص ما بتثبيت مجتمعك كتطبيق محلي عبر متصفحه؟ هل الصور هي ما يظهر إذا جعلت مجتمعك قابلاً للاكتشاف باستخدام Discourse Discover؟

أرى لقطات الشاشة هذه عند استخدام خيار “إضافة إلى الشاشة الرئيسية” في Chrome على جهاز Android الخاص بي

إعجابَين (2)

مثير للاهتمام! اعتقدت أن هذا ما فعلوه، لكنني لم أرهم عند التثبيت على سطح المكتب (Chrome، Windows). لكن ربما لم أمنحهم وقتًا كافيًا للتحميل/الانتشار في مكان ما.

يسعدني أن أعرف أنني كنت على حق فيما يفعلونه، على الرغم من ذلك!

إعجاب واحد (1)

يبدو أن هذا القسم قد تم حذفه عن طريق الخطأ،

إعجاب واحد (1)

بعد قراءتها مرتين، أعتقد أنني فهمت. تم تضمين إرشادات الحجم أعلاه. على سبيل المثال:

أعتقد بشكل عام أن هذا الدليل قديم جدًا. لم يعد بإمكانك إضافة شعار أو تكوين المظهر والإحساس في المعالج. صفحة مسؤول السمات تبدو مختلفة تمامًا الآن، وتمت إعادة تسمية مخططات الألوان إلى لوحات ألوان.
تم نقل مكون سمة التبديل بين الوضع الداكن/الفاتح إلى النواة. ولدى العلامة التجارية صفحة تكوين جديدة على /admin/config/logo.
أتساءل فقط لماذا يختلف الحجم المذكور في صفحة التكوين عن الوصف عند النظر إلى إعداد الموقع.


600 × 80 يختلف عن الحد الأدنى 360 × 120.

إعجابَين (2)

هذا الموضوع قديم بعض الشيء نظرًا لأنه تم تجديد هذه الأشياء مؤخرًا.

إليك أفكاري حول بعض الاقتراحات الطفيفة (ولكن القيمة) للتحسينات:

3 إعجابات