المواضيع غير المقروءة (نسخة الجوال)

[PaulinaMX (ForosMX)]

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

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
    <td>
      {{#unless expandPinned}}
      <div class='pull-left'>
        <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>
              </div>
              
      <div class='right'>
      {{else}}
      <div>
            {{/unless~}}
            

<div class='main-link'>
          {{raw "topic-status" topic=topic}}
          {{topic-link topic}}
          {{#if topic.featured_link}}
            {{topic-featured-link topic}}
          {{/if}}
          
          
{{#if hideCategory}}
   <div class='category'>
          <span class="author-name"><a>{{topic.creator.username}}</a></span>
        </div>
{{else}}

{{/if}}
                    {{#if topic.unseen}}
                      <span class="badge-notification new-topic"></span>
                      
             {{/if}}
          {{~#if expandPinned}}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if~}}
        </div>
                <div class='pull-right'>
          {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
        </div>
    
        <div class="topic-item-stats clearfix">
          {{#unless hideCategory}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/unless}}
    
          {{discourse-tags topic mode="list"}}
    
          <div class="pull-right">
            <div class='num activity last'>
            <span class="age activity" title="{{topic.bumpedAtTitle}}"><a>{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
            </div>
          </div>
              <div class="clearfix"></div>
        </div>
      </div>
    </td>
</script>

[Don]

هناك بعض التغييرات في القالب الأساسي لذا يجب عليك المقارنة به.

إذا فهمت بشكل صحيح، فقد قمت بتغيير قسم صورة الملف الشخصي للمستخدم باستخدام \u003ca href=\"/users/{{topic.creator.username}}\"\u003e{{avatar topic.creator imageSize=\"50\"}}\u003c/a\u003e، هل المسار /users/ صحيح؟ هذا سيؤدي إلى ملف تعريف المستخدم بدلاً من فتح بطاقة المستخدم. مع المسار الافتراضي للمستخدم، يجب أن يكون /u/.

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

قم بإزالة هذا من القالب الخاص بك:

{{#if hideCategory}}
   \u003cdiv class='category'\u003e
          \u003cspan class="author-name"\u003e\u003ca href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}"\u003e{{topic.creator.username}}\u003c/a\u003e\u003c/span\u003e
   \u003c/div\u003e
{{else}}

{{/if}}

---

وأضف هذا إلى {{#unless hideCategory}} الافتراضي مع {{else}}.

{{#unless hideCategory}}
{{~raw-plugin-outlet name="topic-list-before-category"}}
\u003cdiv class='category'\u003e
  {{category-link topic.category}}
\u003c/div\u003e
{{else}}
\u003cspan class="author-name"\u003e
  \u003ca href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}"\u003e{{topic.creator.username}}\u003c/a\u003e
\u003c/span\u003e
{{/unless}}

---

لذلك أقترح استيراد القالب بأكمله وتعديله حسب احتياجاتك على هذا النحو.

\u003cscript type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'\u003e
\u003ctd class="topic-list-data"\u003e
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  \u003cdiv class='pull-left'\u003e
    \u003ca href="/users/{{topic.creator.username}}"\u003e{{avatar topic.creator imageSize="50"}}\u003c/a\u003e
  \u003c/div\u003e
  \u003cdiv class='right'\u003e
    {{~raw-plugin-outlet name="topic-list-before-link"}}
    \u003cdiv class='main-link'\u003e
      {{~raw-plugin-outlet name="topic-list-before-status"}}
      {{~raw "topic-status" topic=topic~}}
      {{~topic-link topic class="raw-link raw-topic-link"}}
      {{~#if topic.featured_link~}}
      {{~topic-featured-link topic~}}
      {{~/if~}}
      {{~raw-plugin-outlet name="topic-list-after-title"}}
      {{~#if topic.unseen~}}
        \u003cspan class="topic-post-badges"\u003e\u0026nbsp;\u003cspan class="badge-notification new-topic"\u003e\u003c/span\u003e\u003c/span\u003e
      {{~/if~}}
      {{~#if expandPinned~}}
      {{~raw "list/topic-excerpt" topic=topic~}}
      {{~/if~}}
    \u003c/div\u003e
    \u003cdiv class='pull-right'\u003e
      {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
    \u003c/div\u003e
    \u003cdiv class="topic-item-stats clearfix"\u003e
      {{#unless hideCategory}}
        {{~raw-plugin-outlet name="topic-list-before-category"}}
        \u003cdiv class='category'\u003e
          {{category-link topic.category}}
        \u003c/div\u003e
        {{else}}
        \u003cspan class="author-name"\u003e
          \u003ca href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}"\u003e{{topic.creator.username}}\u003c/a\u003e
        \u003c/span\u003e
      {{/unless}}
      {{discourse-tags topic mode="list"}}
      \u003cdiv class="pull-right"\u003e
        \u003cdiv class='num activity last'\u003e
          \u003cspan class="age activity" title="{{topic.bumpedAtTitle}}"\u003e\u003ca
              href="{{topic.lastPostUrl}}"\u003e{{format-date topic.bumpedAt format="tiny" noTitle="true"}}\u003c/a\u003e
          \u003c/span\u003e
        \u003c/div\u003e
      \u003c/div\u003e
      \u003cdiv class="clearfix"\u003e\u003c/div\u003e
    \u003c/div\u003e
  \u003c/div\u003e
\u003c/td\u003e
\u003c/script\u003e

---

هذا يبدو جيدًا بالنسبة لي في منشئ الثيم. آسف إذا فاتني شيء.

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

.topic-list .main-link a.title {
  padding: 0.5em 0;
}

[PaulinaMX (ForosMX)]

شكرا جزيلا، تم حل المشكلة الآن، وتبدو رائعة.

شيء آخر، هل هناك أي CSS لجعل خط النص في اسم المؤلف أكبر وإعطائه لونًا؟

[Don]

يسرني أن المشكلة قد تم حلها. بالتأكيد يمكنك تغييرها. هكذا
غيّر الحجم واللون كما تريد.

.topic-list .topic-item-stats .author-name a {
  font-size: var(--font-up-1);
  color: red;
}

[PaulinaMX (ForosMX)]

شكراً جزيلاً مرة أخرى، يبدو الأمر تماماً كما أردت.