MD Topic List Mobile component

[Steven]

可能です。

デフォルト設定に入れるかどうかは分かりませんが、試したい場合は、header セクションに追加するコードは以下の通りです。

{{d-icon \"eye\"}} {{number topic.views numberKey=\"views_long\"}}
および
{{#if hasLikes}}{{d-icon \"heart\"}} <a>{{number topic.like_count}}</a>{{/if}}

私の画面では、これを使用しました。

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          `~` 構文は要素間のスペースを削除し、
          `<a>` タグの最後に続くテキストとトピック投稿バッジを同じ単語として扱い、
          独自の行に折り返せないようにします。
        --}}
        {{raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{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 showTopicPostBadges}}
		    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
		  {{/if}}
          {{#if expandPinned}}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory}}
            <span class="topic-creator">
              {{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            </span>
            {{else}}
            {{raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}">
          <a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
        </span>
      </div>
    </div>
</td>
</script>

[Heliosurge (Dan DeMontmorency)]

目が表示されません。投稿されたスクリプトを、メインテーマの新しいテーマコンポーネント拡張機能アドオンに追加しました。

[Steven]

一部のアイコンでは、それに対応する Font Awesome の文字を登録する必要があります。

svg icon subset 設定を確認し、fa-eye を追加してください。

[Heliosurge (Dan DeMontmorency)]

ありがとうございます。これで解決しました。追加したと思っていたのですが、変更をコミットし忘れていたようです。

[Heliosurge (Dan DeMontmorency)]

Stable ではすべて正常に動作します。しかし、テストが合格してもビューやいいねが表示されないようです。Air Theme のようなものが干渉していないかプレビューで確認しても、ビューやいいねは表示されません。ベースコンポーネントは意図したとおりに機能します。拡張機能ではビューやいいねが表示されません。

[satonotdead]

すみませんが、赤いアイコンは何を意味しますか？タグのようなものですか？

フォーラムの他の部分との調和を保つために、代わりにFont Awesomeアイコンを使用できますか？

共有ありがとうございます！

[Steven]

タグがない場合に d-icon タグで問題が発生しました。

現在、絵文字の代わりに Font Awesome アイコンを使用するように新しいソリューションを試して更新をプッシュしました。うまくいくか教えてください。

編集：元に戻しました。デスクトップでは機能しますが、モバイルでは機能しません。

試したい場合は、次の CSS を使用できます。

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}

[digitaldominica]

こんにちは、このテーマコンポーネントが有効になっていると、モバイルでの一括選択オプションが機能しません。

[Steven]

ありがとうございます。アップデートをプッシュしました。

これでトピックタイトルの横にチェックボックスが表示されるはずです。

[digitaldominica]

問題は解決しました。

[Steven]

新しいGlimmerトピックリストでは機能させる方法が見つかりません。

このテーマコンポーネントは廃止されると思います。今のところ、deprecated としてタグ付けできます。

プラグアウトレットのみを使用して何か新しいことを試すかもしれませんが、同じような見た目にはならないでしょう。

[CAX.DO (Max)]

これは非常に便利なコンポーネントであり、特にその外観は、フォーラムにより多くのコンテンツを表示することを可能にします。将来的に使用できなくなるのは本当に残念です。

[Canapin (Coin-coin le Canapin)]

このコンポーネントの大ファンです。デフォルトのモバイルビューは（特に最後の投稿者のアバターが左側にあるのが最も奇妙です）劣っていると感じています。残念ながら、私はコーディングができず、ChatGPTもこの件ではできないため、手放すのは悲しいです:sob:

[Arkshine]

やってみます！

[Arkshine]

PRを作成しました

DEV: Modernize using plugin outlet

[Steven]

素晴らしい！

まだ試せていませんが、トピックバッジ（未読投稿）も追加できましたか？いくつかテストしましたが、トピックタイトルの横にあるトピックバッジの追加はそれほど簡単ではありませんでした。

しかし、私はあなたのレベルには全く及びません。

[Arkshine]

@Steven テストしていません！現在の変更では、何も置き換えないため、表示されることが期待できます（ただし、期待される場所ではないかもしれませんが）。

編集：
見た目は以下の通りです。

コンポーネントなしの元の表示は以下の通りです。

アバターを置き換えたいですか、それともこのままでよろしいですか？
アバターを置き換えられるか見てみましょう。

編集2：

DEV: Show topic post badges in place of the avatar when available

[Steven]

@Arskshine、ご協力ありがとうございました！

コンポーネントについて少し作業しました。皆さんにご提案があります。

現在の表示は以下の通りです。

抜粋を復元し、トピックバッジをタイトルの隣に移動させる代替案を検討しました（スクリーンショットはフランス語ですが、デザインが最も重要です）。

公式バージョンにはどちらをご希望ですか？

[CAX.DO (Max)]

こんにちは、@Steven @Arkshine

ご尽力いただき、誠にありがとうございます。

もう一点、ご相談があります。以下2枚の画像は、それぞれ新バージョンと旧バージョンのスクリーンショットです。ご覧の通り、記事タイトルの幅が両バージョンで異なっており、改行位置の違いで明らかです（申し訳ありませんが、タイトルは中国語ですが、改行位置が重要です）。

新バージョンでタイトルの長さを拡張することは可能でしょうか？このコンポーネントを使用する目的の一つは、より多くの情報を表示することです。

コーディングの知識がないため、説明が専門的でないかもしれませんが、ご了承ください。

[CAX.DO (Max)]

このCSSを追加したところ、機能しました。

td .main-link {
    width: 100%;
    display: inline-block;
}