ثيم أنيق

[Discourse]

	ملخص	Graceful - سمة أنيقة لمنصة Discourse
	معاينة	معاينة على منشئ سمات Discourse
	رابط المستودع	https://github.com/discourse/graceful
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

تثبيت هذه السمة

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

 الدعم  خطأ  تجربة المستخدم  مطور

الميزات

أعجبتني حقًا السمة التي تم مشاركتها منذ عام 2016 بواسطة @jsthon . لم يعودوا موجودين منذ نشرها لأول مرة، لذا قمت بتحديثها وتوسيعها وإضافتها إلى GitHub.

الإعدادات

الاسم	الوصف
صورة الخلفية	أدخل رابط الصورة
خلفية متكررة (Tile)
لا توجد صورة خلفية	تعطيل إعدادات صورة الخلفية والتكرار المذكورة أعلاه.

تحتوي هذه السمة على ثلاثة إعدادات:

• حقل لإضافة صورتك الخاصة كخلفية
• خيار لتكرار الصورة
• وخيار لإزالة كلا الخيارين المذكورين أعلاه

إذا قمت بتعطيل خيار التكرار، فسيتم تعيين الصورة إلى background-size: cover، وس يقوم متصفحك بتوسيع الصورة لتغطية الخلفية بالكامل بشكل متناسب. على سبيل المثال:

الشكر والتقدير

ينتمي الفضل في نمط الخلفية الافتراضي المضمن إلى Toptal Subtle Patterns.

هل تستضيفها معنا؟ تتوفر السمات للاستخدام في خططنا القياسية، وخطط الأعمال، وخطط المؤسسات.

[eextra (Sylwia)]

Am I the only one with this problem using this theme ? When I test in google page speed gets 99% but the page doesn’t load, so the results are misleading.

What is it because google can’t see - it doesn’t load this page?

[awesomerobot (Kris)]

Hmm, yeah I’m seeing the same issue… it seems like something in the theme is interfering with the version of Discourse we serve Google. I’ll investigate. Looks like it might be the same issue messing with the print view reported above.

[neounix (Dark Matter)]

@awesomerobot

مظهر رائع جداً.

أحاول جعل “Graceful” أوسع على سطح المكتب. جربت هذا:

#main-outlet {
  width: auto;
  max-width: 1210px; /* هذا يجعل الحاوية عريضة بقدر حجم الشعار/عناصر التحكم في الرأس */ 
}

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

جربت أداة الفحص (Inspector) وعددًا من العناصر، ولكن نظرًا لأنني لست خبيرًا، لم أستطع جعل عرض المواضيع/المشاركات يطابق عرض #main-outlet.

هل تمانع مساعدتي في ذلك؟

شكرًا لك.

أيضًا، جربت هذا:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

لكن لم أستطع جعل عرض المشاركات يطابق عرض الحاوية:

[Steven]

لدى .topic-body إعداد عرض خاص به.

الافتراضي:

.topic-body {
    width: calc(690px + (11px * 2));
}

غيّر فقط قيمة 690px واترك الباقي كما هو (فهو مرتبط بحشوة منشور الموضوع).

[neounix (Dark Matter)]

شكرًا لك! سأجرب ذلك لاحقًا وأشارك النتائج.

لقد حاولت تغيير .topic-body أمس، لكنني سأحاول مرة أخرى بناءً على اقتراحك @Steven

[neounix (Dark Matter)]

@ستيفن، مشاركة: 71، موضوع: 93040

.topic-body {
    width: calc(690px + (11px * 2));
}

تغيير

مرحبًا @ستيفن،

تمت إضافة ما يلي إلى CSS الخاص بسطح المكتب:

#main-outlet {
  width: auto;
  max-width: 80%; 
}

.topic-body {
    width: calc(1020px + (11px * 2));
}

عمل ذلك جزئيًا، لكن توجد مشكلة ما. ربما تعرف الحيلة في CSS لإصلاحها؟

انظر الصورة:

[Steven]

أنا لست على حاسوبي، لكنني أعرف أنه يوجد هامش يسار (margin-left) يجب تصحيحه باستخدام الكلاس timeline-container

[awesomerobot (Kris)]

حسناً، بالنسبة للجدول الزمني، هناك بعض قيم margin-left التي يجب تجاوزها في .timeline-container (ثلاث نقاط توقف):

[neounix (Dark Matter)]

مرحبًا @awesomerobot

كريس،

الطريقة التي حصلنا بها على المظهر العريض الذي أردناه كانت بأن نكون أقل أناقة ونخفي .timeline-container.

#main-outlet {
  width: auto;
  max-width: 70%; 
}

.topic-body {
    width: 100%;
}

.timeline-container .topic-timeline {
      display: none;
 }

ليست أنيقة جدًا، لكنها على الأقل تعمل بشكل “مقبول” مع كتل الكود الكبيرة، مما يسهل قراءتها على شاشة المطورين الكبيرة.

سيكون من الرائع إظهار .timeline-container، لكنني لم أستطع جعلها تعمل عند تجاوز الفئة كما أُقترح، وذلك بالتأكيد بسبب مهاراتي غير المتطورة جيدًا في CSS:

شكرًا لك على مساعدتك وعلى هذا القالب الرائع.

