قائمة مواضيع ديسكورس: المؤلفون والناشرون

:information_source: ملخص إضافة مؤلف الموضوع إلى العمود الأيسر في صفحات قوائم المواضيع، مع خيار عرض آخر ناشر فقط في عمود الناشرين الافتراضي. يمكن أيضًا تغيير حجم وشكل صورة رمزية للمؤلف.
:eyeglasses: معاينة https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: المستودع https://github.com/Lillinator/discourse-topic-list-author-posters
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

:woman_technologist:t2: نظرة عامة

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

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

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

يوجد أيضًا خيار لتغيير محاذاة محتوى الصفوف عموديًا إلى الأعلى أو المنتصف.

في عرض شاشة صغير (حجم الهاتف المحمول)، سيظهر المؤلف حيث تظهر صورة الناشر الأحدث.

يعمل هذا المكون بشكل جيد مع ملخصات قائمة المواضيع و ملخصات الذكاء الاصطناعي لـ gists.

:gear: الإعدادات

لقطة شاشة للإعدادات مع الخيارات الافتراضية في صفحة إدارة المكون

الإعدادات الوصف
Topic list author avatar size حجم الصور الرمزية في عمود صورة المؤلف في صفحات قوائم المواضيع - small، medium، أو large.
Topic list author avatar border radius استدارة الصور الرمزية في صفحات قوائم المواضيع: 0% = مربع → 50% = دائرة. tab_style = زوايا مستديرة على اليسار
Topic list show last poster only عرض صورة الناشر الأخير فقط في عمود الناشرين، ولكن فقط إذا كان هناك أكثر من مشارك واحد في الموضوع.
Vertically align row top خيار لمحاذاة الصفوف إلى الأعلى أو المنتصف
Show author on categories page عرض صورة المؤلف بدلاً من الناشر الأحدث في قوائم المواضيع في صفحة التصنيف.
Category page topic avatar size حجم الصور الرمزية في عمود صورة المؤلف في قوائم المواضيع بصفحة التصنيف - small، medium، أو large.
Category page avatar border radius استدارة الصور الرمزية في صفحة التصنيف: 0% = مربع → 50% = دائرة. tab_style = زوايا مستديرة على اليسار

:camera_flash: لقطات الشاشة

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

لقطات شاشة لصفحات مختلفة من قوائم المواضيع مع تفعيل إعدادات المكون المختلفة، مما يظهر وضعي الملخصات المضغوطة والموسعة، والشريط الجانبي المفتوح/المغلق

مع الإعدادات الافتراضية:

شكل صورة رمزية tab_style كبيرة مع توسيع ملخصات gists:

صور رمزية صغيرة مع استدارة 15% وتفعيل Topic_list_show_last_poster_only:

صور رمزية متوسطة الحجم مع استدارة 0% (مربع) وتفعيل Topic_list_show_last_poster_only، مع توسيع ملخصات gists:

لقطات شاشة لصفحة التصنيف تظهر حجمين وشكلين مختلفين للصور الرمزية مع المؤلف أو الناشر الأخير.

الإعدادات الافتراضية للمكون، مع صور رمزية دائرية متوسطة الحجم وتفعيل Show_author_on_categories_page:

صور رمزية كبيرة الحجم tab_style وتعطيل Show_author_on_categories_page:

لقطة شاشة للعرض بحجم الهاتف المحمول

مع صور رمزية للمؤلف tab_style:


:backhand_index_pointing_right:t3: ملاحظات

  • يقوم بإدراج صورة المؤلف وتغيير عمود الناشرين حيث يُتوقع ذلك في علامات التبويب في صفحة الملف الشخصي.
  • سلوك الهاتف المحمول مماثل للسلوك الافتراضي في قوائم تذييل الموضوع (المواضيع المقترحة/المرتبطة) وفي صفحات علامات التبويب للملف الشخصي والرسائل الواردة.
  • غير متوافق تمامًا مع سمة horizon. :slight_smile:

:bulb: مهام مستقبلية محتملة

  • إضافة خيار تعطيل للهاتف المحمول؟
  • استثناءات التصنيفات والوسوم؟
  • دعم الاتجاه من اليسار إلى اليمين؟
  • تغيير شكل صور الناشرين؟

:hugs: كما هو الحال دائمًا، شكرًا لـ @Moin على الفكرة، والتعليقات، ومساعدة تصحيح الأخطاء.

13 إعجابًا

شكرًا لك على صنع هذا، لقد حل مشكلة محتملة بالنسبة لي على الفور!

ربما تم التخطيط لهذا بالفعل، أردت أن أذكر أنني لاحظت أن الحشو والمحاذاة لعمود صورة الملف الشخصي للمُرسِل على اليسار به مسافة بادئة غريبة (غير موجودة على الهاتف المحمول عند تعطيل المكون، للمقارنة). يبدو أن السمة text-align الخاصة بـ td.posters تؤثر على الصورة أيضًا.
كما يتغير محاذاة قائمة صور الملف الشخصي للمُرسِلين عند تمكينها، ويبدو أن محاذاة td.topic-list-data تتجاوز الإعداد الافتراضي. من السهل إجراء تغييرات على نمط أوراق الأنماط من جهتي إذا كنت راضيًا عن هذه الأمور بخلاف ذلك.
مكون رائع، شكرًا لك مرة أخرى.

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

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

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

محاذاة الصورة الرمزية إلى اليسار أفضل على سطح المكتب. أضفت هذا الـ CSS لضبط عمود الملصق الأوسط حسب تفضيلاتي:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

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

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

قد يكون المحاذاة الرأسية قد تم تطبيقها على نطاق واسع جدًا في ملف CSS الخاص بك، ومن المحتمل أنها تحتاج فقط إلى استهداف custom-author-column حيث تستخدم td.topic-list-data. أظن أن تغيير الهدف إلى td.custom-author-column.topic-list-data سيحل المشكلة ويزيل الحاجة إلى تصميم مخصص للإصلاح من جهتي.

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

لقد دفعت تغييرًا صغيرًا للجوال.

3 إعجابات

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

المظهر على الهاتف المحمول أفضل قليلاً، شكراً!

@jordanjay29 بعد التفكير في هذا الأمر أكثر، قررت إضافة تبديل للمحاذاة (كان الأمر سهلاً بما فيه الكفاية).

تفضل :slight_smile:

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


4 إعجابات