🌅 تقديم Horizon، تصميمنا الأحدث

على مدار الأشهر القليلة الماضية، عملنا بجد على أحدث سمات Discourse لدينا، Horizon، واليوم يسعدنا أن نشارك عملنا معكم وندعوكم لتجربة Horizon في مجتمعكم.



في هذا الموضوع، سنتحدث عن Horizon وسنوضح لك كيفية التثبيت.

:sun: كل شيء عن Horizon

Horizon هي سمة بسيطة وجميلة مصممة لتوفير تجربة مستخدم رائعة للمجتمعات دون جهد إضافي من جانب المسؤول. يعكس الاسم أملنا في أن تعبر هذه السمة عن رؤية أوسع لمن يمكنه استخدام Discourse وكيف يمكن أن تبدو مجتمعات Discourse.

وضع الإضاءة

وضع الظلام

:woman_shrugging: لماذا بنينا Horizon؟

لقد بنينا Horizon لتسهيل الأمر على أي شخص لبدء مجتمع Discourse ومشاركته بفخر مع أعضائه.

من خلال التحدث مع مسؤولي Discourse، علمنا أن أحد أهم أجزاء بدء مجتمع هو تعديل مظهره للتأكد من أنه مساحة مرحبة وممتعة لأعضاء المجتمع. Horizon يجعل من الممكن الحصول على مجتمع يبدو رائعًا دون جهد إضافي أو تخصيص.

:mirror: لمن Horizon؟

تم تصميم Horizon للمجتمعات التي ليس لديها الخبرة أو الموارد لتخصيص مظهر Discourse.

نحن فخورون بمدى مرونة وقابلية تخصيص Discourse - وهذا لن يتغير! لكننا نعتقد أن المزيد من Discourse في العالم هو أمر جيد، وأن أفضل طريقة للقيام بذلك هي تسهيل ازدهار المجتمعات الأقل خبرة تقنية مع منتجنا.

:magic_wand: ما الذي يجعل Horizon مميزًا؟

بينما Default عبارة عن لوحة فارغة، فإن Horizon لديه آراء. إنه يقدر المساحة الواسعة والبساطة وجماليات التصميم الحديث.

لرؤية الفرق، استخدم مفتاح تبديل السمة في أسفل الشريط الجانبي هنا في Meta للتبديل إلى Horizon:

إليك بعض الأشياء التي ستلاحظ أنها مختلفة في Horizon:

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

:gear: استخدام Horizon

يمكنك تمكين Horizon لأعضائك في خطوات قليلة فقط:

  1. انتقل إلى منطقة :wrench: الإدارة، وانتقل إلى قسم المظهر، وانقر فوق السمات والمكونات.
  2. ابحث عن بطاقة سمة Horizon، وانقر فوق زر ، وحدد تعيين كنشط لجعل Horizon السمة الافتراضية الجديدة لمجتمعك. (قد تحتاج إلى تحديث شاشتك لرؤية هذا التغيير.)

يمكنك اختياريًا تمكين أي من لوحات الألوان الجديدة، والتي تم بناؤها خصيصًا للعمل بشكل جيد مع Horizon.

> :warning: ملاحظة: يمكنك استبدال اللوحات المستخدمة في Horizon، ولكن فقط اللوحات المسماة Clover و Horizon و Lily و Marigold و Royal و Violet ستظهر في منتقي الألوان في الشريط الجانبي.

تعليمات حول تكوين لوحات الألوان.
  1. انقر فوق لوحات الألوان في الشريط الجانبي للمسؤول.
  2. حدد لوحة الألوان المطلوبة (على سبيل المثال، Horizon).
  3. حدد مربع يمكن للمستخدمين تحديد لوحة الألوان، ثم انقر فوق علامة الصح للتأكيد.
  4. كرر الخطوات 2-3 لأي لوحات تريد استخدامها.

بعد التحديث، سترى فرشاة رسم في أسفل الشريط الجانبي. يمكنك النقر فوقها لاختيار لوحة الألوان المحددة لـ Horizon (كما هو موضح في لقطة الشاشة أعلاه). يمكن لأعضائك فعل الشيء نفسه للاختيار بين أي لوحات قمت بتمكينها. لتعيين اللوحة الافتراضية الجديدة لـ Horizon (أي كيف يبدو Horizon قبل أن يقوم الأعضاء بأي تغييرات وللزوار المجهولين):

  1. انتقل إلى السمات والمكونات في منطقة المسؤول.
  2. ابحث عن بطاقة Horizon وانقر فوق تحرير.
  3. قم بتغيير حقل لوحة الألوان إلى الافتراضي المطلوب.

:crystal_ball: ما هو التالي لـ Horizon

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

:folded_hands: شكرًا لكم

نحن ممتنون جدًا لكل من دعم Horizon (وفريق Discourse!) عن طريق اختبار Horizon هنا في Meta أو عن طريق المشاركة في اختبار بيتا الخاص بنا. كانت هذه الملاحظات لا تقدر بثمن في مساعدتنا في العثور على الأخطاء وإجراء التعديلات وصقل التجربة الشاملة لـ Discourse بهذه السمة. شكرًا جزيلاً لكم على وقتكم وملاحظاتكم ودعمكم!