[Solari]

أنا أحب هذا القالب حتى الآن. شكرًا جزيلاً لمشاركتِه معنا!

لاحظتُ أن أشرطة ألوان التصنيفات تختفي في العرض على الهواتف المحمولة. هل هذا مقصود؟ وهل هناك طريقة لاستعادتها؟

أيضًا، هل توجد طريقة لإيقاف الخلفية إذا كان للتصميم خلفية محددة؟ يبدو أن الأمر يعمل بشكل جيد، لكن عند التمرير في المنشورات الطويلة، يصبح الشاشة متقطعة ويمكن رؤية خلفية القالب المحددة.

شكرًا!
راي

[Solari]

@Solari

لاحظت أن أشرطة ألوان الفئات تختفي في العرض على الجوال. هل هذا مقصود؟ وهل توجد طريقة لاستعادتها؟

لقد بحثت في تنسيقات CSS الخاصة بالجوال ووجدت أنها مُستبعدة؛ وعند وضع علامة تعليق على جزء “left-border” عادت الحدود الملونة للظهور:

.category-list-item {
//  border-left: none;
  border-top: 2px solid;
  .category-name {
    font-weight: normal;
  }
}

ومع ذلك، أعلم أن هذا التعديل سيتم استبداله عند تحديث المظهر. ما أفضل طريقة للحفاظ على التعديلات في مثل هذه الحالات؟

لدي بالفعل مكون مظهر مخصص حيث أحتفظ بتغييرات CSS المخصصة، وهذا في جزء CSS الخاص بالجوال:

.category-list-item {
  border-left: 4px !important; 
}

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

أنا مبتدئ في CSS وما شابه، لذا قد أكون أقوم بشيء خاطئ.

شكرًا لك،
راي

[IAmGav (Gavin Perch)]

هناك مشكلة في ألوان الرأس.

تم تغيير لون خلفية الرأس ونص الرأس، لكن الإعدادات لا تُطبق كما هو متوقع.

تظل الأيقونات رمادية اللون.

[dax (Daniela)]

هذا هو السلوك الافتراضي لأن اللون متغير “منخفض-متوسط” لـ #ffffff وليس اللون النقي.

راجع هنا لتجاوز هذا اللون، How to Change Header Icon Color? - #2 by awesomerobot

[Jack51 (Jack)]

أود فقط أن أشير إلى أن هذا القالب أثبت كونه رائعًا. أحب مظهره النقي للغاية.

[Solari]

أتفق! واحد من أفضل تصاميم Discourse المتاحة.

راي

[oshyan (Oshyan Greene)]

يجب أن أكون غبيًا، لكنني لا أستطيع تغيير حجم الشعار باستخدام مكون سمة تم إنشاؤه لتعديل CSS. يمكنني تغيير ارتفاع الرأس العام، لكن الشعار يظل عنيدًا كما هو. يبدو أن هذا CSS يلغي أي تغييرات أحاول إجراؤها:

.d-header #site-logo {
max-height: 35px !important;
}

وفقًا لفحص Chrome، فإن المصدر هو: desktop-scss-graceful.scss

يعمل تغيير حجم الشعار بشكل جيد مع السمة الافتراضية، وكما قلت، يعمل تغيير ارتفاع الرأس مع Graceful، لكن ليس الشعار…

[awesomerobot (Kris)]

نعم، !important يتجاوز أي CSS آخر لا يحتوي على !important… لا أتذكر سبب وجودها لكن يجب أن أبحث في إزالتها. هل تعمل إذا أضفت !important مع CSS الخاص بك؟

.d-header #site-logo {
max-height: 50px !important; // <-- ارتفاعك المخصص هنا
}

[oshyan (Oshyan Greene)]

شكرًا لك على الرد السريع! لقد لاحظت بالفعل !important وحاولت إضافتها إلى كودي، لكن دون جدوى. الغريب هو أنه عند تجربتها الآن، عند حفظ هذا التغيير وتحديث الصفحة، تظهر الصورة للحظة بالحجم الصحيح، ثم تصغر مرة أخرى. وفي أداة الفحص (Inspector) يبدو أنها تفعل الشيء الصحيح:

على الأقل من حيث أن 35px معطّلة. لكن الترتيب يبدو غريبًا على أقل تقدير. وعلى أي حال، لا يزال الأمر لا يعمل. غريب.

أضع هذا في Common CSS، وإن كان ذلك ذو قيمة…

تحديث: عثرت عليه! إنه:

.d-header #site-logo {
     height: 2.667em;
 }

في ملف header.scss!

وإذا أضفت خاصية height الخاصة بي مع !important، فسيتم الحل!

[oshyan (Oshyan Greene)]

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

يمكنك على الأرجح رؤية السبب.

الأشياء التي جربتها:

• النصيحة في كيفية إخفاء عمود المستخدمين في القسم الأحدث؟
• النصيحة في إزالة الصور الرمزية في عرض التصنيف
• مكون قائمة المواضيع MD (لا يبدو متوافقًا مع القالب)
• استخدام أدوات مطوري Chrome للعثور على الفئات/المعرفات ومحاولة إخفائها (ملاحظة لي: لا تخفِ ember-view :laugh: )

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

شكرًا مقدّمًا!