فصل المواضيع المثبتة

[Terise]

مرحباً!

لست متأكدًا تمامًا من كيفية القيام بذلك وكنت أبحث عن بعض المساعدة.

بشكل أساسي، أود أن يكون هناك فصل مرئي بين المواضيع المثبتة والمواضيع العادية. سيكون هذا لمنتديات مجتمع استوديو ألعاب، وهذا الفصل سيكون مفيدًا للمستخدمين.

ما أبحث عنه هو شيء مثل هذا:

[مثبت] اسم الموضوع

موضوع عادي

بدلاً من:

[مثبت] اسم الموضوع
موضوع عادي

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

لقد حاولت إنشاء مكون سمة خاص بي، ولكن هذا هو المكان الذي أواجه فيه مشكلة حيث سأحتاج إلى إضافة شيء ما، ولكني لست متأكدًا من أين.

هدفي هو إضافة <tbody> class="pinned-topics"> قبل tbody الأصلي (المواضيع العادية).

أي توجيهات ستكون محل تقدير كبير!

[Alteras (Steven Chang)]

يمكنك التفكير في استخدام مكون السمة Filtered Topic Lists مع الاستعلام in:pinned.

إذا كنت تفضل الالتزام بـ CSS، فيمكنك القيام بشيء مثل هذا:

// استهداف آخر دبوس في القائمة
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // طريقة تقريبية لفرض مساحة داخل صف جدول
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // المحتوى المراد عرضه في المساحة إذا رغبت في ذلك
  content: 'regular';
  width: 100%;
  position: absolute;
  display: flex;
  height: 1em;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  border-top: 1px solid var(--primary-low);
}

[Terise]

شكراً للمساعدة! للأسف، لم ينجح ذلك. لدي محاولة لملحق (plugin) يجب أن يفعل ما أحتاجه، لكن لا يبدو أنني أستطيع تشغيله على Discourse 3.4.0-beta2.

GitHub - darkpsy3934/discourse-mistflux-plugin

سأكون ممتناً جداً لأي مساعدة في هذا الشأن!

[Arkshine]

أهلاً تيريز،

لقد اطلعت على الكود الخاص بك، ولقد اقتربت!

إليك بعض الملاحظات:

• يمكنك تعديله باستخدام مكون سمة (وليس إضافة). أشجعك على استخدام هذا القالب: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• استخدام الموصل صحيح. المسار الصحيح هو /discourse/connectors/…
  

  

• يمكن استرداد الوسائط التي تم تمريرها إلى الموصل باستخدام outletArgs. يمكنك رؤية الموصل هنا:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136

هذا يعني أنه يجب أن يكون:

export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}
 

والقالب:

{{#if this.pinnedTopics}}
  {{#each this.pinnedTopics as |topic|}}
    <TopicListItem
        @topic={{topic}}
        @bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
        @lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
        @selected={{@outletArgs.selected}}
        @hideCategory={{@outletArgs.hideCategory}}
        @showPosters={{true}}
      />
    {{/each}}
    <tr class="table-break">
      <td colspan="10">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

• ملاحظة: للأسف، لا يتم تمرير showPosters كوسيط؛ يجب عليك ترميز قيمتها هنا.

• ملاحظة: افتراضيًا، سيبدو الأمر كالتالي:
  

  

  يقوم بإنشاء غلاف div بمعرف فريد ويفسد CSS. ومع ذلك، فهو ضروري إذا كنت تريد ربط الإجراءات بالعنصر.
  

  

  يمكنك استخدام tagName و classNames لتخصيص الغلاف.

import { classNames, tagName } from "@ember-decorators/component";

@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
 ...
}

{{#if this.pinnedTopics}}
 {{#each this.pinnedTopics as |topic|}}
   ...
 {{/each}}
 <tr class="table-break">
   <td colspan="10">&nbsp;</td>
 </tr>
{{/if}}

(إذا كنت تعلم أنك لن تفعل شيئًا على العنصر، يمكنك الاحتفاظ بـ tbody في القالب واستخدام tagName("")).

ثم تحصل على هذا:

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

[Terise]

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

[Arkshine]

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

[Terise]

هذا مثالي، شكراً جزيلاً لك!

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

تعديل: لقد تمكنت بالفعل من القيام بذلك باستخدام بعض CSS.

مرة أخرى، شكراً جزيلاً على مساعدتك!