41 إعجابًا

يبدو هذا رائعًا! أرغب حقًا في تجربته.

ولكن لا يوجد مسار لـ /admin/customize/themes/1/common/*/editالتخصيص. هل يمكنك إضافته من فضلك؟ أنا أستخدمه لتوفير رؤوس خاصة وتخصيصات أخرى بشكل مستقل عن السمة المختارة.

شكرًا لك!

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

لماذا لا تقوم بإنشاء مكون سمة جديد تقوم فيه بإجراء تغييرات وتضيفه إلى سمة horizon؟

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

هل فاتني أم أن Horizon لم تتم إضافته إلى Crowdin للترجمة؟ هل يجب عليّ إنشاء طلب سحب بالترجمات بدلاً من ذلك؟

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

تم بناء Horizon بشكل أساسي لاستخدامه كما هو، لذلك لا يُنصح بإجراء تخصيصات مباشرة أو التخصيص عبر مكونات غير رسمية. ومع ذلك، أود أن أعرف المزيد عما ترغب في تغييره في Horizon لمعرفة ما إذا كان يمكن أن يكون مرشحًا جيدًا لنا لدمجه بشكل مباشر أكثر في السمة.

أنا أبحث في هذا الأمر، وسأتابع قريبًا!

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

في الواقع، إنها مجرد ترويسة لربط المنتدى بحساب Fediverse (وعلامة </noscript> للقيام بنفس الشيء في التذييل).

لقد وضعت كود مكون السمة هنا: https://git.z7l.eu/ps/discourse-lire.im

راجع الأساس المنطقي لـ Mastodon.

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

هذا يبدو رائعًا!! أفترض أن السمة لن تكون متوافقة مع المكونات المخصصة التي نستخدمها حاليًا؟ على سبيل المثال:

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

متابعةً للنقاش من ساعدونا في اختبار Horizon، أحدث سماتنا:

لم ينجح هذا معي على الهاتف المحمول (iPhone 11 Pro Max). أعتقد أن السبب قد يكون أنني قمت بزيادة حجم الخط في إعدادات هاتفي.

هذا القالب رائع، شكراً لعملكم!

أتساءل كيف يمكنني تحديث “forked horizons”؟ لدينا بعض التعديلات المخصصة التي نريد الاحتفاظ بها :slight_smile:

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

إنشاء المكونات وإضافتها إلى السمة للتخصيص

4 إعجابات

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

إعجابَين (2)

أرغب في إنشاء خيار قابل للاختيار من قبل المستخدم لهذا المظهر حتى أتمكن من إضافة مكون المظهر الذي سيعدل هذا المظهر. أرغب في أن يتمكن المستخدمون من تحديد مظهر Horizon كما هو أو أن يتمكنوا من تحديد شكله المتغير.

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

يبدو مظهر Horizon رائعًا حقًا ولكنه لا يزال لا يحل مشكلة كثافة المعلومات في صفحة المواضيع. إنه مرهق بصريًا للأشخاص القادمين من برامج المنتديات التقليدية الأخرى.

قد لا تكون تعليقاتي ذات صلة بالمستخدمين الأصليين لـ Discourse لكني أقدم وجهة نظر خارجية. يجب علي إجراء هذه التغييرات لمجتمعي على الأقل.

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

لقد وجدت خطأً بسيطًا هنا، في عرض المجموعات، حيث يمكن أن يحدث تجاوز:

يمكن تخفيف ذلك عن طريق إضافة CSS:

.group-box-inner {
	overflow: auto;
}
إعجابَين (2)

هل هذه المسافة الكبيرة بين شريط التنقل والمحتوى مقصودة؟

إعجابَين (2)

لا، لا أعتقد أن هذا متوقع. ربما مكون يتداخل مع هذا :thinking:؟

أعتقد أنه حالياً، وأظن أن هذه لقطة شاشة مقصوصة لمتصفح فائق الاتساع بملء الشاشة.

3 إعجابات

أحب هذا الثيم تمامًا، ولكن يبدو أن مكون لافتة البحث لا يتوافق معه بشكل جيد. نص search_banner.subhead لا يظهر، مما يجعله يبدو غير متناسق. هناك أيضًا خط رمادي باهت.

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

علاوة على ذلك، رابط الإشارات المرجعية في الصفحة الرئيسية يقول إنه ليس لدي أي إشارات مرجعية حتى الآن على الرغم من أن لدي. إنه يرتبط بـ /bookmarks بدلاً من /u/johndoe/activity/bookmarks

إنه بالفعل شاشة عريضة. ولكن الكمية الكبيرة من المساحة البيضاء الفارغة تشتت الانتباه. هل يمكن تعديل ذلك؟

شكراً لإعلامنا بهذا الأمر - لقد طلبت من شخص من فريق التصميم لإلقاء نظرة على المشكلة.

4 إعجابات

تم الإبلاغ عن هذا قبل شهر تقريبًا ولكن..