هذا برنامج تعليمي غير تقني سيرشدك خلال تخصيص العلامة التجارية والمظهر لموقع Discourse الخاص بك.
مستوى المستخدم المطلوب: مسؤول
هل ترغب في تخصيص العلامة التجارية لموقعك، ولكنك لا تعرف من أين تبدأ؟ اقرأ المزيد لمعرفة ذلك!
معالج الإعداد
Discourse قابل للتخصيص بدرجة كبيرة! مكان جيد للبدء في تخصيص الموقع هو تسجيل الدخول بحساب المسؤول الخاص بك على الموقع و تشغيل معالج إعداد الموقع.
يسمح لك خيار “تكوين المزيد” في معالج الإعداد بتحديد شعار الموقع، ونظام الألوان، والخط، ونمط الصفحة الرئيسية للموقع:
يمكنك معاينة الخيارات المتاحة مباشرة على هذه الصفحة. انقر فوق الزر “التالي” عندما تجد الإعدادات التي تناسبك. لا تقلق، يمكنك دائمًا تغيير هذه الإعدادات لاحقًا إذا قررت أنها ليست ما تبحث عنه.
سمات الموقع
بمجرد أن يكون لديك تكوين أساسي في مكانه، فقد حان الوقت لتخصيص موقعك بشكل أكبر!
السمات هي تخصيصات واسعة تغير عناصر متعددة لأسلوب تصميم المنتدى الخاص بك، وغالبًا ما تتضمن أيضًا ميزات إضافية للواجهة الأمامية. تتمتع السمات بالقدرة على تغيير شكل وتخطيط المنتدى الخاص بك بشكل كبير.
يستضيف قسم Theme في Meta مجموعة متنوعة من السمات المعدة مسبقًا التي يمكنك استخدامها على موقعك لتخصيص مظهر موقعك. هذا هو أفضل مكان للبحث عن سمة لاستخدامها على موقعك. تفضل باختيار سمة ترغب في استخدامها لموقعك من هذا القسم.
بمجرد أن تقرر سمة لاستخدامها لموقعك، يمكنك إضافة السمة إلى موقعك من صفحة
Admin -> Customize -> Themes(الموجودة على.../admin/customize/themes). يمكنك أيضًا إجراء تغييرات على سمة موقعك، أو حتى إنشاء سمة جديدة تمامًا من هذه الصفحة.الدليل التمهيدي لاستخدام سمات Discourse هو دورة مكثفة في أساسيات سمات Discourse، ويوفر نظرة عامة على كيفية تثبيت السمات على موقع Discourse الخاص بك. اقرأ هذا الدليل للحصول على تعليمات حول كيفية تثبيت السمة التي اخترتها.
يمكنك أيضًا العثور على مزيد من المعلومات حول كيفية استخدام وإنشاء ومشاركة السمات الخاصة بك في:
مخططات الألوان
يمكنك تخصيص موقعك بشكل أكبر عن طريق ضبط مخطط الألوان من صفحة “Admin → Customize → Colors” (الموجودة على
/admin/customize/colors).لننشئ مخطط ألوان جديدًا لاستخدامه على موقعك بالنقر فوق الزر “+ جديد” في هذه الصفحة:
حدد مخطط ألوان موجودًا ليكون أساسًا لمخطط الألوان الجديد الخاص بك، ثم قم بتخصيص ألوان مخططك الجديد بالنقر فوق اللون المجاور لكل قسم لون:
لا تنس تسمية مخطط الألوان الجديد الخاص بك وحفظ التغييرات بمجرد الانتهاء!
بمجرد أن تكون راضيًا عن مخطط الألوان الخاص بك، يمكنك تعيينه للسمة الحالية الخاصة بك، ومعاينته لرؤية التغييرات التي تم تطبيقها على موقعك مباشرة.
سيتم أيضًا تطبيق تغييراتك تلقائيًا على الموقع بمجرد تحديث الصفحة.
لمزيد من المعلومات حول كيفية استخدام مخططات الألوان داخل Discourse، راجع:
Create and share a color scheme
مكونات السمة
على غرار السمات، لدى Discourse أيضًا “مكونات سمة” يمكنك استخدامها لتغيير العناصر السطحية لتصميم المنتدى الخاص بك، أو إضافة ميزات إضافية للواجهة الأمامية. أصغر وأكثر استهدافًا من السمات الكاملة، يمكن عمومًا (ولكن ليس دائمًا) دمجها مع مكونات سمات أخرى لإنشاء تصميم منتدى مخصص مصمم خصيصًا لمجتمعك.
يحتوي قسم Theme component في Meta على جميع مكونات سمات Discourse الرسمية وغير الرسمية. تصفح مكونات السمات المدرجة هناك، وإذا كنت ترغب في تثبيت أي منها على موقعك، فما عليك سوى اتباع التعليمات هنا: واجهة سمات Discourse وكيفية تثبيت مكونات السمات
تشمل بعض مكونات سمات Discourse الأكثر شيوعًا:
- Dark/Light Mode Toggle
- Brand Header
- DiscoTOC - automatic table of contents
- Custom Header Links
- Versatile Banner
العلامة التجارية للموقع
بالإضافة إلى الشعارات التي اخترتها في معالج إعداد الموقع، لدى Discourse أيضًا العديد من إعدادات العلامة التجارية الأخرى للموقع على صفحة “Admin → Settings → Branding” (الموجودة على
/admin/site_settings/category/branding) التي يمكنك استخدامها لإضافة صور وشعارات مخصصة إلى موقعك.من هذه الصفحة، يمكنك إضافة أنواع الشعارات التالية إلى موقعك:
logo- صورة الشعار في أعلى يسار موقعك. استخدم صورة مستطيلة عريضة بارتفاع 120 ونسبة عرض إلى ارتفاع أكبر من 3:1. إذا تُركت فارغة، سيتم عرض نص عنوان الموقع.logo small- صورة الشعار الصغيرة في أعلى يسار موقعك، والتي تظهر عند التمرير لأسفل. استخدم صورة مربعة 120 × 120. إذا تُركت فارغة، سيتم عرض رمز المنزل.digest logo- صورة الشعار البديلة المستخدمة في أعلى ملخص البريد الإلكتروني لموقعك. استخدم صورة مستطيلة عريضة. لا تستخدم صورة SVG. إذا تُركت فارغة، سيتم استخدام الصورة من إعدادlogo.mobile logo- الشعار المستخدم في النسخة المحمولة من موقعك. استخدم صورة مستطيلة عريضة بارتفاع 120 ونسبة عرض إلى ارتفاع أكبر من 3:1. إذا تُركت فارغة، سيتم استخدام الصورة من إعدادlogo.logo dark- بديل المخطط الداكن لإعداد الموقعlogo.logo small dark- بديل المخطط الداكن لإعداد الموقعlogo small.large icon- الصورة المستخدمة كأساس لأيقونات البيانات الوصفية الأخرى. يجب أن تكون أكبر من 512 × 512. إذا تُركت فارغة، سيتم استخدامlogo_small.manifest icon- الصورة المستخدمة كشعار/صورة شاشة على Android. سيتم تغيير حجمها تلقائيًا إلى 512 × 512. إذا تُركت فارغة، سيتم استخدامlarge_icon.manifest screenshots- لقطات شاشة تعرض ميزات ووظائف مثيلك على صفحة موجه التثبيت الخاص بها. يجب أن تكون جميع الصور عبارة عن تحميلات محلية وبأبعاد متساوية.favicon- أيقونة المفضلة لموقعك، راجع Favicon - Wikipedia. للعمل بشكل صحيح عبر شبكة توصيل المحتوى (CDN) يجب أن تكون بصيغة png. سيتم تغيير حجمها إلى 32 × 32. إذا تُركت فارغة، سيتم استخدامlarge_icon.apple touch icon- الأيقونة المستخدمة لأجهزة Apple التي تعمل باللمس. سيتم تغيير حجمها تلقائيًا إلى 180 × 180. إذا تُركت فارغة، سيتم استخدامlarge_icon.opengraph image- صورة opengraph الافتراضية، تستخدمها العديد من التطبيقات والمنصات لمعاينات الروابط عند عدم وجود صورة مناسبة أخرى للصفحة. يجب أن تكون مربعة في الوضع المثالي. إذا تُركت فارغة، سيتم استخدامlarge_icon.twitter summary large image- بطاقة Twitter “summary large image” (يجب أن يكون عرضها 280 بكسل على الأقل، وارتفاعها 150 بكسل على الأقل، ولا يمكن أن تكون بصيغة .svg). إذا تُركت فارغة، يتم إنشاء بيانات التعريف القياسية للبطاقة باستخدامopengraph_image، طالما أنها ليست أيضًا بصيغة .svg.
تخصيصات إضافية
الآن بعد أن أضفت سمة مخصصة، ومخطط ألوان، وبعض شعارات العلامة التجارية، وربما بعض مكونات السمات إلى موقعك، فقد انتهيت من جميع تخصيصات الموقع الأساسية!
إذا كنت لا تزال تبحث عن المزيد من الطرق لتخصيص موقع Discourse الخاص بك، فنحن نوصي بقراءة أي من المواضيع التالية التي قد تثير اهتمامك:
8 إعجابات
إذًا، ماذا يفعل Manifest screenshots فعليًا؟ أين تُستخدم هذه اللقطات؟ هل يكون ذلك عندما يقوم شخص ما بتثبيت مجتمعك كتطبيق محلي عبر متصفحه؟ هل الصور هي ما يظهر إذا جعلت مجتمعك قابلاً للاكتشاف باستخدام Discourse Discover؟
أرى لقطات الشاشة هذه عند استخدام خيار “إضافة إلى الشاشة الرئيسية” في Chrome على جهاز Android الخاص بي
إعجابَين (2)
مثير للاهتمام! اعتقدت أن هذا ما فعلوه، لكنني لم أرهم عند التثبيت على سطح المكتب (Chrome، Windows). لكن ربما لم أمنحهم وقتًا كافيًا للتحميل/الانتشار في مكان ما.
يسعدني أن أعرف أنني كنت على حق فيما يفعلونه، على الرغم من ذلك!
إعجاب واحد (1)
يبدو أن هذا القسم قد تم حذفه عن طريق الخطأ،
إعجاب واحد (1)
بعد قراءتها مرتين، أعتقد أنني فهمت. تم تضمين إرشادات الحجم أعلاه. على سبيل المثال:
أعتقد بشكل عام أن هذا الدليل قديم جدًا. لم يعد بإمكانك إضافة شعار أو تكوين المظهر والإحساس في المعالج. صفحة مسؤول السمات تبدو مختلفة تمامًا الآن، وتمت إعادة تسمية مخططات الألوان إلى لوحات ألوان.
تم نقل مكون سمة التبديل بين الوضع الداكن/الفاتح إلى النواة. ولدى العلامة التجارية صفحة تكوين جديدة على /admin/config/logo.
أتساءل فقط لماذا يختلف الحجم المذكور في صفحة التكوين عن الوصف عند النظر إلى إعداد الموقع.
600 × 80 يختلف عن الحد الأدنى 360 × 120.
إعجاب واحد (1)
هذا الموضوع قديم بعض الشيء نظرًا لأنه تم تجديد هذه الأشياء مؤخرًا.
إليك أفكاري حول بعض الاقتراحات الطفيفة (ولكن القيمة) للتحسينات:
إعجابَين (2)