# بطاقات الموضوع
**URL:** https://meta.discourse.org/t/topic-cards/296048
**Category:** Theme component
**Tags:** official, topic-cards
**Created:** [20 فبراير 2024، 12:04م UTC](https://meta.discourse.org/t/topic-cards/296048 "2024-02-20T12:04:45Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [9 مارس 2024، 11:40ص UTC](https://meta.discourse.org/t/topic-cards/296048/22 "2024-03-09T11:40:24Z")
من فضلك أخبرني بما يجب تغييره في الملفات لتغيير موقع العلامات.
أعتقد أن العنوان يجب أن يأتي أولاً.
من قبل:
بعد:
---
### Author:  [@manchestermania](https://meta.discourse.org/u/manchestermania)
#### Post date: [18 مارس 2024، 1:25م UTC](https://meta.discourse.org/t/topic-cards/296048/23 "2024-03-18T13:25:09Z")
شكراً جزيلاً على هذا الـ TC الرائع. المظهر حديث وبسيط وأنيق حقًا.
سؤال واحد وطلب،
هل يمكن أن يكون لعرض نتائج البحث نفس المظهر؟ سيكون من الرائع حقًا أن يكون عرض نتائج البحث هو نفسه عرض الـ TC، مع الأخذ في الاعتبار أن مستخدمينا يستخدمون ميزة البحث كثيرًا.
مرة أخرى، شكراً جزيلاً على هذا العمل.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [18 مارس 2024، 3:18م UTC](https://meta.discourse.org/t/topic-cards/296048/24 "2024-03-18T15:18:25Z")
> [@manchestermania](#):
>
> هل يمكن أن يكون لعرض نتائج البحث نفس المظهر؟ سيكون من الرائع حقًا لو كان عرض نتائج البحث هو نفسه عرض TC، مع الأخذ في الاعتبار أن مستخدمينا يستخدمون ميزة البحث كثيرًا.
سيكون ذلك رائعًا ولكن للأسف إنه مجال مختلف تمامًا من التطبيق. لذلك لا يمكن تطبيقه هناك أيضًا. سيكون في الأساس مكونًا جديدًا تمامًا لتحقيق ذلك.
---
### Author:  [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [27 مارس 2024، 8:06ص UTC](https://meta.discourse.org/t/topic-cards/296048/25 "2024-03-27T08:06:33Z")
@chapoi كيف يمكنني تقليل حجم الصورة ومنطقة الموضوع؟
بطاقات الموضوع كبيرة جدًا
---
### Author:  [@P\_O](https://meta.discourse.org/u/P_O)
#### Post date: [13 أبريل 2024، 1:00م UTC](https://meta.discourse.org/t/topic-cards/296048/26 "2024-04-13T13:00:18Z")
إنه مكون سمة رائع حقًا، هل يمكنني اقتراح بعض التحسينات بما في ذلك إضافة صفحة إعدادات لتعديل ما يلي:
- قيمة إعداد الزوايا المستديرة أو إيقافها
- قيمة إعداد الظل أو إيقافها
- إعداد تمكين/تعطيل الردود والعرض والنشاط
- إظهار الملصقات صحيح أو خطأ
---
### Author:  [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [14 أبريل 2024، 4:44ص UTC](https://meta.discourse.org/t/topic-cards/296048/27 "2024-04-14T04:44:13Z")
> [@Gonerdot](#):
>
> لقد حاولت تثبيت هذه المكونات على العديد من السمات، لكنها تبدو ملتوية قليلاً في كل مكان. ماذا أفعل بشكل خاطئ؟
>
> 
> [@chapoi](#):
>
> حسنًا، تحتاج بطاقات الموضوع إلى ارتفاع أقصى، وإلا ستحصل على مشاكل مثل:
> [@chapoi](#):
>
> قد يكون له علاقة بحجم الخط، أو عائلة الخط، أو ارتفاع السطر. للأسف، سيتطلب ذلك بعض التعديلات الفردية، وليس شيئًا يمكنني تطبيق إصلاح شامل له.
أردت فقط المشاركة في حال وجد أي شخص آخر ذلك مفيدًا:
بالنسبة لي، واجهت نفس المشكلة مع الحد الأقصى لارتفاع بطاقة الموضوع الذي لم يكن كبيرًا بما يكفي إذا كان هناك صورة مصغرة - عند تثبيت هذا كمكون سمة على سمة Minima.
هذا هو CSS ذي الصلة الذي استخدمته لإصلاحه:
```plaintext
// زيادة الحد الأقصى لارتفاع بطاقات الموضوع مع صورة مصغرة
.topic-card:has(.topic-card__thumbnail) {
max-height: 275px;
}
```
(بدا الارتفاع الافتراضي 210 بكسل عندما تحققت في الفاحص)
قد تحتاج إلى تعديل على الرغم من ذلك - لم أتحقق من عرض الهاتف المحمول.
## قبل
## بعد
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [19 أبريل 2024، 7:58ص UTC](https://meta.discourse.org/t/topic-cards/296048/28 "2024-04-19T07:58:36Z")
كنتُ أتساءل عما إذا كان يمكن تكوين هذا الخيار لاختيار الفئات التي ستستخدم بطاقة الموضوع. سيكون رائعاً لو تم استخدامه في #customization:theme، لأن صور الموضوعات المصغرة ليست مريحة جداً على الهواتف المحمولة.
مكوّن رائع جداً
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2 مايو 2024، 3:30م UTC](https://meta.discourse.org/t/topic-cards/296048/29 "2024-05-02T15:30:33Z")
> [@bloomexperiment](#):
>
> بالنسبة لي، واجهت نفس المشكلة مع الحد الأقصى لارتفاع بطاقة الموضوع إذا كانت هناك صورة مصغرة - عند تثبيت هذا كمكون سمة على سمة Minima.
>
> هذا هو CSS ذي الصلة الذي استخدمته لإصلاحه:
>
> ```plaintext
> // زيادة الحد الأقصى لارتفاع بطاقات الموضوع مع صورة مصغرة
> .topic-card:has(.topic-card__thumbnail) {
> max-height: 275px;
> }
>
> ```
>
> (بدا الارتفاع الافتراضي 210 بكسل عندما تحققت في الفاحص)
>
> قد تحتاج إلى تعديل على الرغم من ذلك - لم أتحقق من عرض الهاتف المحمول.
نعم، هذا ما قصدته بما قلته من قبل: اعتمادًا على معلمات أخرى، قد يكون 210 بكسل صغيرًا جدًا، أو قد يكون 275 بكسل كبيرًا جدًا. من الصعب الحصول على حل يناسب الجميع.
قد أضيف بعض الإعدادات الإضافية (مثل اختيار الفئة حسب طلب @Heliosurge)، بما في ذلك ربما إعداد حجم أقصى حتى يتمكن كل منتدى من اللعب به.
---
### Author:  [@Truest](https://meta.discourse.org/u/Truest)
#### Post date: [19 مايو 2024، 3:53ص UTC](https://meta.discourse.org/t/topic-cards/296048/30 "2024-05-19T03:53:37Z")
١. ماذا عن تمرير الصورة إلى اليمين؟
الموضع مع الصورة وبدونها مختلف وغير متناسق.
٢. يبدو أن النص السفلي يميل إلى أن يتم اقتطاعه حيث يتم عرض بعض المحتوى.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [13 يونيو 2024، 7:34ص UTC](https://meta.discourse.org/t/topic-cards/296048/31 "2024-06-13T07:34:55Z")
كنت أتساءل كيف يبدو مكون السمة هذا على [https://meta.discourse.org/t/discourse-air-theme/197703،](https://meta.discourse.org/t/discourse-air-theme/197703%D8%8C) مع دمج المواضيع التي تحتوي على صور وتلك التي لا تحتوي عليها. يبدو واعدًا ولكنه ليس جاهزًا بعد. ربما يمكن لـ CSS وحده إصلاح المشكلات أو ربما يلزم إجراء عمل أعمق.
يبدو جيدًا على الهاتف المحمول!
سأقوم بإلغاء تثبيته في الوقت الحالي، ولكني سأراقب هذا الموضوع لأنه يبدو جيدًا جدًا كما هو مقصود.
ونعم، ستكون إضافة لطيفة لأخذ صورة الفئة عندما لا يكون للموضوع صورة خاصة به.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [14 يونيو 2024، 8:49ص UTC](https://meta.discourse.org/t/topic-cards/296048/32 "2024-06-14T08:49:12Z")
ما الذي سيتطلبه الأمر لكي يُظهر مكون بطاقات الموضوع ليس فقط ❤s للموضوع (كما هو الحال الآن) ولكن أيضًا المشاهدات والتعليقات، مثلما يفعل [Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails/150602) الرسمي في وضع المدونة؟
**مصغرات قائمة الموضوع**
**بطاقات الموضوع**
أيضًا، أعتقد أن استخدام مصغرات قائمة الموضوع لتاريخ آخر نشاط (“1 يوم” أعلاه) أفضل من تاريخ “النشر” في بطاقة الموضوع. تاريخ النشاط متسق مع الإعداد الافتراضي لـ Discourse ويوفر مزيدًا من المعلومات للمستخدمين. أيضًا، يتناسب التنفيذ التصميمي بشكل جيد جدًا بجوار المشاهدات والإعجابات والمشاركات.
في حال كنت تهتم، إليك بعض الأفكار الإضافية بعد ساعات عديدة من اختبار التركيبات بين السمة الافتراضية، [https://meta.discourse.org/t/discourse-air-theme/197703،](https://meta.discourse.org/t/discourse-air-theme/197703%D8%8C) وبطاقات الموضوع ومصغرات قائمة الموضوع، بالإضافة إلى بعض التعديلات على CSS.
أنا أستقر على **بطاقات الموضوع + السمة الافتراضية** ، مع إضافة [الفئات الحديثة + مربعات المجموعات](https://github.com/jordanvidrine/discourse-category-group-boxes.git) التي تجلب بطاقات للفئات وتتناسب مع بطاقات الموضوع.
الأسباب:
- تتعامل بطاقات الموضوع بأناقة مع المشاركات التي تحتوي على صور وبدون صور.
- سمة Air رائعة جدًا ولكن بطاقات الموضوع بالإضافة إلى الفئات الحديثة تحقق ذلك تقريبًا.
- البقاء مع السمة الافتراضية يضمن التوافق مع أي مكون سمة رسمي فور إخراجه.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [15 يونيو 2024، 10:24م UTC](https://meta.discourse.org/t/topic-cards/296048/33 "2024-06-15T22:24:36Z")
حسناً، ربما يكون هذا السؤال أبسط: 😅
حالياً، المواضيع المقترحة في نهاية أي صفحة تعرض المواضيع كبطاقات. بينما أحب البطاقات في الصفحات الرئيسية، أعتقد أنها مبالغ فيها في نهاية جميع الصفحات، وتشتت الانتباه عن محتوى الصفحة الفعلي أو المناقشة.
هل هناك طريقة لعرض قائمة بسيطة من المواضيع المقترحة (قريبة قدر الإمكان من السمة الافتراضية) دون التأثير على بطاقات المواضيع في الصفحات الرئيسية؟
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [18 يونيو 2024، 12:49ص UTC](https://meta.discourse.org/t/topic-cards/296048/34 "2024-06-18T00:49:59Z")
لا في الوقت الحالي، لا. لكنه طلب جيد في رأيي، لذا يمكنك دائمًا محاولة تقديم طلب ميزة له، وربما يتم قبوله بهذه الطريقة.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [18 يونيو 2024، 7:00ص UTC](https://meta.discourse.org/t/topic-cards/296048/35 "2024-06-18T07:00:58Z")
> [@chapoi](#):
>
> لكنها طلب جيد في رأيي، لذا يمكنك دائمًا محاولة تقديم طلب ميزة لها
حسنًا، شكرًا لك. تم، وكذلك لطلبي الآخر أعلاه:
- [Don't show Topic Cards' style in the Suggested topics](https://meta.discourse.org/t/topic-cards-dont-show-cards-style-in-the-suggested-topics/312501)
- [Add icons for Views and Replies, and Last Activity date in Topic Cards](https://meta.discourse.org/t/topic-cards-add-icons-for-views-and-replies-and-last-activity-date/312505)
وبالمناسبة، بالأمس جربت هذا، لأنني واجهت نفس مشكلة تسرب المحتوى خارج البطاقات:
> [@bloomexperiment](#):
>
> هذا هو CSS ذي الصلة الذي استخدمته لإصلاحه:
>
> ```plaintext
> // زيادة الحد الأقصى للارتفاع لبطاقات الموضوع مع الصورة المصغرة
> .topic-card:has(.topic-card__thumbnail) {
> max-height: 275px;
> }
>
> ```
ألم يتسبب هذا في فوضى في العرض على الهاتف المحمول؟ لقد جربته للتو، وهو يحدث فوضى في حالتي.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [18 يونيو 2024، 10:42م UTC](https://meta.discourse.org/t/topic-cards/296048/36 "2024-06-18T22:42:07Z")
سألقي نظرة على ذلك. على الأقل سأضيف إعدادًا للارتفاع، لتسهيل التعديل. سأضبط تذكيرًا حتى لا أنسى.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [19 يونيو 2024، 9:14ص UTC](https://meta.discourse.org/t/topic-cards/296048/37 "2024-06-19T09:14:43Z")
بعض الملاحظات التي قد تساعد في الحد من ارتفاع بطاقات الموضوع. لم أختبر هذا بشكل شامل، ولكن يبدو أن…
- بينما يقتصر الوصف دائمًا على ثلاثة أسطر، قد يقفز العنوان إلى سطرين أو أكثر. من السهل نسبيًا أن يحتاج العنوان إلى سطر ثانٍ، ويمكن للتصميم أن يأخذ ذلك في الاعتبار.
- عندما تكون هناك العديد من العلامات ولا تتناسب بجوار الفئة، فإنها كلها تقفز إلى سطر جديد أدناه. سيكون من الطبيعي أكثر وكفاءة في المساحة أن تبدأ العلامات دائمًا في العرض بجوار الفئة، ثم تتدفق في السطر الثاني العلامات التي لا تتناسب مع السطر الأول.
- “نشر [التاريخ]” و ❤ حاليان في سطر جديد تحت المؤلف. ومع ذلك، يمكن أن يكون عنصر “نشر” بجوار ❤ محاذيًا لليمين، في نفس الصف مع المؤلف. سيؤدي ذلك إلى توفير مساحة عمودية في كل إدخال وتقليل خطر تسرب المحتوى.
فقط في حال لم يكن الشرح الخاص بالعلامات واضحًا. هنا يمكنك رؤية كيف تبدأ في سطر جديد بدلاً من البدء بجوار الفئة كما تفعل افتراضيًا:
---
### Author:  [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [20 يونيو 2024، 4:52ص UTC](https://meta.discourse.org/t/topic-cards/296048/38 "2024-06-20T04:52:30Z")
يحدث هذا هنا
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [20 يونيو 2024، 9:17ص UTC](https://meta.discourse.org/t/topic-cards/296048/39 "2024-06-20T09:17:59Z")
هل من الممكن تقنيًا فرض حد سطر واحد للعلامات، تمامًا كما يوجد حد سطرين مطبق على العنوان وثلاثة أسطر على الوصف.
ستستخدم معظم مثيلات Discourse من 0 إلى 5 علامات وسيكون سطر واحد أكثر من كافٍ لها. البعض (مثلنا) قد يستخدم العلامات بشكل مكثف ولكننا لا نحتاج إلى رؤيتها جميعًا في بطاقات الموضوع. مجرد رؤية الأولى كافية لإعطاء فكرة.
ستؤدي إضافة قيود على عدد الأسطر إلى جعل بطاقات الموضوع أكثر موثوقية بأحجام ونسب صور مختلفة:
- سطر واحد للفئة والعلامات
- ما يصل إلى سطرين للعنوان
- ما يصل إلى ثلاثة أسطر للوصف
- سطر واحد للمؤلف، وتاريخ النشر، والإعجابات.
---
### Author:  [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [20 يونيو 2024، 7:49م UTC](https://meta.discourse.org/t/topic-cards/296048/40 "2024-06-20T19:49:22Z")
> [@icaria36](#):
>
> “نُشر في [date]” و ❤ موجودان في سطر جديد تحت المؤلف. ومع ذلك، يمكن أن يكون عنصر “نُشر” بجوار ❤ محاذيًا لليمين، في نفس الصف مع المؤلف. سيؤدي هذا إلى توفير مساحة رأسية في كل إدخال وتقليل خطر تسرب المحتوى.
للعلم، سنتعامل مع هذا في [Add icons for Views and Replies, and Last Activity date in Topic Cards](https://meta.discourse.org/t/add-icons-for-views-and-replies-and-last-activity-date-in-topic-cards/312505).
---
### Author:  [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [21 يونيو 2024، 3:38ص UTC](https://meta.discourse.org/t/topic-cards/296048/41 "2024-06-21T03:38:51Z")
> [@icaria36](#):
>
> > [@bloomexperiment](#):
> >
> > هذا هو CSS ذي الصلة الذي استخدمته لإصلاحه:
> >
> > ```plaintext
> > // زيادة الارتفاع الأقصى لبطاقات الموضوع مع الصورة المصغرة
> > .topic-card:has(.topic-card__thumbnail) {
> > max-height: 275px;
> > }
> >
> > ```
>
> ألم يتسبب هذا في إفساد العرض على الهاتف المحمول؟ لقد جربته للتو، وهو يفسده في حالتي.
آه نعم، نسيت أن أعلق هنا بتحديثي حول ذلك: كان عليّ إضافة هذا الرمز إلى `desktop.scss` فقط بدلاً من `common.scss`
لا يمكنني تعديل تعليقي الأصلي بعد الآن ولكني قمت بتحديثه في مكون السمة الخاص بي: [Minima Adjustments for Topic Cards](https://meta.discourse.org/t/minima-adjustments-for-topic-cards/303733)
[Previous page](https://meta.discourse.org/t/topic-cards/296048.md?page=1)
[Next page](https://meta.discourse.org/t/topic-cards/296048.md?page=3)