مظهر مختلف لقائمة مواضيع الرسائل الشخصية؟

rahim123 · 13 يناير 2024، 6:38م

مرحباً، هل هناك أي طريقة لاستخدام سمة مختلفة فقط لقائمة مواضيع الرسائل الشخصية؟ أنا حاليًا أستخدم سمة Sam’s Sam's Simple Theme والتي أفضلها أنا ومجتمعي بشدة لقائمة /latest، حيث إنها تطبع أسماء المستخدمين للمنشئ الأصلي وآخر ناشر كنص، وتزيل فوضى قائمة صور المستخدمين الأكثر نشاطًا التي لا يهتم بها أحد. للأسف، نفس هذا النموذج ينهار لقائمة /my/messages، خاصة عندما يكون منشئ موضوع الرسالة الخاصة هو نفسه آخر ناشر:

لذلك في حالة /my/messages ، أود بشكل مثالي فقط حقن عمود td.posters.topic-list-data من سمة Discourse الافتراضية في هذا العرض. ولكن إذا كان هذا الكثير من العمل، فسيكون من الجيد أن يكون لديك خيار للتبديل بطريقة ما إلى سمة Discourse الافتراضية لعرض الرسائل الخاصة.

هناك سمات مخصصة أخرى لديها نفس المشكلة مثل سمة Kris’s Minima Theme .

Don · 13 يناير 2024، 8:00م

مرحباً

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

