تحديث قائمة المواضيع الخاصة بنا بلغة HTML - تجهيز السيمات والمكونات والإضافات

إعلانات
1

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

لجعل الانتقال سلسًا قدر الإمكان، سنقوم بإجراء هذه التغييرات خطوة بخطوة، ونأمل أن يكتمل الترحيل في وقت ما في الربع الأول من عام 2022.

:white_check_mark: الخطوة 1: تحديث محددات CSS

لقد أضفنا مؤخرًا محددات .topic-list-header و .topic-list-body و .topic-list-data لبدء الانتقال.

  • thead لديه الآن فئة topic-list-header
  • tbody لديه الآن فئة… لقد خمنت ذلك! topic-list-body
  • عناصر td لديها الآن أيضًا فئات topic-list-data مرفقة بها أيضًا.

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

تحديث تجاوزات القوالب الحالية

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

القوالب التي تمت إضافة فئات إليها هي:

:black_square_button: الخطوة 2: تغيير أنواع العناصر

الخطوة التالية في هذه العملية ستكون تحويل عناصر table الحالية إلى عناصر أكثر ملاءمة.

إعداد أوراق الأنماط المخصصة التي تستهدف عناصر table

في الوقت الحالي، يجب عليك إزالة أي إشارات إلى table و thead و tbody و tr و td من أوراق الأنماط المخصصة الخاصة بك، واستبدالها بالفئات الجديدة. بعد ذلك، عندما نغير أنواع العناصر في النهاية، يجب أن تستمر السمات المخصصة الخاصة بك في العمل دون مشاكل.

نحن متحمسون لرؤية ما يمكن لمجتمع مطوري السمات والإضافات بناؤه بعد هذه التغييرات! :partying_face:

38 إعجابًا
6

هل يمكنك مشاركة المزيد حول ما يحدث هنا؟

4 إعجابات
7

الخلاصة هي أننا لن نستخدم عنصر table في HTML لقوائم المواضيع بعد الآن، فهي تتصرف بطرق غريبة ليست جيدة إذا كنت ترغب في إجراء تغييرات كبيرة باستخدام CSS.

16 إعجابًا
8

هذا أمر ضخم - أنا متحمس جدًا للتخلي عن الجداول. سيتيح ذلك تخصيص سمات أكثر مرونة وبساطة عبر قوائم المواضيع. :heart_eyes:

9 إعجابات
9

هذا تغيير ممتاز، لأن إمبر لا تسمح (على حد علمي) بالتبديل الديناميكي للعلامات، على سبيل المثال <table> أو <tr> إلى <div> باستخدام الربط، على عكس الفئات، وهو ما تفعله لحسن الحظ!

هذا يعني أنه إذا كانت <table> في جذر قالب مكون، فأنت عالق بها ما لم تقم بتجاوزها بالكامل، وهو ما سيكون بخلاف ذلك مبالغًا فيه وغير ضروري.

باختصار، أوافق! :heart_eyes:

11 إعجابًا
10

شكراً لتقديم هذه التغييرات! فقط أتأكد قبل أن أقوم بتعديل الإعلانات..

العلامة هي:

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

والفئات المقابلة هي/ستكون:

.topic-list
  .topic-list-header
    (سيتم إسقاط tr هنا؟)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 إعجابات
11

نعم، كل هذا يبدو صحيحًا :+1:

7 إعجابات
13

هل هناك أي تحديث حول هذا؟ أود أن أكون قادرًا على تنسيق قوائم المواضيع بشكل أفضل.

4 إعجابات
14

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

6 إعجابات