{{#if topic.isPrivateMessage}}
...
{{/if}}

إخفاء شيء ما في عنصر قائمة مواضيع الرسائل الخاصة.

{{#unless topic.isPrivateMessage}}
...
{{/unless}}

rahim123 · 14 يناير 2024، 7:55ص

شكراً جزيلاً، لقد تمكنت من جعله يعمل تقريبًا باستخدام مكون سمة:


<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
    <tr class="topic-list-header-row">
      {~raw-plugin-outlet name="topic-list-header-before"~}
      {{#if bulkSelectEnabled}}
        <div class="bulk-select">
          {{#if canBulkSelect}}
            {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
          {{/if}}
        </div>
      {{/if}}
      {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
      {{#if showLikes}}
          {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if showOpLikes}}
          {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if topic.isPrivateMessage}}
          {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
      {{/if}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
    </tr>
</script>


<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{#if bulkSelectEnabled}}
      <td class="bulk-select topic-list-data">
        <label for="bulk-select-{{topic.id}}">
          <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
        </label>
      </td>
    {{/if}}
    
    <td class='main-link clearfix topic-list-data'>
      {~raw-plugin-outlet name="topic-list-before-status"~}
      {{raw "topic-status" topic=topic}}
      {~topic-link topic class="raw-link raw-topic-link"~}
      {~#if showTopicPostBadges}}
        {~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
      {~/if}}
      {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
      {{#if expandPinned}}
        {{raw "list/topic-excerpt" topic=topic}}
      {{/if}}
      <div class='creator'>
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {~#if topic.creator ~}
          <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
        {~/if ~}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      </div>
    </td>
    
    {{#if showLikes}}
      <td class="num likes topic-list-data">
        {{#if hasLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if showOpLikes}}
      <td class="num likes topic-list-data">
        {{#if hasOpLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.op_like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if topic.isPrivateMessage}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
    <td class="last-post topic-list-data">
      <div class='poster-avatar'>
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
      </div>
      <div class='poster-info'>
        <a href="{{topic.lastPostUrl}}">
          {{format-date topic.bumpedAt format="tiny"}}
        </a>
        <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
      </div>
    </td>
</script>

يبدو أن عبارة #if topic.isPrivateMessage لا تعمل مع topic-list-header، لذلك لدي صور مستخدمي المشاركين في الرسائل الخاصة تظهر كما هو متوقع، ولكن رؤوس الأعمدة تفتقد إلى <td> لذا فإن كل شيء منحرف.

rahim123 · 14 يناير 2024، 5:24م

لذا فإن حلي الكسول هو عدم استخدام منطق {{#if topic.isPrivateMessage}} وببساطة وضع posters.topic-list-data في كل من /latest و /my/messages.


<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
<tr class="topic-list-header-row">
  {~raw-plugin-outlet name="topic-list-header-before"}

{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions showTopicsAndRepliesToggle=showTopicsAndRepliesToggle newListSubset=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}}

{{#if showPosters}}
  {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
{{/if}}
  {{#if showLikes}}
      {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='thanks'}}
  {{/if}}
  {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='thanks'}}
  {{/if}}
  {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</tr>
</script>



<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
{~raw-plugin-outlet name="topic-list-before-columns"}

{{#if bulkSelectEnabled}}
  <td class="bulk-select topic-list-data">
    <label for="bulk-select-{{topic.id}}">
      <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
    </label>
  </td>
{{/if}}

<td class='main-link clearfix topic-list-data'>
  {~raw-plugin-outlet name="topic-list-before-status"}
  {{raw "topic-status" topic=topic}}
  {~topic-link topic class="raw-link raw-topic-link"}
  {~#if showTopicPostBadges}}
    {~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}
  {~/if}}
  {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  <div class='creator'>
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {~#if topic.creator ~}
      <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
    {~/if ~}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
</td>

{{#if showPosters}}
  {{raw "list/posters-column" posters=topic.featuredUsers}}
{{/if}}

{{#if showLikes}}
  <td class="num likes topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{#if showOpLikes}}
  <td class="num likes topic-list-data">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{raw "list/posts-count-column" topic=topic}}

<td class="last-post topic-list-data">
  <div class='poster-avatar'>
    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
  </div>
  <div class='poster-info'>
    <a href="{{topic.lastPostUrl}}">
      {{format-date topic.bumpedAt format="tiny"}}
    </a>
    <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
  </div>
</td>

</script>

لكن مستخدمي لا يحبون الفوضى البصرية في /latest، لذا أقوم بإخفائها هناك عبر CSS:

.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

إذا كان لدى أي شخص أي نصائح لتنفيذ المنطق في تجاوز handlebars، فسأفضل ذلك، بدلاً من إهدار دورات وحدة المعالجة المركزية في إنشاء posters.topic-list-data ثم إخفائها.

Arkshine · 14 يناير 2024، 6:21م

أنت على حق؛ بيانات الموضوع غير متوفرة في الرأس، وهذا منطقي!

يمكن أن يكون CSS حلاً. احتفظ بالشرط في topic-list-item، وقم بعرضه افتراضيًا للرأس.

{{raw "topic-list-header-column" order='posters' forceName='Participants'}}

وباستخدام CSS، يمكنك القول: " حدد القائمة التي لا تحتوي على (ليس لديها) صفوف الملصقات وأخفها "

.topic-list:not(:has(.topic-list-body .topic-list-data.posters))
  .topic-list-header
  .topic-list-data.posters {
  display: none;
}

هل يعمل هذا معك؟

rahim123 · 14 يناير 2024، 6:35م

مرحباً، شكراً جزيلاً، هذه فكرة جيدة جداً. لم يعمل شيء مع CSS كما هو مقترح حيث لا يزال يظهر عمود المشاركون الفارغ في /latest، ولكن CSS الأصلي الخاص بي يبدو أنه يعمل بشكل جيد لإخفائه هناك فقط:

.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

هل هناك أي عيوب لذلك؟

Arkshine · 14 يناير 2024، 7:22م

أنا مرتبك، إنه يعمل لدي

الأحدث:

الرسالة:

rahim123 · 14 يناير 2024، 7:46م

حسنًا، هل يمكن أن يكون ذلك بسبب عدم وجود الشرط في topic-list-item؟

Arkshine · 14 يناير 2024، 7:56م

لدي الشرط. لما لم تظهر لديك عمود المشاركين في قائمة الرسائل من لقطات الشاشة الخاصة بي!

أعتقد أن ما وصفته أعلاه هو عدم تطبيق CSS.
إليك ما لدي:

يمكنك أن ترى أن CSS مطبق على صفحة /latest.

تأكد من نسخ ولصق CSS بشكل صحيح في المكان المناسب!

rahim123 · 14 يناير 2024، 7:58م

شكراً جزيلاً على المساعدة المحددة، لست على جهاز الكمبيوتر الخاص بي الآن ولكني سأحاول مرة أخرى بمجرد عودتي.

rahim123 · 14 يناير 2024، 10:42م

لست متأكدًا مما يجب التفكير فيه، بالتأكيد لا يعمل معي.

فقط للتأكيد، هل تستخدم أيضًا سمة Sam البسيطة؟

أيضًا، هل وضعت كود المقابض في الرأس أم الترويسة؟

أقدر حقًا وقتك ومساعدتك.

Arkshine · 14 يناير 2024، 10:51م

نعم، أنا أستخدم سمة سام.

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

CSS

.topic-list:not(:has(.topic-list-body .topic-list-data.posters))
  .topic-list-header-row
  .topic-list-data.posters {
  display: none;
}

Head


<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
    <tr class="topic-list-header-row">
      {~raw-plugin-outlet name="topic-list-header-before"~}
      {{#if bulkSelectEnabled}}
        <div class="bulk-select">
          {{#if canBulkSelect}}
            {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
          {{/if}}
        </div>
      {{/if}}
      {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
      {{#if showLikes}}
          {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if showOpLikes}}
          {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
    </tr>
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{#if bulkSelectEnabled}}
      <td class="bulk-select topic-list-data">
        <label for="bulk-select-{{topic.id}}">
          <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
        </label>
      </td>
    {{/if}}
    
      <td class='main-link clearfix topic-list-data'>
      {~raw-plugin-outlet name="topic-list-before-status"~}
      {{raw "topic-status" topic=topic}}
      {~topic-link topic class="raw-link raw-topic-link"~}
      {{#if showTopicPostBadges}}
        {~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText~}
      {{/if}}
      {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
      {{#if expandPinned}}
        {{raw "list/topic-excerpt" topic=topic}}
      {{/if}}
      <div class='creator'>
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {~#if topic.creator ~}
          <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
        {~/if ~}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      </div>
    </td>
    
    {{#if showLikes}}
      <td class="num likes topic-list-data">
        {{#if hasLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if showOpLikes}}
      <td class="num likes topic-list-data">
        {{#if hasOpLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.op_like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if topic.isPrivateMessage}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
      <td class="last-post topic-list-data">
      <div class='poster-avatar'>
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
      </div>
      <div class='poster-info'>
        <a href="{{topic.lastPostUrl}}">
          {{format-date topic.bumpedAt format="tiny"}}
        </a>
        <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
      </div>
    </td>
</script>

rahim123 · 14 يناير 2024، 11:11م

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

rahim123:

يبدو أن ملف CSS الأصلي الخاص بي يعمل بشكل جيد لإخفائه في الأحدث:
.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

هل هناك أي مشاكل محتملة أو عيوب في حل CSS هذا؟

Don · 14 يناير 2024، 11:13م

بما أنني أرى أنك تستخدم فايرفوكس، فقد يكون هذا هو سبب عدم عمل المحدد :has لديك. إنه مدعوم فقط من الإصدار 121 من فايرفوكس.

rahim123 · 14 يناير 2024، 11:15م

هذا يفسر الأمر! وكان يعمل في كروميوم، لكنني افترضت أن ذلك كان بسبب عدم تسجيل دخولي هناك بصفتي المسؤول. أنا أستخدم فايرفوكس 115 ESR من دبيان 12. شكرًا جزيلاً لك، كنت سأصاب بالجنون بسبب ذلك.

Arkshine · 14 يناير 2024، 11:17م

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

rahim123 · 15 يناير 2024، 12:40م

هناك تحسين إضافي في CSS أود تنفيذه لجعله أكثر فائدة: على نوافذ المتصفح الأوسع، يعرض الآن المشاركين في PM كما هو متوقع:

ولكن على النوافذ الأضيق، فإنه يقلل عدد صور المشاركين إلى صورة واحدة فقط، لذلك نصل إلى نفس المشكلة الموضحة في المنشور الأول لهذا الموضوع:

هل هناك طريقة لإصلاح ذلك عبر CSS بحيث يتم إخفاء عمود الردود على النوافذ الأضيق وإخفاء الصورة الرمزية في عمود آخر مشاركة، مما يترك مساحة أكبر لعمود المشاركين؟

Arkshine · 15 يناير 2024، 2:39م

هل يمكنك تجربة CSS هذا؟

@include breakpoint(extra-large, $sidebar: true) {
  .user-messages-page .topic-list {
    .posts {
      display: none;
    }

    .posters {
      width: 146px;
      text-align: inherit;
    }

    .last-post {
        width: auto;

        .poster-avatar {
            display: none;
        }
    }

    .topic-list-header .topic-list-data.activity {
      width: auto;
    }

    .topic-list-data.posters {
      a:not(.latest) {
        display: inherit;
      }

      a.latest {
        width: auto;
      }
    }
  }
}

rahim123 · 15 يناير 2024، 2:50م

شكرا لك! شبه مثالي، باستثناء أنه مع العروض بين حوالي 1380 بكسل - 1020 بكسل لا يزال يعرض جميع الأعمدة ويقلل صور المشاركين إلى صورة واحدة فقط. العروض الأضيق من ذلك تعمل بشكل رائع.

Arkshine · 15 يناير 2024، 3:11م

استبدل medium بـ extra-large في breakpoint(). يجب أن يبدأ الآن من <= 1140 بكسل. السلوك الأصلي الذي يخفي صور المستخدمين الرمزية يحدث عند نقطة التوقف هذه في الواقع. هل يعمل؟

الموضوع		الردود	مرات العرض
[Glimmer] Different theme for personal message topics list? Dev personal-messages	2	54	8 فبراير 2025
MD Topic List component Theme component	73	9298	7 سبتمبر 2025
Sam's Simple Theme Theme official , sams-simple-theme	368	81539	17 فبراير 2025
Topic Author Theme component end-of-life , topic-author	63	12395	4 أكتوبر 2024
MD Topic List Mobile component Theme component	57	6358	7 سبتمبر 2025

مظهر مختلف لقائمة مواضيع الرسائل الشخصية؟

الموضوعات ذات الصلة